Nourishi

Nourishi is a body positivity health and wellness app that simplifies tracking and learning about nutrition and health metrics without ever having to look at a calorie counter.

ROLE

UX/UI Designer

TOOLS

Figma
Illustrator

DURATION

10 months

DELIVERABLES

Competitive analysis
User research
Personas
User journey maps
Task flows
Site map
Wireframes
Prototype
Usability test report

Problem

The health and wellness space is saturated with options for understanding our health, whether we want to monitor our nutrition or track our exercise. But almost all these options force us to engage with calorie counters, which tediously make us enter every little thing we eat and which can harm our relationship to food as nourishment.

So how can we track our health and nutrition without harming our relationship to food?

As part of my 10 month CareerFoundry UX course, I explored this question. I first conducted a competitive analysis to see how the market has sought to solve this problem. For initial user research, I conducted a survey, which I used to guide the questions I asked in user interviews. As I synthesized my results, I used affinity mapping to understand pain points and determine priorities. Then, using personas, I created journey maps and task flows to understand how users would move through the experience, created lo-fi sketches and hi-fi clickable prototypes. Finally, I conducted usability testing to ensure that the pain points were resolved. The project timeline was 10 months.

Now let's look closer at each step.

Inspiration

Conceptulaization

Iteration

INSPIRATION

My hypothesis, that users want to be able to track their nutrition without having to see a calorie counter, comes from my own experience with diet culture. It is difficult to unwind a lifetime of fat phobia, to stop seeing food as "worth the calories" and instead think of food as nutrition--independent of calories. At the time I started my UX course, I was actively trying to change my mindset about diet and cultivate healthy habits of diet and exercise. As a vegetarian, a large part of that was tracking my macros to make sure I was getting enough protein. But to do that I had to look at a calorie counter on the main screen of every app I tried, which triggered me to think about food in terms of weight rather than nutrition.

Meanwhile, a couple of months into my course, I found out I was pregnant. It was suddenly vital to get the nutrition I needed because the health of my baby depended on it. And so again, I tried to track my food to make sure I was eating a healthy, balanced diet, and again, I was confronted by the calorie counter. This was particularly stressful during a period where I was supposed to be gaining weight in a way that was totally divorced from calories in and calories out.

Competitive Analysis

I started with secondary research into the current health and wellness app market, including industry leaders like MyFitnessPal and Noom. Two apps stood out: Lifesum and Ate. Lifesum goes beyond macronutrient counting and offers a more holistic look at health using something called the Life Score. However, it still subscribes to the weight loss, calorie counting model, which is featured prominently on the main page. Ate eschews tracking of any kind, opting instead for a focus on customizable goal setting and food journaling. Neither quite addresses the problem I identified.

Survey

The survey results largely confirmed my initial hypothesis that users of health tracking apps define health holistically, rather than based on BMI, and most users weren't interested in using food tracking to lose weight.

Personally, it was validating to find that my experience was common.

Survey Results

User Interviews

I conducted 5 user interviews with people who fit the target market for Nourishi, and used the initial survey findings to guide the questions I asked. My key findings supported the initial survey results.

User Interviews

Affinity Mapping

Users wanted a customizable tool that supported holistic health and simplified logging and tracking, while providing an opportunity to reflect on their choices. They wanted the app to analyze their data and provide them with personalized, relevant suggestions to improve their health. Users also appreciated visually appealing data visualizations and passive tracking.

Interview Affinity Mapping

CONCEPTUALIZATION

Personas

Journey Maps

I created user journey maps for Carla and Matthew to identify pain points and opportunities, which helped me determine the most important task flows to design: logging a meal, logging blood pressure, and completing a lesson. I used these to create task flows.

Journey Map

Scenarios & Task Flows

Carla finds traditional food logging frustrating for two reasons: it's tedious and it's triggering. So rather than enter every little thing she ate, she will just choose the estimated number of servings of the food groups she's eaten, and we'll use that to determine the nutritional content of her diet.

Matthew knows he has high blood pressure, but he would like to know more about what the numbers mean, so after he enters his results, we will give him a quick overview and an opportunity to learn more about his specific results.

Lana was recently diagnosed with bipolar disorder and she wants to learn about the connection between nutrition and mental health, so we will give her the option to choose which learning journey she wants to complete.

Task Flows

In retrospect, I should have focused more on Carla and less on Matthew and Lana in determining which task flows to create. Carla is my primary persona, and encompasses the primary takeaways from my user research, while Matthew represents a smaller audience. Because the feature for logging blood pressure was important to Matthew, not Carla, who would have preferred a feature using logged data to provide recommendations for making nutritious choices, I ended up designing a feature that is superfluous to my primary persona.

Site Map

I created my initial site map based on my user flows, but made revisions to logging and reflection sections of the app based on a hybrid card sorting test.

Site Map

Low Fidelity Wireframes

I sketched multiple options for addressing the scenarios of my personas, while referring to the goal of streamlining logging and allowing for reflection. Then I created these lo-fi wireframes:

Logging a meal

Logging blood pressure

Completing a lesson

ITERATION

Prototype

I used my low-fi wireframes to create a mid-fidelity Figma prototype, which I used for usability testing.

Usability Test Plan

Moderated Usability Test (Mobile)

August 2023

The goal of this study was to assess the learnability for new users interacting with the app for the first time on mobile. I observed and measured if users understood the app, its value, and how to complete basic initial functions such as logging in, logging meals, tracking health data, and accessing learning journeys.

After asking screening question about health app usage, I asked users to look over the home screen and tell me their first impressions and whether the purpose of the app was immediately apparent. Then users completed three tasks and rated their difficulty in completing them:

You’ve just finished a meal and want to see how it impacts your daily nutrition. Using Nourishi, log the meal and then review your meal data for the day.
You were at the doctor recently and had your blood pressure taken. The doctor said it was higher than she’d like to see, but you’re not sure what the numbers actually mean. Using Nourishi, log your blood pressure and review your cardiovascular health data.
You have a better sense of what your blood pressure means, but you’d like to know some steps you can take to lower it. Using Nourishi, find a learning journey about the relationship between blood pressure and nutrition and complete a lesson.

Usability Testing

Usability Test Results

Conclusions

Using an affinity map of my test results, I identified the 5 most important issues to resolve:

Problem: Need a meal reflection flow

Solution: Create reflection screens

Problem: Difficulty determining if a food had been added

Solution: Remove box from around selection, add an edit/delete option, and change wording to "Add another food"

Problem: Difficulty determining where to review meal data

Solution: Mock up higher fidelity visuals for the Track/Log page to make their purpose clearer

Problem: Unclear data summaries on logging screen

Solution: Add screens with more detailed information about daily data.

Problem: Lack of customization

Solution: Build out screens for customization settings

Usability Affinity Map

Hi-Fi Prototype

The solution to most of the largest pain points in usability testing was higher fidelity. Users were confused by placeholder icons for promised future functionality and couldn't find information because the graphics weren't clear. So I created vector images for key functions before creating a style guide with fonts, colors, images, iconography, and components. Then I used those elements to create my high fidelity prototype.

FINAL THOUGHTS

While this MVP doesn't have the full functionality that I think would solve all the pain points identified in user interviews, it does offer a way to track nutrition without having to look at a calorie counter. I could see using AI to further simplify meal tracking--take a picture and let the AI identify it for you. Personally, I want this app to exist. I want to be able to track my nutrition without having to look at a calorie counter.

Takeaways

Education uses design thinking: Although I didn't realize at the time, this process taught me that I have been using design thinking in my work as an educator for the last decade.
Collaboration makes for stronger ideation: I found it difficult to be siloed away working alone on this project, and it caused me to lean heavily on user research and testing.
Adopt a design system early: I wish I had implemented a design system earlier than my course asked me to. Ultimately, by the time I applied the Material Design system to my screens, there were so many screens that the revision took a lot of time and effort that could have been saved with earlier implementation.
Understand when to test with a mid fidelity or a high fidelity prototype: I should not have done my usability testing with a mid fidelity prototype. The majority of users' pain points would have been easily solved by testing with higher fidelity graphics and text. While there are certainly times when it would have been appropriate, my design conveys too much information graphically to effectively test without those graphics.
Refer back to user research throughout ideation: Somewhere along the line as I started to design screens, I wandered away from my initial vision. My interviews indicated that users wanted meal logging to be simple and nonjudgmental, which my design addresses. However, one of my key takeaways from user research was that users wanted the app to analyze their data and provide them with personalized, relevant suggestions to improve their health, and my MVP lost track of that. Looking through my user research now, it seems like that feature would have been more important to my primary persona than tracking her cardiovascular health.

Page updated

Google Sites

Report abuse