When lean UX meets lean humans: part 1

Designing a nutrition and diet app

Amelia Stone
Nov 10, 2017 · 9 min read

(Read the full article with parts 1 & 2 in my portfolio.)

The brief

After numerous years of experience in the wellness field, the National Wellness Institute’s program has been slow to catch up with technology. They have seen a substantial drop in memberships and want to find a way to add value to their members. To do this they have decided to create a set of digital wellness tools for Wellness coaches, and update their visual system to reflect their innovative and refreshed approach to wellness.

The National Wellness Institute wants a designer to reimagine how people can adopt and maintain a routine that enhances their wellbeing.

  • The tool should focus on one aspect of personal wellness that the designer considers important (backed up by user research), such as: exercise and fitness, eating/diet, meditation, time management, etc.
  • The only requirement is that it tracks the user’s progress and pushes them to commit to a healthier lifestyle.
  • The UI should reflect a fresh, updated image.

The design method

By applying the lean UX (fast UX) method, within 2 weeks I was able to understand target users’ needs, define the problem to address, brainstorm solutions, test a paper prototype with users, and create a mid-fidelity prototype based on the tester feedback.

Click here to skip ahead and try out the mid-fidelity prototype, or continue reading to learn about the UX process that led to this design.

Second iteration: mid-fidelity prototype

Step 1a: Empathize with users

I decided to focus on nutrition and diet, but first I conducted user research to make sure people want help with this and would use an app to do so.

To get feedback from real people about their needs (vs what I think they need), I sent out a survey and interviewed a few people. I used a lean survey canvas to figure out what data I needed from the survey.

Lean survey canvas

3 interviews and a 7-question survey with 33 responses yielded enough insights to get started. The interviewees didn’t have much interest in using an app to help with their nutrition and didn’t struggle with following a diet. The first survey response showed absolutely zero interest in nutrition and nutrition apps. Happily, more survey results came in and confirmed that many people are interested in nutrition interests and have used an app or would like some diet guidance.

Onward!

Step 1b: Empathize (with the business)

Lean UX canvas

In UX we also need to fulfill business needs. Completing a lean UX canvas helped me identify the business problem I’m solving, the results the client is expecting, the target users, goals we want to help people achieve, and some initial ideas to reach those goals. I put it all together into a hypothesis then identified the riskiest assumption I can test — an assumption that, if incorrect, could cause the entire project to fail. Then I thought of the fastest and easiest way to test that risky assumption.

The risky assumption for this project is that people care about their wellness, and will use a digital tool to help with that. If this assumption is wrong, there’s no point going any further. Since we’ll learn this early in the process, we’ll have lost no money or time on design or development. Thanks, lean UX!

Step 2: Define

Now comes the exciting part: data analysis! I put interview and survey data onto virtual sticky notes in RealtimeBoard.

Organizing the data in an affinity map helped me see patterns.

Affinity map: quantitative data on the left, qualitative on the right

Several common pain points emerged: users want meal suggestions, an easy way to count calories / food intake, nutrition advice adapted to their health concerns, help with changing weight, and motivation. In the words of the users:

“Nutrition info is a bit of a mine field.”

“I would like it to tell me what exactly to eat.”

“Calorie counting is tedious.”

“Entering everything you eat is a pain.”

“It was motivating to do the diet together, it made it competitive. But after a month it became time consuming.”

Step 3: Ideate

Brainstorming

Fresh from data review, I dove into brainstorming.

After a few minutes of brainstorming I had already bitten off more than I could chew, so I moved forward with the ideas that seemed to solve the users’ biggest needs.

Mind mapping

Time for some mind mapping to refine ideas. Within a few minutes I had solutions for 3 key user needs.

I called a dietician to get insight about the type of nutrition data the app would need to advise users. By the time we got off the phone I had a hundred more ideas. I kept 3 solution ideas:

  • Fast, easy, healthy meal plans adapted to specific dietary needs. For this limited-scope exercise, the user will need to already know their needs.
  • Simple and visual calorie entry based on the American Diabetes Association’s Create Your Plate method. Select food from a list and add it to your plate.
  • Motivation and engagement through self-expression gamification — see a caricatured version of yourself get slimmer or plumper according to what you eat. I predicted this idea would either be loved or hated — we’ll see after testing. To test quickly I planned on borrowing Bitmoji instead of designing characters from scratch.
Plumped-up Bitmoji Amelia may consider a salad tomorrow

Problem statement

People who care about their nutrition need an easy, fast and motivating way to improve their diet because they don’t always find it easy to achieve specific nutrition goals.

The problem statement, a succinct, easy-to-digest definition of the right challenge to focus on during ideation, helped me remember who needs what, and why.

Persona

To stay mindful of the users I’m designing for, I synthesized their characteristics (demographics, goals, needs, behaviors, influences, etc.) into one fictional person. That helped me focus on one target “user” while I go about designing.

So… meet Sara!

I would have a drink with this girl

Empathy map

Thanks to the persona we have an idea of who Sara is. But what does she think and feel? What does she see and hear as she goes about her day? How do these things lead to frustrations? What would make her world better? An empathy map puts us in her shoes and keeps us mindful of her needs as we develop the project.

Sara’s sticky-note world

User Journey

Mapping out our persona’s user journey gives us insight into their activities and emotions throughout a set period of time. This lets us identify opportunities where our product can ease the user’s pain points. In the example below we see that Sara is pretty crunched for time, and struggles to get her diet data into her app and plan for meals. Our nutrition app will try to turn those unhappy moments into satisfying ones, and free up time for more interesting activities.

User Stories

User stories are short statements from the user’s perspective. They help keep the project focused on the user’s needs, and break the project into bite-size pieces, making it easier for designers and developers to digest them. Here are three user stories for this project:

  1. As a busy working professional, I want to receive quick, easy and healthy meal suggestions so I don’t have to think about meal planning.
  2. As someone who needs motivation, I want a nutrition app that’s engaging so I can stick to a diet plan.
  3. As someone who doesn’t like to spend a lot of time using an app, I want to enter and track my calorie intake quickly and easily so I can have time for more fun things.

Task Creation

Before creating a prototype to test these ideas, I need to know what tasks I want my testers to try. At this stage I’ll stick to 3 simple tasks before going further — one task for each of the 3 solution ideas:

  1. Select a 7-day meal plan for a vegetarian with gluten intolerance
  2. Enter the following meal into the nutrition tracker: 1 serving tofu, 1 serving broccoli, 1 serving potatoes, 1 serving strawberries, 1 serving wine
  3. Check if your avatar gained or lost weight since yesterday

I’d also like to have the testers enter nutrition / diet goals (to know what weight the avatar should begin with) but probably won’t have time.

Step 4: Prototype

Low-fidelity prototype (paper prototype)

It’s craft time! To get user feedback on my ideas without spending much time and money on prototyping I created a low-fidelity prototype with pen and paper. This kind of prototype also lets the user (and the stakeholders) focus on the functionalities and ideas we’re testing, rather than getting distracted by colors, fonts, alignment, etc.

Since this is a rapid paper prototype, I end up sketching stick figures instead of using Bitmoji characters.

Step 5: Test

Prototype testing feedback:

“Calories bar? Why am I seeing this?”

“Why am I seeing the avatar after eating? There’s no way back. I should think of quantity before I eat.”

“I know I’m getting fat, I don’t want to see it.”

“Too many clicks”

“Needs a menu screen before the meal plan part”

“Needs more motivational content”

“It’s depressing. ‘Almost there’ is better than ‘not bad’.”

And the UX process begins again…

Empathize, define, ideate

In the interest of time, for the next iteration I focused on the 2 simplest features: motivation and food (calorie) entry.

I decided to replace the avatar idea with a simple reward feature: receive a gift — a cute vegetable character — every day you reach your calorie target, and add it to a virtual garden. My idea for the garden is a vegetable social network where each veggie has a distinct personality (dancing carrot, angry tomato, etc.) and they fall in love, grow older, fight, etc. — thereby creating user engagement (come back to see what your veggies have been up to in the garden!).

It was also important to drastically simplify the food entry process. After all, plenty of existing nutrition apps already offer all the complexity you could ask for. I needed to remember my users’ need — enter food as easily and simply as possible.

A user flow diagram helped me map out the different steps the user would take in the new solution:

And a site map helped me plan the key screens needed:

Prototype (again)

Based on the user flow, site map and many more interface sketches, I created a medium-fidelity prototype with Sketch & Invision to test a new iteration. The goal is still to test functionality and not visual design, so colors are left out.

Click here to try it out!

Next steps

After refining the new prototype a bit more I’ll test it on a few people and modify as needed. Then comes interaction and visual design!

(Read the full article with interaction and visual design in my portfolio.)

— — —

Follow me if you’d like to hear about the next phase of this project.
Please clap if you liked this article, and leave a comment if you have any feedback or critiques.

Amelia Stone

Written by

UX designer at Ippon Technologies Paris. Research junkie. Amateur psychologist. Karateka.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade