Kopi Cafe

1. Summary

This app was created to attract and retain customers who visit Kopi Cafe. The relevant competitors offered dedicated mobile apps for their customers to create orders and make payments, and they have been very successful.

Kopi Café app is designed to function as an app which provides customers with a menu and also an ordering and payment mechanism. Customers with food allergies would be able to, through the app, notify the kitchen of the necessary modifications through a note function included in the app. This app is intended to speed up the ordering process, bringing time-savings to both customers and the café alike.

Kopi Cafe app was therefore created to allow the café to better compete in the market, improve sales, and increase customer satisfaction.

*Note: This project is based on a fictional brand.

Getting Started

Project Duration: 2 Months

Challenge

In Singapore, most café menus do not list down common food allergens which may be found in the products offered. Customers with food allergies would not be aware of such allergens that may be found in the food they are ordering, and even if they may be aware of it, they may not necessarily know if they could make the necessary modifications in this regard.

Goal

Kopi Café App is intended to allow its users to customise their food orders by adding a note to it.

Role and Responsibility

This is a personal project. My roles include project management, UX research, analysis, strategy, ideation, prototyping and testing.

Methodology

Interviews, competitive analysis, systems mapping, user journey mapping, wireframing, prototyping, and usability testing.

2. Understanding the User 

User Research

We conducted interviews with trial users and observed their interactions with the app. We assumed that users would order the items through the app instead of in-person payments. After conducting the interviews, we realised that users who have food allergies would prefer to make modifications to their meals during ordering. Further, users preferred a fuss-free approach to ordering and making their payments.

Market Research

Most foods and beverages outlets have a dedicated app for food ordering and payment purposes. The three main competitors which I have identified were Tiong Bahru Bakery, KFC and Genki Sushi. They all have a menu, ordering and payment function included in their respective apps. All three apps have outstanding features, straightforward user flow and strong brand identity.

Personas

Luna Rey

Luna Rey is a busy working adult, who would prefer placing her orders efficiently with ease, because she would like to maximise quality time with her friends during meet-ups.

Mika Kai

Mika Kai is allergic to peanuts and would like to enjoy his meal allergen-free.

User Pain Points

1.    Service crews cannot remember the orders.

2.    The menu does not highlight the chef's recommendations.

3.    Users with food allergens are not able to customise their orders.

4.    Users want to order and make payments efficiently with ease.

User Journey Maps

Luna’s user journey map revealed that users would prefer accessing a dedicated all-in-one café app that allows them to view the menu, order and make payments.

Mika’s user journey map revealed that users would prefer having access to a dedicated café app that allows them to include a note on their dietary restrictions in their orders.

What is the market’s need?

Both personas would need a fuss-free ordering system.

Based on our research, we were able to establish a common theme between them which is a fuss-free ordering system. It can be achieved through multiple methods, and the main focus is a note feature. The note feature would allow users with dietary restrictions to state their preferences. The overarching focus in the ideation and design phase would be the theme of a fuss-free ordering system.

3. Starting the Design

Paper Wireframes

Through understanding the users’ needs, I worked on designing Kopi Cafe's screens by sketching the wireframes.

I started to brainstorm and drafted the iterations of each screen of the app on paper to ensure that the elements made to digital wireframes would be well-suited to address user pain points.

Digital Wireframes

Now that I had sketched out my ideas, I wanted to test the designs that I made and ensure that the structure and flow of the app is intuitive for the users. The next step was therefore to create the digital wireframes.

Low-fidelity Prototypes

I then worked on a low-fidelity prototype, with limited functionality, using Figma. The low-fidelity prototype connected the primary user flow of ordering, customising by including a note, and proceeding to make payment.

Usability Studies

For usability testing, I conducted remote, moderated Think Aloud testing over Zoom. The users were asked to share what they were doing, thinking, and feeling while interacting with the prototype and trying to complete the tasks given to them. The aim of the usability study is to test the ease of use of the note function. Users were requested to log in to the app, customise a meal and complete the order.

Overview

Participants: 5 guests

·         Participants are customers who dine in at cafes at least twice a month, regardless of whether it is in a business or social setting.

·         3 participants with food allergies and 2 participants without food allergies

Age range: 25 – 40 years old

Method: Remote, moderated usability testing (Think Aloud)

Research Questions

·         Were users able to successfully order and customise a meal that they want?

·         What can we learn from the steps a user took to order food and drinks?

·         Are there any parts of the process where users were getting stuck?

·         How long did it take for a person to create a customised order?

Affinity Map

To synthesise my findings from the testing process, I took notes and created an affinity map. This helped me to have a better understanding of the different patterns observed so that I could prioritise the areas where revisions would need to be implemented.

Patterns Identification

It was observed that 3 out of 5 participants preferred using the app without creating a profile. This meant that it was useful for a minority of the users to create a profile.

It was observed that 3 out of 5 participants wanted to select the quantity of the same food item before adding it to the cart. This meant that it was useful for a majority of the users to select the quantity for each food item.

It was observed that 5 out of 5 participants faced difficulties adding a note. This meant that it was not immediately clear to all users on how to create a note.

It was observed that 4 out of 5 participants were unsure whether the system had successfully captured their added notes in the system. This meant that the users were unable to find their notes.

Pain Points

The following are the 3 pain points that we identified:

1.    An easier way for users to customise their meals

·         Users need better cues on how to create a note.

·         Users need a more intuitive way to access their notes.

2.    To order quickly

·         Users need to be able to set the quantity of each food item.

3.    An easier way to log in to the app

·         Users need another sign-in option.

Recommendations

We recommend taking the following actions:

1.    Add cues on the item page so that users would know how to add a note

2.    Add the note for each item in the order summary and order history page

3.    Add a plus/minus button on the item page so that users can set the quantity of the food item they wish to order.

4.    Add a guest sign-in option for users who do not wish to create a profile.

4. Refining the design

High-fidelity prototype

Working on my revised low-fidelity wireframes, I created a high-fidelity prototype. The final high-fidelity prototype presented cleaner user flows for ordering and checkout. It also met user needs for customising their meals.

Kopi Cafe App

Features

The Kopi Café app features the following key functions:

Accessibility Considerations

Icons were used to make navigation easier. I included images of the food so that users can have a clear visualisation of each food item.

5. Reflections

While designing the Kopi Café’s app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Takeaways

The app allow users to feel like Kopi Café is customer-centric in meeting their needs. The following is a quote from one of the users: "The app made it so easy to customise my meal!”

Next Steps

1.    Re-test

With the new revisions, I would want to conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

2.    Hand Over

After validating the design, I would hand over the design to the developers to work on developing the app.

3.    Product Launch

After the app has been built, we will introduce the new product to the users.

4.    Add features

After the first version of the app has launched, I would observe how people are using it and determine whether improvements or new areas of need are required.

Let’s Connect

 
 

Thank you for your time reviewing my work on the Kopi Café’s app! If you’d like to see more or get in touch, my contact information is provided below.

UXEsther Phang