ux design final prototype (TPChina)

Group Memeber: Jackie&Shawn

Project Description: This is the final prototype of our project, TPChina, which is a website that aims to help internationals with finding a travel partner going to China. Improved after Balsamiq Mockup, our final version is designed in Sketch. We use the theme color pink to give users a very welcoming and energetic feeling. The website allows users to know their potential travel partners better by viewing their travel plans and travel habits. The user can also launch their own plan and invite others to join in, or consault a local Chinese person for more concise information. The following video is record by Quicktime in InVision.


Individual pictures(pdf format):


Meal Master (Final)


  • Manage items in fridge
  • Alert system for food items going bad
  • Like, favorite, and share recipes with friends
  • Find recipes for items in fridge
  • Browse community favorites and more!

Questions for Research

  • Would you be likely to make use of an app which provides a recipe based on your leftover food?
  • What features would you like in this app?
  • What is your motivation for cooking?
  • Do you know what is in your fridge?
  • What do you do with expired food?
  • How much food do you throw away?
  • Do you like to follow recipes?
  • Do you ever post your own recipe online?
  • Do you cook for yourself? Or for others?
  • Would you like to eat more healthy?

User Research and Personas


persona2persona4 persona3


Usage Map

Photo Feb 22, 1 59 58 PM


Narrative Storyboard



Initial User Flowchart




Photo Mar 22, 10 42 32 PM


User Flowchart






First Interface Design

wx_camera_1488355833863 wx_camera_1488355873206  wx_camera_1488355859209

Next Iterations

IMG_20170301_160530 wx_camera_1488355819516

Version 1 Prototype


Usability Testing

  • Problems we noticed
    • Confusion about “Google” and “Facebook” tabs on the home page.
    • Users did not understand what the “boxes” for images were.
    • Confusion about edit feature after done editing fridge items.
    • Problems with back button
    • Confusion about app purpose (no logo)
  • Solutions
    • Add a “Save” button after editing fridge items
    • Separate following and followers tab
    • Add a “continue with…” text above the google and facebook buttons.
    • Create a logo
    • Add images + colors in the app to make it more clear.
    • Change the “back” tab to “hamburger” tabs.

Final Iterations on Paper



Final Balsamiq Version

Screen Shot 2017-03-22 at 9.05.43 PM Screen Shot 2017-03-22 at 9.05.39 PM Screen Shot 2017-03-22 at 9.05.34 PM Screen Shot 2017-03-22 at 9.05.30 PM Screen Shot 2017-03-22 at 9.05.25 PM Screen Shot 2017-03-22 at 9.05.21 PM Screen Shot 2017-03-22 at 9.05.16 PM Screen Shot 2017-03-22 at 9.05.11 PM Screen Shot 2017-03-22 at 9.05.06 PM Screen Shot 2017-03-22 at 9.05.02 PM Screen Shot 2017-03-22 at 9.04.51 PM Screen Shot 2017-03-22 at 9.04.43 PM Screen Shot 2017-03-22 at 9.04.39 PM Screen Shot 2017-03-22 at 9.04.15 PM

Final Prototype (demo)

proto2 edited




UXUI // Mk1 Story Curve:


This is the original story curve for my interactive installation, currently, this installation has completely put on the backburner completely in favor of an entire interactive exhibition.

In order to create a strong emotional impact in a short amount of time, I intend to use shock factors as my main resource. Users will come in without really knowing what to expect, their initial experience will be one filled with exploration. After passing certain parts of the maze pre-recorded whispers will be played literally behind their backs causing them to turn around in caution. The experience will begin to get more and more disorienting, they’re hearing voices yet they believe they’re alone, at the same time visually they’ll be completely surrounded by images of themselves. The effect of this will be both isolating yet suffocating. By combining loud and abrupt voices yelling out vulgarities relating to their identities quickly following whispers and murmurs, users will constantly be in a state of trying to adapt and process. By utilizing these soft to loud transitions and ominous music cues, users will also experience a strong sense of anxiety. We plan to utilize this in repetition with different phrases being subbed in and increasingly anxiety inducing music to make each cycle different.

Ultimately at the end of this shocking/anxiety inducing maze users will be questioning why they just experienced this. Why were they being yelled at? Trying to make sense of the things they just experienced. Why why why?! At the very end, a black light will illuminate their shirts and reveal “the answer” that society answers to. “You were verbally abused because you’re gay, you were yelled at because you were black” etc etc, an answer which is immediately rejected by users who have just experienced these prejudices.

After coming to this realization of unjust the world’s reasoning is for all these actions, they’ll be compelled to learn more, get a new “identity”, try to understand the discriminations that others face. Repeating the experience but going in with a new purpose experiencing similar things in a different way.

We hope that this will encourage users to speak out against discrimination, that it will help them widen their world-views and have more empathy for those who are discriminated against.

UXUI // Persona // Bh1525 – Brian Ho

Screen Shot 2017-03-19 at 6.59.04 PM

The personas of our installation will actually be extremely familiar to most as they will be our very own peers at NYUSH. Our current goal is to hold our exhibition in the NYUSH first floor exhibition space and thus the majority of its viewers and participants will be our very own students.

I categorized them as primarily being liberal and outgoing, fairly young and at times naive. Though we’re on the cusp of being adults and we’re certainly beginning to recognize and feel the pressure of adulthood. Generally speaking, most are willing to go into things open minded, especially when it comes to art as it’s unlikely that many of us are extremely outspoken on it or hold extreme prejudice or bias when it comes to works of art.

We expect them to be intrigued by the new edition of another exhibition, and in particular, to be willing to participate and play games especially in the light of winnable prizes such as macbook pros.

Balsamiq Mockup(IMPROVED) – Shawn, Jackie

For the UX Design class, Shawn and I designed a website to help people to find their travel partner based on their preferences. And this is a screen video for the improved version of our website mockup:


For the improvements based on user testing, we:

  • Re-design the interface for some pages to make it more clear(sign-up page, view other’s journey page, etc.)
  • Add the Page of “Chat Room” and “Consult a Local”

Now we mainly have 7 section for users:

  • Launch New Trip
  • Join other’s Trip
  • Mange Your Trip
  • Previous Trip
  • Personal Info
  • Chat Room
  • Consult a Local

We want to further simply the page while keep all the useful functions this week.

UXUI – Brian Ho – Bh1525: Storyboard + Narrative


Utilizing the medium of interactive installations, we hope that we can create an exhibition that can act as a catalyst for discussion regarding failure.


Failure is an inevitable part of growing and being human, something is absolutely necessary and something to learn from. In our current day and age, people are extremely good at social media, curating what parts of their lives they show and keep private. In other words, we’re really good at making it look like we don’t fail. In addition to the fact that the prevalent practice in parenting currently, is to make your child feel special. That they’re unique, that they can do anything they set their minds to as long as they try hard enough. Leads to many growing up, failing at different endeavors and not being able to deal with it. We’re lead to grow up feeling as if any sort of failure is unacceptable. We hope that through this interactive exhibition, we can begin the discussion to normalize failure. To help people understand the inevitability and necessity of failure in order to grow.


One day you’re walking around in the power station of art with some friends and you’re walking around looking at interesting installations and pieces of art. Suddenly something bright catches your eye, there seems to be a large tent looking installation in back of the museum, it’s filled with all sorts of different lights, bright vibrant colors and loud noises. As you slowly begin to walk towards the tent you start hear a loud voice seemly coming from inside the tent, the voice seems to be talking about playing games and winning prizes. The closer you get the louder the voice is, and you begin to hear old timey carnival music and laughter. You put two and two together and realize that this is a carnival of sorts. It seems extremely lively and popular so you decide to go check it out. You brush open the curtain and walk in…only to find that it’s fairly empty. Lots of animatronics and speakers and sounds but very few actual people making the sounds. It’s eerie inside, somehow simultaneously vivacious yet lifeless, directly inside the entrance you find a stand with a button that says “PUSH ME!”, so you do. Nothing happens at first, then a small black box next to the button you barely noticed begins to make a buzzing noise and slowly, a piece of paper comes out with a QR code and a little message that says head to the front desk and pick up a lanyard! Looking around you quickly spot the intro desk to your left and grab a lanyard and place your slip of paper inside the clear lanyard. On the intro desk is an array of different posters for the carnival and a screen that has a web cam in front of it. There is a little sign that says “Scan your QR code here!”, You scan your code and almost jump back as the screen suddenly comes alive, there’s an ecstatic looking man on the screen greets you. “Hello! Thank you for coming to the Carnival! For the rest of your visit you’ll be identified based on the random ID assigned to your QR code, your ID number is 1852375, when you get a chance walk around to check out the different games that we’ve got. Everyone starts out with 10 game tokens that are tracked by your QR code, each game will cost you one token, but will give you a chance at winning a prize token. Go check out the rewards booth to see our awesome prizes that you can exchange your success tokens for! If you run out of game tokens you can head to the projector in the middle of the room in order for an opportunity to earn some more. ;)” 

You glance over at the rewards booth and to your amazement there are several MacBook pros and iPads in there, each with a measly 5 prize token cost. You immediately run to the first game you see and scan your QR code at the webcam found in front, like the intro booth, the screen jumps to life and begins explaining the rules as well as notifying you how many game tokens you have left. You notice a small list of ID numbers of people who have failed to win on the screen but quickly dismiss it and prepare to play.

45 minutes later, you’ve played through every game, went to the projector and received extra tokens three times already and still haven’t even managed to win a single prize token. Clearly disappointed you finally take a moment to just soak your environment in, as you begin to just observe the machines and the games you see the residuals of the failures of those before you. 100’s of missed ping pong balls, paper airplanes slew across the floor, pages and pages of ID’s in the list of failures. Though your attempts at winning the prizes haven’t been fruitful, you feel oddly at peace. You leave the exhibit a bit confused, but definitely intrigued and excited to share the experience with your friends. 

Week 6: Winnow App Group Progress (Segovic-Quader-Kagesawa)

Group members and their duties:

  • Tisa Segovic – Improved the 2nd version of the Balsamiq sketch; Conducted user testing interview2; Created the rest of the pages in Balsamiq sketch (individual’s friend’s feed, search feed, tap&hold page, saved screenshots, notifications page, etc); Took notes during the interview1 & interview2 with Azure
  • Zayna F Quader – Added new pictures into Balsamiq sketch; Made summary notes from the user testing recordings; Created a new Pinterest mood board for design; Choose colors for the new version of Winnow logo; Took notes during the interview2 with Azure
  • Masaki Kagesawa – Reviewed and redesigned the app logo; Improved the flowchart for the app; Conducted the user testing interview1; Started the first version of the Balsamiq sketch (created the home page, product page, personal public feed1, personal public feed2); Took notes during the interview1 with Azure.

During the free time which we had between last week’s class and today’s class, we have made a lot of progress as a group. Along with having two interviews with Azure (Saturday & Monday), we have made improvements on the design of our app (Pinterest mood board, color palettes, fonts), the design of our logo. We have also conducted three user interviews which were followed with recordings on the interviews and detailed notes. The major breakthrough for our design process was the creation of our very first Balsamiq sketch – not only did each of us three learn how to use new software, but we have also had a chance to discuss new ideas and work together as a group!

We have decided to be bold and dynamic, so we decided to create the new Winnow app logo, which uses dark black as a primary color, and the gradient (pink to green) of colors of the icons of two overlaying images which are on top of each other. For the inspiration, we used the idea of new Siri graphics. The picture can be seen below.

Winnow Logo V2

After that, we have decided to choose a font called Roboto Condensed. The reason why we have decided to go with that font is because it seemed very gender-neutral, with soft edges and the letters not spread too far apart. After the user testing, we have asked several users to let us know their thoughts about the font, and both boys and girls were very fond of it. Picture below.

Slika zaslona 2017-03-15 u 12.05.57

Another improvement we have made is on our flow-chart. We drew our improvements from our meetings with Azure, as well as from the learnings which came our of user testing. One of the major improvements we have made was creating the flowchart work more logically, with the four main pages located on the first horizontal line, with smooth navigation to other pages related to the first four pages. This is how the flowchart currently looks like:

Winnow Flowchart V2

For our User testing, we had three users: Professor Azure, Janice Luo, and Jarred Kubas. During this process, the detailed guide for how to conduct user testing given by the professor Azure was very useful. However, since we all still in the learning process, we have had some smaller problems during the testing itself, such as the way in which we have to navigate our user through our app, or answering user’s question during the testing, instead of at the end. The Folder with our screen recordings is located within our User Testing folder. We also have detailed notes taken during the recording which we have referred to during creating the 2nd version of our Balsamiq mockup which is also located within our Winnow-development-round-2 folder. Our team has also found it much more effective and friendlier to work in Balsamiq while creating our user interface, instead of working on-paper.