End-to-End app to increase knowledge about food sustainability and locality through education and awareness

My Role | Research, UX, UI

“Sustainability” is a vague term for a lot of people. As consumers become more aware of their health and what they choose to put into their bodies they pay more attention to their grocery shopping habits and eating preferences. However, consumers may not know where to go in order to learn how to be more sustainable. A myriad of sources exist but no where is this information concentrated in one app readily available to the user.

How might we help users to learn about sustainability in an all encompassing manner?

01. Researching the Background

Understanding competitors and exactly what they do

I looked at market competitors and found that they all focus on one specific element of sustainability such as in-season produce or sourcing and standards adherence. There also isn't an all encompassing app for produce, meat, seafood, etc. as apps tend to focus on only one food group. Overall, today's consumers typically focus on different concerns for intentional shopping:

  • Locality
  • Sourcing and provenance of food
  • Reduction in plastic packaging
  • Supporting local business
  • Sustainably raised and grown
  • Humane means of slaughter
Understanding user shopping habits

I conducted a survey to gain an understanding of shopping behaviors and whether there was an interest in shopping more sustainably. There was a lot of varied responses of how the participants kept in mind sustainability and I organized these responses into a empathy map to start drawing patterns.

After reviewing both types of research, I was able to draw some key patterns to form a persona that represented my main user:

02. Defining a Structure

How can we create an inclusive and all encompassing food sustainability app? 

After conducting research, it became apparent that the app would need core features that would allow it to help the user:

  • Learn about different grocery items in a more sustainable manner (in-season, plant-based, etc.)
  • Understand sourcing and standards
  • Learn about and search for local vendors selling products nearby

From these core aspects, users can make a decision about buying products that align to their comfort level. Ancillary features of the app include:

  • Learn function to learn more about various facets of sustainability
  • Community function to chat with other users and share tips and other information

03. Designing Upon the Structure

The skeleton of the app

In keeping with Core vs. Ancillary features, I designed the wireframes for the initial UI that would at a minimum have: 

Visual styling and other UI

For the app's colors and style I wanted to convey "warmth" and "nourishment" and concentrated on colors that were reflective of growing produce. I also chose gradients to subtly convey the change that a product goes through. Elements and components were styled with rounded corners.

04. Testing and Final Iteration

Once the high-fidelity designs were completed, I conducted usability testing both in moderated and unmoderated settings with unmoderated utilizing Maze.

Prioritizing the key takeaways
Mapview Had Confusing Design

Icons used a color and icon differentiator when testers were distracted by it and only paid attention to one differentiator.

The legend was present on the map, however testers had trouble finding it.

Lessons Learned & Final UI Design

Building an end-to-end app was challenging as I learned to prioritize the core idea and its related screens. Next steps are to improve the non-prioritized features such as: Community screen and organizing by subject, creating a recipe feature for users to connect back to the items they've just purchased, and building out the initial creation of account and login flow.