top of page
MacBook Air - 2.png

Fooder

Role: Concept, Research, Branding, Visuals, Prototypes, Testing, Mockups

Duration: Jan - Feb 2023

The product
Food sustainability app and responsive website (mobile, desktop and tablet) that helps people to reduce food waste.

The method

Bottom up design

The problem

In the UK is estimated that almost a third of what people buys ends up in the bin. 

The goal

The aim is to educate to a more sustainable lifestyle, that can help reduce food waste in the landfill and help people save money.

Target audience

Name: Alice

Age: 20

Occupation: Student

Alice is a student who needs tips and quick and easy recipes with the food that she has because she wants to avoid wasting food and money.

Image by amir riazipour

Name: Jason

Age: 34

Occupation: Nurse

Jason is a father and busy nurse who needs an easy way to plan meals and get new recipes without wasting food because he’s very conscious and wants to teach his kids to lead a sustainable life.

Fooder graph.png

Competitor audit
Two direct competitors and one indirect. All of them help people not waste food, but each one in a different way. 

Ideation phase 

The ideation phase helped to break the ice to ideas of features later considered in the wireframe.

Screenshot 2023-03-15 alle 09.53.53.png

Information architecture (web)
The website has less features: profile page, favourites, recipe search and blog.

Flow 1_720p-12fps_wireframe.gif

Low fidelity prototypes

The main focus was to create a flow that connects the majority of the features, starting with the main one, the recipe search, but also connecting it to the Food supply page and the Shopping list.

Usability study

Usability study parameters.png

Findings
The study highlighted some issues with navigation, but also new opportunities for some of the features.

Fooder research .png

High fidelity prototypes

The prototype solved some issues from a second round of user testing. Better usability overall and more gamification.

ezgif.com-optimize_low.gif
Screenshot 2023-03-15 alle 15.32.53.png

Responsive websites

The design approach was bottom up, from the app to the mobile web version, then the ipad and the desktop version.

Screenshot 2023-03-15 alle 15.35.02.png
Screenshot 2023-03-15 alle 12.39.21.png

Challenge 1

Designing an app with a lot of functionalities and interconnecting them was not a easy task.

 

Information architecture and user testing helped a lot in the process to solve some of the issues.

Challenge 3

I got stuck when trying to adapt the app to the website.

 

Something that helped was sketching and rethinking the website as a new and empty page, where I could add one piece at the time.

Challenge 2 

There has been a redesign at some point, some of the elements were completely redesigned and the overall look has changed drastically from the first version.

 

The use of components and the tidyness of the artboard has been essential. Throughout the process, and I've discovered tools to make things quicker!

Maybe next time I'll think of the design thoroughly before versioning!

Style guide

Style guide.png

"I love how it shows the data
of the food I saved. It gives me a positive experience, making it easy to cook new recipes
and save food!"

Key learnings

  • Be ready to expand features and functionalities based on feedbacks, but always keeping in mind to make it as simple as possible to use.

  • Always be tidy and plan well, it will save time in future versions.

Next steps

  • Develop PRO feature and set up payment

  • Translate in more languages

bottom of page