I’m interested to know how design can convince people to give up foods that are bad for climate change, so I designed this app.

Interviews

I did background reading, carried out interviews, and used affinity mapping to learn about people's:

The two types of shopper

My research identified two main types of shopper:

I decided to focus on the first group as it’d be more difficult to make changes to someone’s shopping habits if they use a supermarket’s website.

Where would a mobile app help?

Based on my research and to help me ideate I broke down the shopping journey into four parts:

I wrote down ideas about how I might convince someone to give up certain foods at each step of this journey.

I decided to focus on the first two steps, before the shopper has made a purchase, because encouraging them to make better choices is more positive than criticising them for their past decisions.

A fancy shopping list

I decided to design an app to act as a person's shopping list. Every person I spoke to uses a simple shopping list of some kind.

These ideas evolved throughout the design process, but generally I settled on these features:

How do I know this will help?

I believe that telling people about the climate impact of foods as they write their shopping list will convince them to buy lower-impact foods.

Unfortunately I couldn't easily test this hypothesis, but here is how I'd do it.

High level app design

I wrote out the screens or views that an app would need to support the features above. Having these on paper helped me to chop, change, re-arrange, and come up with new ideas for them. What you see below is the "final" list I came up with.

I also created this basic app architecture and user flow diagram to understand how each area of the app fits together:

An early casualty

One idea I abandoned early in the design process was the "recipe web view". This would allow people to browse the web for recipes and highlight problem foods inside that web view. Lots of people I spoke to used a recipe they wanted to make as a shopping list. Unfortunately it doesn't seem like this is possible using Apple's web view component. Luckily users would still be able to copy and paste recipes into the shopping list screen.

How will the screens work?

I blocked out the main screens of the app to think about how it could take shape. Here's an example showing the list screen.

Just enough visual design to test

Once I had wireframes that covered all of the features I wanted to include, I created some early mockups to think about type, colour, spacing, and other broad visual style elements. These would also let me carry out usability testing. Note that like all screens in this case study I went through lots of iteration to arrive at the result you see.

There were a few usability issues

Two rounds of usability testing uncovered lots of issues. One example is the “KG C02e” measurement. While this is a standard measurement for climate impact, no-one understood it so I switched it for a simpler traffic light rating to show impact.

Making it look better and saving time with components

Next I focused on the more fine-grained decisions around visual design. Here's an example showing the suggested foods modal.

I used components in Figma to help with this process, which meant that each change I made was immediately reflected across the mockups.

One challenge I ran into with the visual design was the “Suggested foods” modal. Here's a GIF that shows the many options I tried before I settled on what I currently have. At this point I can't see the forest for the trees so I decided it was good enough.

Want to try?

I also created an interactive prototype with Figma, which is embedded below if you want to click through the app.

Some more visual design practice

Finally for more visual design practice I designed three alternative landing pages for the app.

I didn't build it

I stopped the project here. I don't plan to build and release the app, but if I did these are the next steps I'd like to take: