Healthy Living Within Arm’s Reach

A client project to redesign a mobile app focused on social impact.

Tangelo’s mobile app aims to help people from under-served populations access healthy food. The company’s ultimate goal is to eradicate food insecurity and diet-related illnesses.

Their mantra: food is medicine.

The client found the app to be overly complex, often leading to frustrated users.

Our team aimed to help Tangelo simplify the overall experience as they prepared to onboard thousands of new users through a recent government contract.

The Challenge

Users need a reliable and efficient way to access healthy food, educational resources, and funding so that they can pursue healthier lifestyles and feel in control of their lives.

The Discover Phase

At the start of this project, we aimed to gain insight into:

  • User experiences with Tangelo

  • Perceptions of healthy lifestyles

  • Existing behaviors around nutrition, purchasing food, and cooking

  • Typical phone use

  • Level of involvement in, or importance of community

  • Tangelo leverages a unique, four-pronged approach:

    1. Mobile marketplace and door-to-door delivery

    2. Free educational resources

    3. Access to funding for healthy food

    4. Inclusive community

    The client was initially hesitant to connect us with actual users who represented vulnerable populations. And, because they understood how frustrated users might feel, Tangelo also wanted to protect us to some extent.

    We understood their concerns but emphasized that those reasons were exactly why we needed to interview actual users. We needed to hear directly from them to ensure our designs were truly rooted in the research.

  • The client identified a select pool of users with limited experience with the app. Our team conducted 9 remote user interviews ensuring they were kept anonymous and confidential.

    My primary responsibilities included:

    • Conducting stakeholder interviews

    • Reviewing and editing transcripts

    • Drafting a spreadsheet to organize key insights

  • We combed through 2 different programs on the app and identified potential design opportunities.

    • The meatball menu was limited to account settings and logout;

    • The Explore section was a “catch-all” and felt duplicative;

    • Content was static and felt overloaded in some categories;

    • The Wallet had multiple or separate balances;

    • Transactions only appeared after the first order was made;

    • The Market layout was crowded and included vague descriptions; and

    • The Chat displayed delivery details after the order was submitted.

  • From our research, we couldn’t identify any direct competitors to Tangelo so we addressed this with the client. They confirmed our hunch that the platform was uniquely positioned to address food insecurity.*

    *Note: The client revealed towards the end of the project that Tangelo was approved to accept SNAP EBT cards directly on the app. This meant that, at least for the SNAP program, Tangelo did have more direct competitors such as Walmart and Amazon.

  • Our team further explored (1) the types of content people are interested in to improve health; and (2) the types of data people are willing to share, log, and track.

    We analyzed 3 mobile apps known for successfully empowering users to take positive steps towards improving their health.

    1. Achievement incentivizes positive behaviors through activity

    2. Apple Health allows users to track tailored metrics easily

    3. Headspace helps users change behavior

Opportunities for improvement

Opportunities for improvement

Comparative Analysis

Comparative Analysis

The Define Phase

Before conducting user research, we went into the project thinking we would focus most of our efforts on the Market. However, our research significantly shifted the scope of our project to focus on effectively communicating Tangelo’s mission.

Surprisingly, many users hadn’t opened the Tangelo app since they initially downloaded it because they didn’t know what to do with it. They had no idea Tangelo offered anything more than a free, one-time order fulfillment.

So, while we would have loved to redesign the Market and build out all the features the client wanted, we realized that the product would not be useful if no one knew what it does and what capabilities they have within it.

  • From our final 18 groupings, we selected 5 main user statements to focus on:

    1. I don’t have the means to live a healthy lifestyle.

    2. I rely on support from others to meet my basic needs.

    3. I feel responsible for everyone in my household.

    4. I can’t prioritize causes outside of my immediate needs.

    5. I discovered Tangelo through my social network but didn’t know how it could help me get continued access to food.

  • Then, we distilled the insights into our proto-persona, Jordan.

    Summary: Jordan is a mother who wants to improve her family’s health but has limited access to resources. She often finds herself up against various barriers that make her feel powerless and unable to change her circumstances.

    • Limited budget, stretches her dollar more than she is comfortable doing

    • Affordable grocery stores are further away, tend to run out of healthy food

    • Closer grocery stores mark up prices on healthy food

    • Interested in community involvement but priority is meeting family’s basic needs

    To assist, the app needs to provide easy access to healthy food and clearly communicate how Jordan can leverage the funding opportunities, education, and community to improve her family’s quality of life.

    Tangelo should reassure Jordan so she feels empowered to continue building healthy habits and confident that her family’s needs will be met.

  • Although we created 7 total user flows, we limited our MVP our scope to just the following:

    • Sign Up

    • App Orientation

    • Education

    While we wanted to work on the Market, the current state would suffice for this iteration. From our user research, we felt it was more important to:

    1. Trim down the sign-up process

    2. Integrate a simple yet informative orientation

    3. Develop an Education section that can be scaled

    Hopefully, with these changes, Tangelo would see an increase in user engagement, orders placed, and people living healthier lifestyles. My focus for the design phase was the Education flow (shown below).

The Design Phase

We recognized this was an immensely complex challenge with a real-world impact on people’s lives so we wanted to ensure we got the foundation right. We took extra care in addressing the users’ needs while balancing the client’s goals.

In addition to the significant uptick in food insecurity due to COVID-19, it was not lost on us that Tangelo’s primary audience includes vulnerable populations. As we could potentially handle sensitive health information, the client’s top priority was to gain user trust. We had many in-depth conversations with the client about ethics and security around personally identifiable information (PII).

We believed that building trust with the users should be rooted in transparency and effective communication throughout the Tangelo ecosystem.

  • I led the examination of the current IA and the redesign mapping which included:

    • Changing Explore to Home with a focus on personalized content

    • Creating a separate Education section to house all relevant content

    • Switching to a hamburger Menu and adding Notifications

    We wanted to ensure that anyone logged onto the app could immediately understand what to do on the platform and begin accessing healthy foods and additional resources.

    Changes to navigational elements were also made to better scale for future iterations.

    • Transitioning to a hamburger menu to nest additional features in the future (e.g., account information, order history, and favorites)

    • Adding a Notification Center to house various user activity (e.g., new program opportunities, funding updates, and other calls to action)

    • Replacing a bare Wallet section with a more robust Education section

  • Our team created some initial sketches and aligned on a direction before diving into wireframing.

    My focus was to restructure the Homepage (formerly the Explore page). Some preliminary ideas included:

    1. Add a more personal touch to the UI

    2. Include more descriptive cards for featured content

    3. Integrate various features into the top navigation

    4. Limit categories to 3 cards each

    5. Move Wallet feature to Home

    6. Explore different icons for the Market

  • Once initial sketches were approved, we moved into Figma and started building our design system.

    The client preferred quick iterations so we had daily stand-ups for feedback. I went through 17 iterations of the Home redesign based on feedback from my teammates, the client, and usability tests which included:

    1. Removing the wallet CTA as it elicited negative responses from users who felt it was a reminder they didn’t have financial means

    2. Limiting categories to the 3 cards

    3. Creating space, allowing designs to breathe

    4. Including more relevant copy

    5. Adding visual elements to make content more dynamic

    6. Reworking designs to call out SNAP integration, per client request

  • In addition to the Home redesign, I also focused on building out the Education section of the app. We integrated two ways to access educational resources as it was a key priority for both the users and stakeholders.

    1. Created a section on the Home page to feature top educational resources

    2. Added a dedicated Education section in the bottom navigation for casual browsing

    Eventually, the client aimed to scale up this section to include content that is both educational and could allow users to earn supplemental funding for healthy food within the app. Having various ways to access this content will get users additional funding and food faster.

    Education was a critical piece of Tangelo’s mission and priority for users. The app has some educational resources, such as recipes, but users noted the experience was confusing and it was difficult to find relevant content within the Explore page.

  • We conducted 5 total usability tests over 2 rounds. All tests were moderated remotely due to geographic diversity of participants, as well as to comply with social distancing guidance.

    Tasks To Complete:

    1. Create an account

    2. Complete orientation

    3. Find a recipe

    4. Join the #LetsFeedLA program

Initial sketches

Initial sketches

Dashboard redesign

Dashboard redesign

Education feature development

Education feature development

Usability testing prototype revisions

Usability testing prototype revisions

Adjusting the prototype to gain more meaningful insights from usability testing.

We made some tweaks in between rounds after observing some commonalities:

  1. Users moved quickly through the sign-up flow without reading the content

  2. Instinctual reactions were to close out of orientation tooltips

  3. Layouts felt crowded and very text-heavy

We saw some improvement in our testing metrics after incorporating feedback from the client and the first round of testing.

  • Time spent to complete tasks significantly decreased

  • Overall completion rate increased

  • Average number of errors decreased

Key Findings

  • All participants signed up with ease but felt there was still too much text

  • Onboarding was somewhat easy across the board though one participant clicked out of the flow completely

  • Finding a recipe produced the most errors as participants tended to navigate to Market instead of Education

  • All participants successfully joined the #LetsFeedLA program with 0 errors and little difficulty

Recommendations

  • Reduce/clarify text and integrate visuals

  • Make possible actions learnable without tooltips

  • Conduct card sorting or other testing to determine the need for different labeling and organization

  • Develop different versions of earning opportunities or programs that can easily scale as the userbase grows

Task completion (0-2 scale): 0 = Incomplete, 1 = significant difficulty, prompting or workaround, 2 = Completed with ease

The Deliver Phase

Our low-fidelity prototype accomplished the following:

  • Consolidated the sign-up flow to allow users to create an account more easily;

  • Integrated an orientation flow to educate new users on how they can use the app;

  • Restructured the IA to facilitate a more streamlined and cohesive user experience;

  • Redesigned the Home page and build the Education section to prioritize helpful content; and

  • Added an activity modal to notify users of new earning opportunities they could opt in to.

We received positive feedback from the client and other stakeholders who appreciated our storytelling, design work, and overall thoughtful approach to the project.

At the project’s conclusion, I packaged our final deliverables and managed the hand-off to the client.

“I could really feel your heart in it. There are talented people everywhere but your heart and soul are what will take you to these beautiful moments in life. You did great work —I’m really, really, really proud.”
— Jeremy Cooley, Tangelo CEO

The End Result

Our team redesigned the Tangelo mobile app to shift to a direct-to-consumer model, decrease user confusion, and empower users through healthy food, education, and financial support.

Project Retrospective

Future Improvements:

  • Conduct competitor analysis on Walmart and Amazon;

  • Interview users with more experience using the app;

  • Test the navigational labels and content organization;

  • Build out the Wallet and redesign the Market;

  • Create and optimize the Menu and Notifications pages;

  • Include ‘Right to delete’ information in account settings;

  • Scale up Education to include webinars, videos, and SNAP-Ed content; and

  • Progress to mid- and high-fidelity including UI elements and final copy.

Key Takeaways:

  • Clear and consistent communication is important!

  • Have a plan but be flexible, especially in engaging clients with busy schedules and limited availability.

  • Keep asking questions —you don’t know what you don’t know, so keep digging further!

  • Always, always, always advocate for the users.

  • Make edits on a separate Figma page and not directly in the working prototype.

  • Use comments in Figma to ask clarifying questions and track edits.