YANG QIN
  • Work
    • Options trading Design
    • eBay Design System
    • eBay Payment
    • Veni
    • Glow
    • GoHealthy
  • About
  • Contact

Go Healthy

A Mobile App for Healthy Eating
Go Healthy is a smartphone/tablet app designed for helping those who have busy schedules to maintain healthy eating habit in a long run. Go Healthy mainly combines food recommendation and nutrition visualization together to help users keep healthy eating.
Picture

Problem identification

People have the desire to eat healthy but it’s hard to achieve in real life.

The food we eat has a dramatic impact on your overall health and well-being, however, researches show that more than half Americans exceed the daily recommendation for sugars, fats, etc.. Meantime, more than 70% adults are trying to eat healthier at restaurants, yet find it hard to figure out how to. Therefore, my team aimed to solve this question by designing a mobile app that will help users to track their nutrition intake and give them recommendations on healthy meal options at restaurants.

User interview: What Makes Eating Healthy Difficult

In this phrase, my team researched the specific problems adults encountered in achieving health eating, to identify potential improvement in their eating patterns. We interviewed 6 adult students from Cornell University with questions as such:
  • Where do they normally go out for food?
  • What factors influence them to choose different food to eat?
  • What methods they use to keep healthy eating?
  • What would inspire them to eat healthy?
  • What would be their ideal healthy eating habits?

Through the interview, we had several key findings:

Among the participants, international students especially have the difficulty in choosing the healthy food as they lack familiarity with the local food, and this difficulty would lead them to pressures to eat out especially when they don’t know what they might like on the menu nor they might end up spending money on unfamiliar food that they would not like.

Participants recognized the importance of eating healthy and attempted to. However, they don’t have enough time to get the right food due to the tight schedule and some participants would have very causal (fast food, packaged food) meal when alone.

Participants used app like Yelp to help them to decide restaurants and pick food on menu, and they are willing to be recommended with the personalized healthy and tasteful dishes.

Participants showed the desire to know their daily consumption and nutrition situation.

Ideation

Based on these findings, we created an affinity diagram to understand the eating habits of interviewed students and we came up with four factors affecting their establishment of eating habit, and we chose the hierarchical task inventory for our model:
Picture
Use social relationship (social activities are likely to engage in eating)
manage time (what time is available for food)
access food (ways to get the food)
manage expenses (how much budget he expects)
Picture

Two aims of the product:


What we finalize as the two goals of the product:
  • Make users be aware of their daily nutrition intake and goal.
  • Give users specific dishes recommendation rather than restaurants recommendation.

Persona

We first drew out a persona Jo to relate to our findings and better understand the user scenario.
​
Picture

Brainstorming

In this phase, based on persona, we brainstormed ideas without too much focus limiting, and here are some my selected brainstorm ideas sketches:
Picture
​Then we challenged our initial ideas and then integrated convincing points form the designs and to make our thought clear, we drew the outlines on the whiteboard:
Picture
In this phase, our features are:
  • Using a map interface showing nearby restaurant and dishes.
  • Provide Cuisine and price filter.
  • Provide food scanner feature to automatically calculate the nutrition contained in the food.
  • Personalized daily nutrition value recommended.
  • Order and delivery service.

Paper Prototype

To explore out the basic concept of how the app will work in user interface form, we used paper prototype to show how to interact in Go Healthy to 4 users, and get their feedback
Picture
Users gave us some feedback on the paper prototype:
  • Users agreed that restaurants should be combined with restaurant recommendation, and the recommendation should be based on their nutrition status.
  • Users liked to see their friends nearby, but they were confused to have friends list in nutrition goal scenario.
  • Users liked the nutrition status and completion feature, and they wanted the app can provide them with more visual info about their health data.

Wireframing

Base on user feedback, we did the corresponding improvements: provide nutrition-based suggestions; different color to present different kinds of nutrition label and chart; nutrition completion and goal should not be only shown a daily basis, but a weekly, monthly basis. We used wireframe to clarify the features.
Picture

Heuristic evaluation

Base on user feedback, we did the corresponding improvements: provide nutrition-based suggestions; different color to present different kinds of nutrition label and chart; nutrition completion and goal should not be only shown a daily basis, but a weekly, monthly basis. We used wireframe to clarify the features.

​Before implementing high-fidelity mock-ups, we used Nielsen’s heuristic list help us to identify usability problems. Here I show some selected problems list.
Picture
We solved the problems in the wireframe and here are some selected hi-fi prototypes using sketch. 

Nutrition goal creation:
Picture
​Scanner and nutrition status interaction:
Picture

Usability testing

Given the high fidelity prototype, we conducted usability testing to test the interaction, gauge levels of intuitiveness, familiarity to other apps, ease of achieving task objectives. And with the goal to find design problems that need to be fixed on the tasks implemented in the prototype, we identified six tasks for users and observed their behaviors during user evaluation and summarized the key UX problems we encountered:

Hard to navigate to nutrition page (users don’t know clicking profile image leads to nutrition page).
Missing Feedback after scanning the food picture (there’s no feedback of how much calories, fact, etc., they gained, but just show the whole updated nutrition result).
No way for users to revise weight, food preferences.
The homepage (the map page) makes user reflect to Yelp, they thought we are a similar restaurant recommend app.

key Findings

One important finding here is about homepage, as homepage is supposed to put the most striking feature that best embodies the goal of our product. However, compared nutrition completion with restaurants/dishes recommendation, the former is more close to our product vision – make users be aware of their daily nutrition status. What’s more, using restaurants as homepage gives users first impression about Yelp. 

Considered such situations, I re-organized the critical user demands on Go Healthy: nutrition (protein, fat, carbs) daily completion and goal; nutritious dishes recommended; food scanner; Then I came up with the idea that the homepage should serve as a summary of key features, but not some single feature, and I integrated the key points of these critical features on homepage and then users could tap like “see more” to get more details about the specific features. Thus, I re-designed Go Healthy and here is the homepage wire framing.

Thus, I made a wire framing prototype for homepage (see right -->), I feel it’s much clear now. I listed the main features here, and users could quick have an overview about their health status, and they can easily navigate to other pages. Based on homepage design, I quickly completed the prototype designs of other pages.
Picture

Final design

A Design with Focus on Tracking and Finding

For the restaurant page, we used to also allow users to apply cuisine and price filter. However, compared benefit these two filters could bring with the implementing cost, I think these two filters can’t satisfy our product vision very well, and users could use Yelp to filter the food they want, thus, the filters are removed on the restaurant page, and only show the certain dishes Go Healthy recommend.

To make the feature clearer to users, I also built profile page, for users to revise their height/weight, view the basic information, etc. and I draw the wire frames for the final design.Initial set-up
Picture

Yang Qin © 2019

  • Work
    • Options trading Design
    • eBay Design System
    • eBay Payment
    • Veni
    • Glow
    • GoHealthy
  • About
  • Contact