Health Care, Mobile App, Hunger Q’s

Create an eating disorder recovery tool.

Splash screen reads "Hunger Q’s is here to help you opt out of diet culture and opt in to listening to your body’s hunger cues, an integral step in your journey to eating intuitively."
Splash Screen

Role: I was the sole UX researcher and UI/UX designer from conception to prototype for the Hunger Q’s brand and product.

Introduction: For between 80-95% of people who lose weight, the weight loss is not sustainable long-term. In fact, research shows anywhere from 33-66% of dieters regain more weight than they lost on their diets. In other words, diets don’t work. Yet the weight-loss industry profited in 2019 to the tune of $192.2 billion and is projected to reach nearly $300 billion by 2027. 

Dieting perpetuates disordered eating, which comes with a huge societal and economic price tag: over 10,000 deaths and $64.7 billion annually. As the movement to disrupt diet culture builds, there is an evolving need to empower people in recovery from disordered eating.

Problem & Audience: A growing number of people recognize diets don’t work and they want access to weight-neutral, shame-free eating disorder recovery tools that help them eat intuitively.

Solution: A mobile app that helps people reconnect to their bodies’ hunger and fullness (satiety) cues.

Constraints: Budget & COVID. I recruited research participants via free platforms and existing audiences, including Slack, LinkedIn, Facebook, and Twitter. Due to the COVID-19 pandemic, user interviews, guerrilla testing, and usability testing were conducted remotely via Zoom.

Tools: Figma, ProtoPie, InVision Studio, AdobeXD, Marvel POP, Calendly, Zoom, Skype, Google Forms, Google Docs, Google Sheets


High-fidelity Prototype
Try the high-fidelity prototype: High-Fidelity Prototype (Figma)

Screen Capture Recording of Prototype

Highlights:

  • To promote inclusion, I asked people for their pronouns early on in research, in the screener surveys I sent out, and later integrated pronoun fields in account creation and settings within the wireframes and further iterations.
  • The app does an excellent job of maintaining a weight-neutral, shame-free approach, which is attractive to eating disorder treatment providers and patients, as well as those who are interested in eating intuitively and ditching diet culture.
  • Intuitive eating has the potential to help participants improve their relationship with food, which can result in improvements to blood pressure, lipids, and fitness. Intuitive eating also has positive psychological benefits, including decreased depression and anxiety, increased self-esteem, and improved body image

One user, a personal trainer, said,
“This is exactly the product I’ve been looking for.”

What am I even doing?
(aka Research & Synthesis)

  • Secondary research
  • Qualitative & Generative research
    • Screener survey
    • User interviews
  • Synthesis
    • Affinity diagrams
    • Empathy mapping
    • Personas
    • User stories
  • Evaluative research
  • Guerrilla testing
  • Usability testing
  • Subject matter expert consultations

Secondary research
Secondary research revealed some of the existing products available in the market, as well as gaps in the marketplace. While diet apps were plentiful, eating disorder recovery and intuitive eating tools were scarce.

Generative research
41 people responded to the screener survey seeking participants for initial user interviews. Some of the questions included in the screener survey were:

  • How frequently do you use mobile apps?
  • What is your past experience of dieting?
  • How comfortable are you talking about food and eating?
  • Have you ever been professionally or self diagnosed with an eating disorder?

User Interviews
From the responses, I narrowed down the field to 10 potential interviewees, who I emailed with a Calendly link to schedule interviews. Six of 10 scheduled interviews, and five out of six of the scheduled interviewees showed up, meeting my target of five user interviews.

The interviews ranged from 30 to 45 minutes apiece, including questions about food preferences, dietary limitations, grocery shopping, dining out, tools/resources already used, eating and challenges around eating, social media and body image.

Synthesis
I synthesized the user interviews largely through affinity diagrams, exploring different groupings to identify themes and priorities.

Affinity Mapping: Wishlist
Affinity Mapping: Tools and Resources

At this stage, five problem statements emerged:

  1. How might we provide support to people in eating disorder recovery, in addition to providing opportunities to improve self-esteem and body image?
  2. How might we support positive non-diet behaviors in a mindful, shame-free way?
  3. How might we help people find community around eating confidently, as free of diet culture as possible?
  4. How might we reduce the number of tools needed to manage a variety of food palates/preferences/allergies in an accessible way?
  5. How might we improve the accessibility of nutrition education for a wide-ranging audience?

I further refined the data into user stories, then grouped the user stories further according to theme, through which I was able to define a minimum viable product focused on these two problem statements:

  • How might we provide support to people in eating disorder recovery, in addition to providing opportunities to improve self-esteem and body image?
  • How might we support positive non-diet behaviors in a mindful, shame-free way?

Guerrilla Usability Tests
I conducted five guerrilla usability tests with lo-fi sketches in a Marvel POP prototype to identify early on any major usability issues in a quick and easy way.

Participants generally understood the app to be like a food diary. I discovered the iconography wasn’t clear. One user had trouble identifying where to go for settings. Another user had trouble identifying the past entries icon. One user felt the slider functionality was unclear and could use more context. Multiple users felt that the “meal” and “snack” options needed more context and should be placed at the top of the Add Entry page. I also learned that some suggestions of what the user might write in the notes section might be helpful (sample questions for people to answer).

As a result of the guerrilla usability testing, I added labels to all icons, to ensure their functions are clear to all users. I changed the slider in the Add Entry page to a series of five clearly labeled icons. This revision also makes the app more accessible to people for whom adjusting a slider might be challenging. I added “Select one:” for context before “meal” and “snack” radio buttons and moved that group to the top of the Add Entry page, which serves as an easy lead-in to the hunger rating questions.

Usability Testing

I conducted two separate rounds of usability testing, iterating on the design between the two rounds.

Key insights from first round of usability tests

  • Add entry screen needed to be reorganized so meal/snack options weren’t overlooked.
  • Past entry editing function needed to be reworked to operate as users expected.
  • Users needed contextual information on the purpose of the app.

Key insights from second round of usability tests

  • Most users felt the app was intuitive and experienced little friction.
  • The back button wasn’t prototyped as two of the users expected from the past entry screen.

For additional feedback, I also submitted the first high-fidelity prototype to subject matter experts in providing eating disorder treatment, implementing key suggestions in the next iteration.

“Seems pretty straightforward and easy to use.”  K. Bruce

“I thought it was great! It was easy to use and very clear. How will people be discouraged from judging themselves or their chart? Since we know sometimes we will eat beyond fullness or eat when not hungry – how does the app normalize that or would it? People are very good at judging themselves and I know that isn’t the point of the app. Would the app be providing any feedback on how to interpret someone’s experience? What kind of graph should they be aiming for? How do they know if they are becoming more attuned? Is there any guidance on that?” E. Hall

“I thought it was great! It was easy to use and very clear.”

E. Hall

Let’s Get to The Design

Wireframes
Once I defined the MVP, I sketched low-fidelity wireframes, which I used for the Marvel POP prototype used in guerrilla usability testing.

I translated the low-fidelity sketched wireframes into medium-fidelity wireframes in Figma. After the first pass at wireframing, I considered edge cases, then refined the wireframes accordingly. 

Wireflows
I created wireflows to test and refine the interface.

High-fidelity mockups
I started creating high-fidelity mockups with three high-priority screens. From this point on, I rigorously checked the contrast to ensure the application of colors and font sizes were accessible.

I introduced more color and more sophisticated imagery in the next iteration, when I created high-fidelity mockups for the entire app.

Along with the results of round one of usability testing, I received feedback that the iconography needed refinement, the gradient colors appeared dated, the imagery needed more variety, and the dropdown UI needed to be modernized. At this stage, I iterated to implement improvements based on the data from the feedback and usability testing. These are some of the changes I made:

  • Significantly altered the color palette to be more appealing to users and more harmonious, including removing all gradients to modernize the app appearance
  • Added splash screen to explain the purpose of the app
  • Refined icons to a more uniform appearance and size, and refined the method for showing current location in the app via icons
  • Varied the imagery on all of the success screens to offer a more personable experience
  • Updated pronoun dropdown on create account and pronoun change screens to a single field
  • Updated writing prompt dropdown on add entry screen to a picker
  • Increased the negative space on the add entry screen and past entries screen to improve clarity of options
  • Revised calendar navigation on the past entries screen for ease of use
  • Added a target range to the progress chart, with the option to show or hide the target range for users who might not want to see that option, depending on where they are in their journey to intuitive eating
  • Revised the text on the progress chart screen, per the subject matter expert feedback, to better explain the context for the data of the chart and to normalize variance in the data

High-fidelity Prototype
Try the high-fidelity prototype: High-Fidelity Prototype (Figma)

Further Iteration on Visual Design

After reviewing additional design inspiration and reflecting more on the color palette, I iterated on the visual design and updated some of the spacing.

Use of styles and components in previous iterations made the visual updates largely quick and painless. Updates include:

  • Update logo to the primary dark purple color, rather than brown, to make it more monochromatic/modern.
  • Minimize the use of the mint green color to target area on chart. Revise placement of show/hide target range.
  • Update button color to a lighter shade of purple, rather than the mint green, to be more visually harmonized.
  • Change the bottom nav selector color to a coordinating dark purple, rather than the mint green.
  • Revise button placement in sign-up flow to ensure uniformity.
  • Revise spacing on home screen to apply negative space more evenly.
First series of screens with updated UI
Second series of screens with updated UI

Huzzah, Viability!

With the recent publication of books like “The F*** It Diet” and “Anti-Diet,” the body positive movement growing more mainstream, and the high prevalence of eating disorders influenced by dieting behaviors, there’s a market for this product and it could be helpful to a wide-ranging audience.

%d bloggers like this: