WEEK 5 - Functionalities & User Flow & Wireframes & User Test

Date Created:           October 2nd, 2018

Date Last Updated:  October 4th, 2018


Finally! We are here, to prototype our ideas and make it come true! I have always been so excited about this part!

We came up with the idea to start with playful questions to collect some basic user data and to have more specialized questions (by food groups) after. This way, the user doesn’t have to spend much time answering questions before they can see matches and view other user’s profiles. We took a page from some our precedents: don't bore your user, especially at the beginning of a task.

Necessary Capabilities

The necessary capabilities of the Nutrition connection:

  • Collect data through initial modes.

  • Based on this data, create a profile for the user.
    Users can add more information to their profile, post, take quizzes, and connect their snapchat accounts. 

  • Based on this data, find % of matched questions between the user and other users who also have the app and are located close by - an algorithm must be created for this.

  • Based on more data collected by the internal quizzes, users are able to get a breakdown of their matches - an algorithm must be created for this.

  • Fun and fast modes to capture the users attention

  • Users are able to view their matches profile in order to get more information on that person

    • Can find out basic profile information

    • Can view the person’s restaurants, likes and dislikes

    • Can view the person’s post to get insight into what type of diet they lead

Key factors driving our design solution

  • Easy to navigate.

  • Attractive and fun.

  • Provide a sense of belonging by matching users with people who share the most similar dietary habit / preference / desire.

  • Allow users to support, inspire and encourage each other.


Key functionalities

  • When the user first enters, it will take them through the beginning modes which must be fun and fast to collect data for profile.

  • The user can see what mode they are in when they first begin along with how many more they have to complete. This will bring them to complete their profile.

  • One-time operations are done at the first execution: different modes to collect initial data & creating an account/profile.

  • When creating profile, they can add a photo of themselves, add more information, and add posts.

  • When posting, they can choose text accompanied by a photo.

  • Users can view posts of others, comment their posts and even have further connection - contact them via snapchat handle.

  • Users can take more fun and specific quizzes about specific food such as fruit, vegetables, coffee. The result will show more about how well they are alk

  • The navigation for the home page: Quizzes, Profile, Post, & Matches

User Flow

I did the userflow based on our discussion and broke them into 3 parts by tasks.


Overview of the userflow

(Click to magnify it)


Task 1 - Initial Quizzes

Click to magnify it)


Task 2 - Create a Profile

(Click to magnify it)


Task 3 - View the Matches and Connect

(Click to magnify it)


We seperate the wireframes into 3 parts and assigned it to each of us. I did the first quiz in Task 1, Task 2, half of Task 3 and merged all of our work into one and unified the style. 

Wireframes - 1st.png

1st version of the wireframe

(Click to magnify it)

User Test

We did 3 user tests in the class on Monday and learned a lot! In the user tests, we testd our ideas, identified key issues in navigation and functionality, explored multiple, possible experiences and identified which experiences to develop further.


Zihan, Nicole and Juniette tested our wireframes.


I wrote down all the feedback we got from the user tests and  Clay.

Feedback from user tests

1.”Choose anything you would eat between” page










2. Can users retake the first 3 quizzes? Maybe they change their diet maybe they become a vegan some day.


3. Should we have a back button for quizzes? Maybe they want to go back and change the answers.


3. “Why are we taking all these quizzes?”


4. Maybe users can share their quizzes with others via social media.


5. More login approaches.


6. Maybe users can save the pictures they like.



7. Maybe a heading to explain what these "95%", "30%"mean.


8. The purpose for all the quizzes and matchings still doesn't clear enough. We match, then WHAT? (Support people? / Share experience?)

Reflection - User Tests for Wireframes

  • For the future, we will limit the amount of quiz questions for the beginning and possibly keep those quizzes but make them optional. Show which quizzes the user has taken and if they can take them again.

  • In the future, we want to somehow include people who are nutritionists, trainers, etc. so they can become verified and give information through their profile.

  • Maybe it is better to narrow down the user scope to people with gluten intolerance / eating disorder / people always feel they are fat. Give our app a more specific purpose and audience.  (This requires further user research)

  • Focus more on how users connect each other.

2nd version of wireframes and interactive prototype

  • Buttons with text here can't stand out.


  • The category of food in the quiz  

           "Choose anything you would eat  

           between: "


  • It's really hard to choose. What if I love

           them all or some of them ?