Designing an app to help people keep track of their groceries
Project Type
A school project that I did in General Assembly
Timeline
4 weeks total
.png)
Role
Solo project;
UX Researcher
UI Designer
Tools Used
Figma
Axure
Who is it for
Housewives and busy Singaporeans who buy groceries and prepare their meals at home.
What does it do
Grocery Buddy is like a reminder app that helps people remember that they might have something in their fridge that might need to be used up soon.
The Process
Empathizing with my User
For this project, I teamed up with a classmate and she shared what she would like to design. She had a problem with food wastage because she would forget that she even had that item in her fridge. She would also have too much food that she ended up giving away to other people.
Conducting research
I was honestly quite excited to start working on this project. Food wastage was (and still is) one of the issues that I'm passionate about. Since this was my first time doing a project in UX, I was very excited to see what I could create. I wanted to find out about whether this problem was just as common among my other classmates. I interviewed a total of 8 people with the main research goals of:
- Do the users plan the amount of groceries that they purchase whenever they go grocery shopping?
- What happens to the users’ leftover groceries (if any)
What I did with the responses
From the interview, I synthesized what I learnt from my participants through Affinity Mapping.
She is the result of all the people that I had interviewed and gathered insights from. I used her to keep my sights and goals aligned throughout the project of designing this product.
To design a better product for Jane, I came up with a problem statement and hypothesis:
Problem Statement
“Jane needs a way to keep track of her groceries so that she doesn’t forget about what she has in her fridge.”
Hypothesis
“I believe that by designing an app for Jane to manage her groceries, she would be able to stop forgetting about what she has."
First iteration:
When I first started designing the app, I came up with task flows that would help me create the core functions of the app:
I also quickly did a wireframe in Figma:
For the first test, I conducted it with 4 people and noted all their feedback about what they had to say about Grocery Buddies. With their feedback in mind, I started making the needed improvements on the app.
Second iteration:
My first order of business was really to start defining what the different placeholders on the homepage of the app was because people were quite confused about what they all meant. They also mentioned that there were the exact same directions that the app could take them on the footer of the homepage as well.
Since I changed the layout of the app, I also had to make minor changes to the task flow so that the app would also make a little more sense to be used.
Since the original project scope didn’t require the app to be hi-fi, I just made the changes that I needed to make in Figma.
I also conducted a usability test on this iteration. This test did better than my first iteration and I knew that people liked the dashboard where they can see the items that are currently expiring. However, what they did not really think was too necessary was the part of the app that showed them their most purchased item of the week. On top of that, the phrasing for the reminders field was not very relatable to them as well.
Third iteration
After letting the project sit for about 2 months, I went back to this project. As I had never done the UI for it, I decided to put what I had learnt into practice. Inspired by the 2014 Material Design color palettes, I chose these colours to use in Grocery Buddies:
I also wanted to experiment with gradients for the design of my app, hence the extras of the original colours.
As for my fonts, I decided to go with the choice of all lato, because I wanted the app to look clean and easy to use. You can look at the different types of font usage below:
For my icons, I went with simple ones without any fill in them. The icons that are selected will have the yellow gradient lines to let users see that they have been selected. You can see the icons and their different activated vs non-activated states below:
Latest Version
The latest iteration was done on Axure. Feel free to try it out by clicking here to open the prototype in a new tab.
Solution
Quick Addition of Items
Whenever users come back from the supermarket, they can launch the app to add in the items that they had bought
Easy Item Updates
Whenever users use an item, they can update the amount through the app
User-Generated Categories
Users are able to find the list of items that they have input into the app
Advanced Warning of when Items Expire
Users can see at a glance the items that are about to expire in their fridge
Reflections
UX is seriously fun. As this was my very first UX project, there were a lot of things for me to discover and experiment with. I thoroughly enjoyed the whole Design Thinking process I could do, and I loved creating something new and seeing what other people felt about it.
It was fun to be able to go back to the project after being away for many months to try and see what I could do with it again. I enjoy experimenting with different things in my work and I hope that this project will still be able to get iterated and developed more as I mature in my skills as a UX Designer.
