Project Overview.

An ordering app for a modern restaurant. One of the target groups is people with a tight schedule who need easy and fast access to food in form of delivery service from their favourite restaurant.

Project duration: 04/2022 - 05/2022

The problem: Clients want to have an easy delivery process from their favourite restaurant in order to save time.

‍The goal: Designing an ordering app for a modern restaurant that allows easy delivery. Clients save time and can eat from their comfort home.

My role: Lead UX/UI designer and researcher.

‍Responsibilities: Guiding and conducting a full design life cycle: research, sketching, wireframing, designing.

Understanding the user.

User research.
‍
For understanding the users and their needs better I conducted interviews and created empathy maps. Two groups became recognizable as a result. A primary group identified through research are ambitious people who are either employed and want to grow the company they work for or freelancer who wants to push their business. Both have the purchasing power to eat frequently in a modern café in one of the most expensive areas in East Africa. This research proved the initial assumption that the users prefer eating outside in order to save time and concentrate on their work. During the process, it was revealed that the change situation when paying cash is an high problem in this country and that they feel a high demand on solving this.

Pain points.‍

1 User flow

Working adults don’t have enough time to cook
frequently.

2 Paying methods

The paying in cash process takes a lot of energy and time for all participants.

3 Order confirmation

Placing an order without knowing if it was successful and seeing the food’s journey.

4 Poor design

Poor in functionality, appearance, like colours and text-heavy and too less information in the menu.

Pain points.‍

1 User flow

Working adults don’t have enough time to cook
frequently.

2 Paying methods

The paying in cash process takes a lot of energy and time for all participants.

3 Order confirmation

Placing an order without knowing if it was successful and seeing the food’s journey.

4 Poor design

Poor in functionality, appearance, like colours and text-heavy and too less information in the menu.

Personas.
‍

Problem statement.

Rose is a confident young entrepreneur who needs quick delivered meals and can pay via e-payment because cooking or picking it up herself takes a lot of time and the change situation is nerve-racking.

User journey map.

Mapping Rose's journey map revealed how helpful it is for users to have the La Vida Café app with an e-payment option.

Starting the design.

Paper wireframes.

Sketching on paper supported the creative process and assured to integrate of the users’ pain points and wishes, before sliding over to digital wireframes. Additionally, after the first sketches, it was obvious to see which elements matter.

The hearts above are showing which elements were liked and combined on this screen to your left.

Digital wireframes.

As the initial phase continued, I made sure to extend the paper wireframes due to the users’ interests which were found during the research phase.

Low-fidelity prototype.

The low-fidelity prototype connects two primary user-flows of ordering a meal or reserving a table so that the prototype could be used for user studies. Different scenarios were already linked for a better understanding. Please have a try yourself: http://bitly.ws/qsot

Usability study findings.

Each round helped to understand the users und their needs better. According to this, the design was refined.
‍

Round 1

1. Users want to place an order easily (by a button).
2. Users want to cancel the order or delete an item fast during the preview.
3. Users want a better structure for options during the checkout process.

Round 2

1. Changing the color of the heading on the Login and signup screens for better legibility.‍‍

Refining the design.

Mock-ups.

Through the first usability study, it became clear that the checkout process was too complicated and the fonts were too small. For a better experience, I chose a clearer language, and in order, to accessibility, I changed the font size. On the left side, you always find the screen before the usability study and on the right after the study.

The “Login” was changed to white for better legibility.

Sample screens

High-fidelity prototype.

Have a look here at the prototype that was used in another user-testing round. .......

Have a look at the full design in Figma. Click here.

Accessibility considerations.
‍

1. Screen readers.
Clear design in order to screen readers are able to read out loud and assist people while using the product.
‍
2. Languages.
Language option to include more people.‍‍

Going forward.

Impact.
‍
“Wow, the app makes it so much easier to order from my favorite restaurant! It is really easy to use.” (Babra)

What I learned.
‍
When giving options to the user, nevertheless keep the flow and navigation clear and easy.
jhjhsofj
asdjsadkas

Next.

1 Testing

The current product of the app needs to be tested.

Next steps.

What could the possible next steps look like? Let's check it out together.

1. User flow
‍Creating a flow in order to reserve a table, so that people can make sure to get a spot.

2. Accessibility
Exploring more possibilities to include accessibility in order to serve more people and give them a better experience.

La Vida Café

Project Overview.

Understanding the user.

1

User flow

2

Paying methods

3

Order confirmation

4

Poor design

1