Grocery Buddy!

Designing an app to help people keep track of their groceries

Product website for iTaps
Here are more details about the project that I did:

Project Type

A school project that I did in General Assembly


4 weeks total


Solo project; 

UX Researcher

UI Designer

Tools Used


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:

  1. Do the users plan the amount of groceries that they purchase whenever they go grocery shopping?
  2. 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.

And meet Jane, my persona!

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.”


“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: 

Initial Task Flow
The initial task flow of Grocery Buddies

I also quickly did a wireframe in Figma:

1st iteration wireframe
1st Iteration Wireframe

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.

Home screen comparison
1st iteration screen on the left, 2nd iteration screen on the right

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.

Refined Task Flow
The refined task flow of Grocery Buddies

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.

2nd Wireframe
2nd Iteration Wireframe

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: 

Colour usage
Colours used 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:

Font usage
Font usage

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:

Icon usage
Icon usage

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. 


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

Next steps:

1. Usability testing the latest iteration of Grocery Buddies


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.

Take a look at my other projects here!

Redesign for e27’s mobile site

A redesign of the popular tech news website e27, making it easier for people to read the latest tech news on the go

View Project
Product website for iTaps

Designing a product website for iTaps, a HR Management Software

View Project