hero image

duration

9 weeks

team

Solo Project

tools

Adobe XD, 
Indigo.Design

my role

UX/UI design

the problem/s

We were given a list of problems to pick one and develop a solution for it. I choose:

I am regularly throwing away a lot of food, because I tend to buy food and forget about it being in my fridge to only notice that once it has expired.

Through interviews with target users I figured a few common frustrations users had, that could be also stated as problems:

I often don't know what to buy in the store, because I either forgot my shopping list or didn't write one.


I want to learn new recipes, but finding ones tailored to my prefernces and/or products is taking too much time.

design process

research

interviews & surveys
user personas
stories & scenarios
user journeys

ideation

user flows
information structure
storyboards

prototyping

paper prototype
digital protoype

UI design

Sketches
Design System
App Icon
UI & interactions

interviews & surveys

I made an online questionnaire, with 56 participants to determine who are my target users and define their needs and expectations. Here's the data summary:

questionairre data

Next I conducted 3 interviews with target users trying to inspect their habits, frustrations & pain points and goals about food consumption.
I discovered the participants used the same pattern, then listed their main and secondary frustrations and how they think they can handle them:

pattern

user personas

Using questionnaire and interviews data I created two opposite personas:
- the receptive & openminded;
- the resistant.

Alfred Colby persona Brie Cale persona

stories & scenarios

Alfred:
Nutrition &
Food handling


stories:

1. As an active young person I want to be able to keep track of my nutrition intake in order to develop healthy eating habits.

2. As a student on a budget, I want to be able to know what products I have at home and how to prepare them, so I lower my food expenses.

scenarios:

1. Alfred believes that eating right can rise his energy and concentration levels. He is struggling to find healthy recipes, and/or nutrition info. He would like to be provided with suggestions of meals fitting his diet and the ability to track nutrition intake.

2. Alfred is over shopping. At the store it seems like a good purchase, but then he finds out he had these products at home or they don’t match his diet. In result he has to throw away food or outstep his diet.
He's frustrated with how much this is increasing his expenses. He wants to always know what products he has at home and be somehow reminded of expiring ones.

Brie:
communication
& Recipes


stories:

1. As a busy woman I want to be able to make and send shopping lists on the go, fast and easy, so I can save time.

2. As a mother I want to be able to quickly find recipes suitable for my children so they develop heathy eating habits.

stories:

1. Brie is a busy person. She manages her time well, but at the office it's never enough, so every once in a while she doesn't have time to tell her husband what to buy at the grocery store. She is too tired to shop after work, so they just order pizza for dinner more often than she likes to. Brie needs faster way to send shopping lists to her husband.

2. Brie has always been careful of what children are eating. Every morning she prepares breakfast and lunch for them to take at school. She finds it more and more difficult to think of new different meals. She is looking for a fast way to find suitable recipes for her kids.

user journeys

For each persona, resolving all the problems stated above:

Alfred's journey Brie's journey

user flows

I use these flows as a guide when designing the sitemap & information structure. They were also the base on which i drew the paper prototype.

user flows
user flows

information structure

information structure

storyboards

negative storyboard
positive storyboard

paper prototype

First testing I made with the paper prototype while I did the interactions.
The goal here was to validate app functionalities, check elements recognizability and gather feedback.

paper prototype feedback

key findings:

Users who saw the tutorial managed to explain all the functionalities to new users.
Users who skipped the tutorial, had to be pushed to explore some of the functions.
Users engaged most with the recipes tab, exploring functionalities from there.

users wished:

more photos of the dish

position timer below recipe preparation steps
ability to track food waste

a way to import diet plan
BMI calculator

labels on some icons

digital prototype

Digital testing I made using Indigo.Design platform. It allows you to create tasks and set expected success path, without restraining users from completing the task in other way. It also shows unexpected interaction allowing you to see what users find more intuitive. Below are my task results & feedback:

Task 1:

Open pasta carbonara recipe, find the timer and start it.

task one data

feedback:

- timer is not immediately visible;
- Make the whole row clickable/touchable;

conclusions:

The whole recipe component should be clickable. Navigation is clear.

Task 2:

Add the pasta carbonara recipe to saved.

task two data

feedback:

- I am testing through phone and some elements are hard to tap;

conclusions:

Interaction icons need more white space and bigger tappable field.

sketches

app sketches

design system

The final step, before starting to build the UI is to develop a consistent component library. I use Brad Frost's atomic design methodology and like to add some CSS properties where I feel it's needed, to ease the development process.

typography

App icon

app icon

UI & interactions

more screens

login screen login screen login screen login screen login screen
back to top