gareth-harrison-d2fCUh0PIKo-unsplash.jpg

Thai food app is a local food app that offers the user a wide variety of healthy and traditional Thai cuisine.

Goal

My role

Design a Thai food delivery app that let users order from home and receives orders fast and efficient.

Project duration

Sept-Oct 2021

User Research
Journey Mapping
Sketching
Wireframing
Screen Flows

iPhone 12 Pro.png

I conducted interviews and created empathy maps to understand the users I'm designing for and their needs.

A primary user group identified through research were young adults who are too busy to cook because they are studying or working. 

The user group confirmed initial assumptions about the time inefficiently of cooking every meal It also revealed that most users don't find it easy to communicate with the customer service. The research showed that users feel frustrated when they can't track the food or it is arriving too late.

User Research

iconmonstr-banknote-15-240.png

Price

Users find it expensive to order food from home, sometimes you don't know how much is gonna cost till the very end.

iconmonstr-time-1-240.png

Time

Most users don't find time to cook and prepare meals. They feel it takes a lot of time and effort to do that.

iconmonstr-smartphone-7-240 (1).png

Ordering process

When ordering food from home users have problems choosing payment methods, tracking order or contacting customer service.

Meet the Users

Retrato de la moda

Name: Carla

Age: 27

Occupation: Marketing

El retrato del hombre

Name: Markus

Age: 21

Occupation: Student

Markus is from Germany, he's studying and living in a shared apartment. He’s most of the time studying or playing video games, he doesn’t like to cook that much but he likes to have a big variety of food to choose from.

Carla comes from Spain but she's living right now in Germany. She is studying online and working part-time, at the moment she doesn’t have much free time that's why sometimes she finds it helpful to order food online.

Information Architecture

Frame 2.png

Paper Wireframes

image3_edited_edited.jpg
image5_edited.jpg

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

Homepage.png
Homepage.png
side menu.png
dish selection.png

Low-fidelity prototype

The low-fidelity prototype connected the primary user flow of selecting and adding food to the basket so that the prototype could be used in a usability study with users.

1.JPG

Usability Study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Untitled.jpg
  • Missing a basket when selecting a dish: We found out that users need an intuitive way to know what they are selecting and buying.

  • Interface problems: Users had problems by clicking the wrong buttons due to a lack of intuitive design.

  • Registration problems: Users didn’t like that they need to register twice, once in the avatar section and the other one when they place the order.

Mockups

Early designs allowed for some customization, but after usability studies, I added a basket to make clear what users were ordering. Also, I refined the design by deleting some plus buttons and being able just by clicking on each picture, finally, I added more payment options and made the registration just once.

Before usability study

before 1.png

After usability study

after5.png

I made more simple the navigation but deleted some unnecessary buttons and emphasized the important ones to improve users' flow.

Before usability study

After usability study

before 2.png
after1.png
after2.png

Design System

Group 1 (2).png

Key Mockups

1/6

At the home, users can choose if they want to pick up or deliver home orders, they can use the search bar or click directly into the top bar. The menu is organized by main categories.

In the checkout users can review the order, select payment method, and track the order, they receive a notification when the order arrives. Finally, they can review how went the whole experience.

1/6

High-Fidelity Prototype

The hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.

2.JPG

Accessibility Considerations

  • Provided access to users who are vision-impaired through adding alt text to images for screen readers.

  • Used icons to help make navigation easier.

  • Large images to help people with low vision to understand the menu better.

What I learned

While designing the Thai food 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 design.