UX/UI Design

Battle of the Plates App

In my Human-Computer Interaction class, my team and I designed a mobile app from start to finish that gamifies maintaining a healthy diet and promotes healthy competition between friends.

TIMELINE

Spring 2016 - 12 weeks

LOCATION

Belmont, CA

ROLE

User interviews, storyboarding, paper prototyping, usability testing, development

TOOLS

Pen & Paper, Balsamiq, Photoshop, Sketch, HTML5, CSS3, Javascript

Check out my work below

Project Brief

How can we make recording and tracking nutrition less confusing and more fun in order to motivate users to keep track long term?

Nutrition can be a daunting topic. People often do not keep track of what they eat and/or have a limited knowledge of the food pyramid and how this translates into daily consumption. This can especially be difficult at Wellesley College where all students are enrolled in the unlimited meal plan, and for many, the first time away from home.

My team and I wanted to solve this problem with Battle of Plates: an engaging and fun way to keep friends motivated in eating healthy.

User Research & Interviews

To get a better sense of who our users would be and their pain points regarding maintaining a healthy diet, we interviewed 20 Wellesley students about their knowledge and impact of nutrition on their eating choices. We asked them a range of questions from their own diet and how they engage in this topic with other students.

    1.  What is your diet?
    2.  Where do you usually eat on campus? Why?
    3.  How important is nutrition in your life on a scale of 1-10?
    4.  What are your thoughts on nutrition and diets?
    5.  Have you ever thought about changing diets?
    6.  What is your routine for picking food? Thoughts that go through   your mind?
    7.  What is important about the food you eat?
    8.  Describe your interactions with friends on the topic of nutrition   and eating on campus.

We noticed that:

    • Those with strict dietary restrictions often checked dining hall menus beforehand and chose their dinner location based on compatible food offerings
    • On the other hand, most students simply chose their closest dining hall
    • Most students know that healthy eating is important, but don’t maintain that lifestyle
    • In regards to nutritional knowledge, it ranged from “very little” to “a lot”
    • Some who admitted that they have poor diets are often inspired by friends who exercise regularly and eat clean

Persona Development

From our qualitative research, we identified four user types and created personas that we would continue to reference throughout the project:

  • “The User with Dietary Restrictions”
  • “The Wannabe Health Conscious Eater”
  • “The Super Health Conscious Eater”
  • “The User who has Thought about Changing Diets”

Task Analysis

To better understand our users’ goals and break out the steps to achieve these goals, we created a Hierarchical Task Analysis of 5 high-level tasks in regards to diets and nutrition.

We outlined 5 high-level tasks from our interviews with Wellesley students:

  1. Picking a dining hall to eat at
  2. Picking food to eat
  3. Learning about eating a balanced diet
  4. Monitoring their nutrients
  5. Changing their diet

By breaking down these high level goals into subtasks, we got a clearer understanding of what kinds of features would be important to include in the app. This was also helpful when figuring out a user flow later on because we were visually able to see the steps and make decisions about which steps should be translated into the app.

At this stage in the design process after our analysis, we solidified 3 main goals for the app:

    1. The app should help users keep track of the portions of each food group that they eat, based on their unique diets and dietary restrictions.
    2. The app should incorporate gamification elements that let users “challenge” their friends in seeing who can keep a streak of balanced eating.
    3. Information about food groups and nutritional information should be easily accessible.

Wireframes & Storyboards

After our research, we created quick wireframes of two possible design routes: simple vs. featured rich.

The simple route includes only essential features such as:

    • Food group servings tracker
    • Profile – necessary to send challenges to friends & record individual diet
    • Challenges – ability to send, receive, and view
    • Friend List
    • Nutritional information

The feature rich design includes more “nice to have” features such as:

    • Logging in with social media to encourage the social aspect of sharing your progress and goals
    • A messaging system to communicate with friends
    • A Personal Goals section where the user can set personal goals for themselves to log and track
    • A Data section to visually see their growth and progress and how they stack up against their friends
    • Achievements to add more gamification elements

Sketching out two design possibilities was helpful in identifying the crucial features vs. the “nice to haves.” Given our time constraint of this semester long projects, we constantly referred back to our sketches to see where we can find a compromise between our two designs.

Below are some of the wireframes of both the simple and feature rich designs, coupled with an app focused storyboard that allowed us to understand how the user would interact with the app and what would be going through their minds.

Simple Design

Feature Rich Design

Paper Prototyping & Usability Testing

We created a paper prototype with the essential goals that we could easily test with users. We conducted one pilot usability test and one test with 5 users.

In each test, I provided a brief that included the problem we are trying to solve, assurance that they may stop at any time and that the data will be used to improve the app (consent & ethics in user research is important!), and the scenarios that they will be going through.

 

The scenarios included:

    • Tracking data – updating daily intake of fruits by 1 cup and looking more info on Fruit
    • Challenging a Friend – sending a challenge, accepting a challenge, and checking progress of the challenge

Observations

In our testing, users were able to complete each scenario successfully, but upon direct observation and feedback, we identified some problems with our app.

 

Problems:

  1. On the inputting food servings page, users were confused about which section represented what part of the food pyramid.
  2. User pressed the “+” button
  3. User completed the Challenges task, but didn’t understand the task fully or what a challenge was.

Revised design:

  1. In recent years, the USDA shifted use of the pyramid imagery to plate imagery. We updated our design to a food plate because it was a more intuitive representation of nutrition tracking. To make the food groups more clear, we labeled them.
  2. The buttons for incrementing the food servings are now clearly labeled with the serving size, 0.5 cup.
  3. We added more copy to explain what a challenge was.

 

A few screens of our paper prototype:

High Fidelity Prototype

Given more time on this project, I would like to explore adding more gamification elements to the app such as badges and fleshing out the challenges page.

A big challenge throughout the project was figuring out how to design the tracking functionality. In the end, we went with manually incrementing by cups but I might have like to explore linking dining hall food items to the app, so tracking their servings is much easier rather than having to manually increment by cups.

Given time constraints on this project, my team and I were not able to brand and style the UI as much as we wanted to. Revisiting this project, I created some mockups of what I would envision this app would look like. Our goal was to make monitoring and maintaining a healthy diet fun, so I decided to go with brighter colors like greens and red to represent the message of our app.

 

Here are a few screens: