Afoodible

Fridge in your pocket. A one-stop easy recipe generator and food waste management system.

Afoodible was designed to help to reduce the amount of food waste that we generate at home. Afoodible allows users to track the expiration date and quantity of food in their fridge. It also allows you to generate delicious recipes based on the ingredients you have, allowing you to then create shopping lists based solely around what you need. In other words, this green app allows users to save money while addressing sustainability efforts to benefit the planet. The app is ideal for people who share their fridge, eg. Universities, house shares, etc. because it allows them to manage their food as a group with the unique ability to categorise items for common or personal use.

Company

Afoodible

Project Duration

1 Month

Team Members

Andres Arigon - UX/UI Designer, Gaven Henry - Product Owner, Peter Baier - Developer and Simone Pachera - Developer

Problem

Today, it is a sad fact that we waste a lot of the food we buy due to badly managed refrigerators. This can be hugely detrimental to our environment. In an increasingly busy world, people have less time to spend on themselves, the little they have, they don’t want to squander with such boring tasks as organising the fridge. Today, while there are a multitude of tools available for creating shopping lists, no-one has yet developed a smart fridge up to the task, so this is the product Afoodible has to offer.

Goals

Project Target

New fundraising
Be the reference app of the sector
Expand beyond the UK

Design Target

Create a modern and striking app in record time
Avoid all possible user frustrations
Meet customer user requirements

Designing having to use a framework in mind

Challenge

On this project I worked autonomously as part of a team split across 2 countries, with the product owner based in Singapore. This meant we needed to be ready for any challenges regarding time difference and communication. The product owner expressed a wish for a simple and easy to understand design, with a very strict deadline of a fully tested and ready for developers app to be ready in one week. This tight timeframe meant I had to adapt my typical design process and do a lot of research to understand the updates required.

My Process

In order to understand the project more fully, I did some research about machine learning and food management apps, this also helped me formulate my first UX/UI suggestion to incorporate with Afoodible. I created visual mood boards for inspiration and sketched quick user flows using two defined personas to put me in the users shoes. I also created a storyboard and wireframes so that I could define the new user experience using feedback received on version 1 - This gave me a better understanding of the entire projects operation, its features and goals. It also helped me to avoid possible user frustrations.

Moving forward I created high fidelity mock-ups, using my own sketches which the developers used as a rough guide to begin the coding process. I also rebranded the app to give it a more modern and appealing interface for the user and to shake up the competition! At this stage we began testing, both internal and externally with a quick prototype created using Adobe XD.

Personas

In order to better understand this project I have created these two personas Alice and Tom who followed me throughout the whole project, helping me to make informed decisions and to better understand this project from their point of view and to create the best user experience possible for the potential customer.

Alice Bray, 35 years old, London
single mum, 2 kids

Works all day and doesn’t have a lot of time to cook anything.
Mostly she prepares pre-made food however, she wants to make changes in her families life habits.
Small supermarket shopping every weekend.
She knows she has food in the freezer but she doesn’t know what she has.
She throws 30% of purchased food into the bin.
Low food management control.
1 kid has lactose intolerance.

Tom Cooper, 20 years old, London
Student, shares flat with 5 students

Low cooking skills.
Pre-made and take away food.
Shared fridge, he has a shelf.
A lot of expired food inside the fridge.
They throw 60% of purchased food away.
Low food best-day-to-use management.
Sometimes he makes food for himself and another housemate.
He goes to the supermarket when he sees his shelf is empty.

Point of view

To enable my design process and brainstorm possible ways of creating the app, I decided to use quick UX methodology to better understand the possible user’s needs and goals, what they want to achieve by using this app and define the problem statement, which allowed me to ideate in a goal-oriented manner.

~ Alice Bray

“I’d love to have recipe suggestions (lactose free) every day before dinner time to prepare a fresh meal using the items in my fridge which are about to spoil because I don’t have the time or imagination to think what to cook when I get home after a long day of work and I always finish cooking something from the freezer, not fresh”

~ Tom Cooper

" I’d like to see all the food which my flatmates allow me to use because sometimes I would like to cook something quick but I don’t have one of the items, they may have it their fridge and I am not sure if I am allowed to use it or not because we have different schedules"

Competitive Analysis

Before thinking in depth about the design, but with an idea in my head of possible approaches, I researched similar apps and feedback on them to see what they offer and how they presented it. This helped me to define my user flows and avoid current pain points from other offerings.

FitMenCook

Ads after taps, ads across the UI, ads between the recipe indications.
A large list of healthy recipes in the same app
It is possible to create a customized shopping list from the recipe.

Side Chef

Voice assistant, which allows you to keep cooking without paying attention to the screen.
Screen remains on when you are cooking.
The information architecture of this app looks solid, clear and organized. It makes the user journey very easy and natural to follow.

AllRecipes

Strong community and large variations of recipes.
Video Tutorial.
It would be nice to see all the nutritional information on the same page

UX Audit

One year ago before the client had the funds to officially start developing this product. I have designed some concepts after our Product Discovery workshop in order to validate our first assumptions and hypothesis. Also, visualise some first ideas.

After one year, when the client finally raised enough funds to start working on this project, I have re-analysed it in detail to helped me to refresh this projec but also to create new ideas, hypotheses and assumptions.

Visual Research

These are some of the visual elements that I used as a reference for inspiration in the UI design of the app.

Mood Board: Nez app

The clean UI of this app served as a guideline for the creation of my UI and later guideline.

Mood Board: UI food app

Which served as a reference to understand what users were accustomed to find on this type of app, colors, architectural information, iconography, so on.

Mood Board: Fridges pictures

Although it sounds weird, it was very useful as a reference to understand the star element behind this app.

Storyboard

In order to make the product better, I put myself in a typical user’s world to understand how this app could make their lives better. This helps me to visually predict and explore a user’s experience with the app and understand possible user flows, including interactions that are not visible and possible pain points.

Storyboard: Alice Bray, 35 years old, London, single mum, 2 kids

The clean UI of this app served as a guideline for the creation of my UI and later guideline.

User Flows

A UX/UI Designer needs at least a simple user flow as a reference to start developing a project to understand the possible movements of the user. In the limited time I had, this basic user-flow served as a map to navigate in the development of this app.

User Flow: General flow

Overview of the user flow with all the main options and possible user destinations.

User Flow: Specify flow

As a user "I would like to add an item by the scanner bar option after login for the first time on this app. I already have an account".

User Flows: Pen and paper versions

Previous user flow before being digitised.

Wireframes

As is known, a UX / UI Designer needs at least a simple user flow as a reference to start developing a project and at the same time to understand the possible movements of the user. This is not the most detailed user flow I have created but for the limited time I had, it served as a map to navigate in the development and user understanding of this app.

Wireframes: Receipe Generation

Trying to understand all the possible Recipe Generation, micro-interactions possible and its user flow in detail.

Guideline

Apart from the creation of the new UI and UX, I updated the original branding, adapting it to make it more current and optimise the time of the developers regarding basic design elements.

Colour Palette

Main palette used throughout the app.

Logo

Re-vamp of the original logo. Making it look more modern.

Icons

These are the icons used and their different variables.

Typography

The typography used with its different dimensions.

Final Thoughts

This was a challenging project for all the team members. We started the project, following the first version which then had features added and removed, some complex and in need of a better understanding of the logic behind them before we could move forward. Combine this with a team split across different countries with opposing time zones and we had a real challenge on our hands. After a great effort, a few nights of lost sleep however, we achieved the deadline and delivered a quality product to our client, who was very happy with the application. The final result exceeded the expectations of the client and it is working very well on Apple and Google store. The first users have been giving very positive feedback and so, the future for the product is bright.

My personal conclusion from the Afoodible project is that there is no challenge that cannot be overcome with a good team and mutual support.

Afoodible

Problem