Menu App for Percolate

Project Overview

The Percolate Menu App allows customers to browse through menu items with pictures, offer an easier way to place orders and make payments.

Overview of Percolate's Mobile App

The Problem

Percolate is a cafe in Bedok. Currently, Percolate only has a physical menu with no pictures and short description of each menu item. As such, customers have to do their own research before placing an order.

The Goal

The goal of the Percolate Menu App is to make it an all-in-one app that allows customers to browse, make decisions, place orders and make payments easily at the cafe.

1. Understanding the Users

Interviews were conducted with 5 participants aged 20-30 years old, who frequent Percolate.

Prior to the interviews, I assumed that all customers prefer using a menu app to ordering at the counter/via service staff. However, it took me by surprise that 2 out 5 participants prefer the latter.

With the insights gathered from the interviews, I created a persona to represent the users.

Persona - Rebecca

Problem Statement: Rebecca is a full-time student who needs a quicker and easier way to view pictures of menu offerings because she wants to know how they look like before placing her orders.

Persona - Rebecca

User Journey Map

Rebecca is frustrated because there are no pictures of the menu items, and she wants to be able to see the pictures before deciding on what to order.

Rebecca's User Journey Map

2. Design

Paper Wireframes

Paper wireframes are great for quick iterations and exploration of different design ideas.

With the users’ pain points in mind, I came up with 5 different designs for the app’s home page, and picked out the best sections from each to create a new refined version.

Paper Wireframes of Home Page

Digital Wireframes

It was important that the menu app resembled a physical menu therefore I included different menu category buttons that users can click into to view menu items in each category.

I also made sure to include image placeholders for each menu item since it was one of the greatest pain points of users.

Digital Wireframe of Home Page
Digital Wireframe of Drink Item Page

Digital Wireframes

When users click into individual menu items, they get a larger version of the picture of the menu item as well as a description of what it comes with. This allows them to have a better idea of what they will be getting.

Low-fidelity Prototype

After creating all necessary screens, I turned digital wireframes into a lo-fi prototype to get feedback from users on the current user flow.

Low-fidelity Prototype

Usability Study: Findings

These were the main findings that the usability study revealed:

3. Refinements

Based on the feedback from the usability study, I made changes to the prototype.

Feedback After Clicking Add to Cart Button

Users needed to know that their item has been added to cart. Therefore, the original “Item Added” button is now outlined to create contrast. Additionally, the cart icon also has a number on the top right hand corner to indicate the number of items in the cart.

Before and After Usability Testing

Adding Icons to Indicate Vegan-friendly Menu Items

Users needed to know that if a menu item is vegan. They find it a hassle to ask the service staff about it. A leaf icon and an accompanying term is added to menu items that are vegan friendly.

Before and After Usability Testing

4. Design System

Since Percolate already has its brand colours and fonts, I did not come up with a new branding. This is so that the menu app is consistent with its existing branding, and customers can easily recognise the brand. I extracted these from their website and incorporated them into a design system in Figma. 

Design System

5. High-fidelity Prototype

With the feedback from the usability study, I refined the designs and turned it into a hi-fi prototype.

I showed the hi-fi prototype to the participants once again and received positive feedback on it. They can foresee themselves using this mobile app when dining at Percolate. 

High-fidelity Prototype

Takeaways & Next Steps

While designing a menu app for Percolate, I learnt that my ideas do not reflect what each individual thinks. Usability studies are important to gather feedback from actual users to create an app that truly solves a problem.

As this project was done using Figma, I was able to create more advanced components and brush up on my knowledge and skills with the design tool. 

The next thing I would like to do is  incorporate a loyalty program system and a review section to the user flow and design. These were some points mentioned during usability testing, however were not a priority at that point of time.