Designer's signature


Designing a fast-food restaurant delivery mobile app

Final prototype
Landing background image

Project overview


  • 4 weeks


  • Figma
  • Adobe Photoshop
  • Adobe Illustrator


  • Project lead
  • UX Designer
  • UI Designer


  • User research
  • Wireframing, prototyping
  • Visual design
  • Usability testing

The product

A fictional fast-food restaurant delivery mobile app that allows users to conveniently order and receive authentic Thai food, hassle-free.

The problem

Users are having difficulty ordering food as the process is inefficient, complicated, and slow, and they have no way of tracking their orders.

The goal

Design a mobile app that allows customers to quickly and easily order food from the restaurant and track the order’s status. The app must be simple and intuitive.

Understanding the users

Starting off the project, I began with user research. I used a bunch of different research methods to gain a better understanding of my target audience. The primary user group identified through research was busy adults, who don’t have time or motivation to cook themselves.


Ten people aged 18-60 with different language and tech skills who regularly use food delivery apps.


To better understand the users I’m designing for and the competition I’m up against.


Reviewing more in-depth materials to identify user problems and needs I may have missed in my own research.


Conducted in later stages of development to test the product’s functionality.


Meet Santiago and Jessica. Using the information gathered during the user research, I created two personas to help me better understand the needs, behaviors, and motivations of the target user base.

User persona 1


Santiago’s user persona emphasizes the need for a quick and smooth ordering process, which can save a lot of time and help with productivity. It also underlines the need for better language accessibility.


Jessica’s user persona is that of a typical user of technology who struggles with complicated interfaces and difficulty using apps to their full potential, leaving them feeling frustrated and overwhelmed.

User persona 2

User journey map

Utilizing the UX personas of Santiago and Jessica, I created a user journey map to better visualize the steps a user takes to order food, detailing their interactions with the product, their emotions at each stage, and to identify improvement opportunities.

User journey map

Pain points

With the knowledge about the users’ needs and frustrations so far, I was able to identify some key pain points customers may experience when using the product. By understanding these pain points, I was able to create a design addressing these issues.

Time icon


Busy users looking for food delivery are overwhelmed by the amount of time it takes to order food online or through a food delivery app.

Time icon


Users often find the navigation and interface difficult to use and the ordering process too slow and complicated.

Time icon


Without an accessible way to track and manage their orders, users are often left wondering when their food will arrive and unable to cancel.

Time icon


Apps are often difficult to use for those who don't speak the dominant language, leading to a lack of accessibility for a variety of users.

User flow

Finally, I mapped out the user flow to provide a detailed structure of the product and the specific pages a user goes through to complete a task. It considers the pain points, frustrations, and improvement opportunities identified during the user research.

User flow

Starting the design

After gathering enough information about my potential users and their needs, I began designing the application. This section covers paper wireframes, transition to digital wireframes, setting up a low-fidelity prototype and conducting the first round of usability studies. Each of these tools provide a different level of detail and allow for creativity, iteration, and feedback.

Paper wireframe 1
Paper wireframe 2
Paper wireframe 3
Paper wireframe 4
Paper wireframe 5
Paper wireframe 6

Paper wireframes

The paper wireframes were used to create a basic layout of the app's user interface and key pages the user will go through. Using just a pen and paper allowed me to quickly iterate on my ideas, and work quickly and efficiently.

In this case study, I included some of the key screens - menu, order preview, delivery, payment, order success screen and profile.

Digital wireframes

The transition from paper wireframes to digital wireframes was an important part of the design process. Digital wireframes do a much better job at visualizing the layout in greater detail and allow me to quickly and easily tweak the designs.

I used Figma to create a digital version of every sketch. Here you can see the same screens after the transition.

Digital wireframe 1
Digital wireframe 2
Digital wireframe 3
Digital wireframe 4
Digital wireframe 5
Digital wireframe 6

Low-fidelity prototype

By connecting the digital wireframes in Figma, I created the first interactive representation of the product to test its core functionality. This prototype was later used in the first round of usability studies. I highlighted some key features below, but you can play around with it yourself here.

Low fidelity prototype feature 1


To make the navigation easier to use, filters help users narrow down their search and find exactly what they’re looking for. The favorites feature allows users to save their favorite items for easy access in the future.


Auto-fill allows users to quickly and easily place orders without having to manually enter the same information repeatedly. It eliminates the need to enter personal details such as name, address, and payment information with each order, saving time and effort.

Low fidelity prototype feature 2
Low fidelity prototype feature 3


With this feature, users can easily review the status of their orders, estimated delivery time, and receive push notifications whenever the order is updated. They can also easily cancel the order and change the delivery address. Users no longer have to remain alert at all times and can focus on other things.

Usability study - round 1

After finishing the low-fidelity prototype, I conducted the first round of usability studies. Five participants were asked to perform specific tasks while giving me feedback on their experience. I was able to identify many areas of improvement and iterate on my designs. Below are some of the key changes I made. Try the updated version here.


Based on user feedback, I have replaced the search bar with a new, larger one. The placement and size was adjusted for easier readability and to be more noticeable to users, unlike the previous one.

Usability study 1 feature 1 old


Usability study 1 feature 1 new


Usability study 1 feature 2 new



The new order review screen has been designed to provide users with an overview of all of their order information. This allows users to double check the accuracy of the information, ensuring that everything is correct before placing the order.


Through this feature, users can save multiple delivery addresses and payment credentials, allowing them to speed up the checkout process when ordering from different locations or with other credentials. Users can also view, edit, add and delete their saved addresses and payment information in the Profile tab.

Usability study 1 feature 3 old


Usability study 1 feature 3 new


Finalizing the design

After completing the changes based on user feedback during the first usability study, I began the final design stage of the product. Starting with the basics of choosing colors, icons and adjusting the layout, and then progressing to creating mockups and a high-fidelity prototype. Finally, I also conducted a second round of usability studies to ensure that the final design is suitable for users.

Designing the interface

My primary goal was to come up with an intuitive and visually appealing design. I played around with components and elements on the screen, layouts, colors and icons before replacing the placeholders with finalized assets. Below is the step-by-step transformation of the design.

Interface transformation 1


Interface transformation 2


Interface transformation 3


Interface transformation 4


Style guide

An overview of how I created the UI for this project. It includes guidelines for using color, fonts and iconography. Because the product is completely fictional, I also had to design a logo.

Logo and typography


For the logo, I wanted to create something that was modern, but also retained the traditional feel of Thai culture. I settled on this roof design, which is supposed to represent the Thai architecture.

Moving on to typography, I used one of my all time favorites, Inter. It’s easily readable, looks great and adds a great touch to the visual design.


To make the app more accessible, I created two palettes for light and dark mode. The bright red color, which matches the logo and emphasizes the brand’s identity, was used as an anchor throughout the design, while the contrasting backgrounds allowed me to create two different experiences that still felt unified.

Color palette


I used the Material Design icons by Google in order to create an interactive and visually appealing experience. Additionally, the icons helped to add a modern and professional look to the design.


Following the transformation steps and style guide outlined, I re-designed every wireframe to get a better visual representation of the product. I also added more screens to broaden the user experience - each profile item now had its own screen and design.

Mockup 1
Mockup 2
Mockup 3
Mockup 4
Mockup 5
Mockup 6

High-fidelity prototype

This prototype was designed to serve as a realistic representation of the user experience and to deliver a more immersive experience to users, including visuals, interactions, and animations. As usual, I highlighted only a few features. If you want, explore the prototype on your own here.

High fidelity prototype feature 1


I believe that dark mode is an essential feature for all mobile and desktop apps, which is why I wanted to include it in my project. It allows users to switch to a darker color palette, making it easier on the eyes and providing a more pleasant experience.


Users can quickly and easily create and update their delivery profiles, as well as securely store their payment credentials. They can add a name and icon to each profile to make it stand out among other saved information.

High fidelity prototype feature 2
High fidelity prototype feature 3


This screen was designed to make it easy and intuitive for users to cancel or modify their orders, as well as tracking the order’s status and estimated delivery time in real-time. It also provides detailed information about the order itself.

Usability study - round 2

After I finished the high-fidelity prototype, I was ready for the second and final round of usability studies with the same participants, testing the overall user experience. Participants found the interface to be intuitive and straightforward. However, the study also revealed some areas of improvement.


I added a plus icon to make item selecting more understandable. The checkout button is now hidden when no items are selected, giving users a broader view of the menu. Additionally, I changed the filters to specific dish types.

Usability study 2 feature 1 old


Usability study 2 feature 1 new


Usability study 2 feature 2 old


Usability study 2 feature 2 new



The payment method buttons have been replaced by a scroll bar in order to improve the user experience and give users more choice. The scroll bar allows users to quickly and easily scroll through the different payment methods to select the one they prefer, while also giving me the option to add more items, if necessary.

Accessibility considerations

Finally, I want to outline all of the features I added to make the app more accessible for people with various disabilities, while also improving the experience for all users.


Users have the ability to choose from a variety of font sizes, so they can best customize the app to their preference. Along with the options for different font sizes, the design offers a selection of languages, allowing people all around the world to access its features.

Accessibility 1
Accessibility 2


The app has three different options for its color mode, light, dark, and high contrast. Light mode provides a bright and cheerful environment. Dark mode is designed to reduce eye strain in low-light conditions. High contrast mode helps vision-impaired users more clearly differentiate between different elements of the app.


The intuitive and easy-to-use design allows users to easily customize their notification preferences to suit their individual needs and interests. Order-related notifications ensure that users are always in the loop about the status of their delivery.

Accessibility 3

Thank you for reading!

I believe this project was a success. The user experience journey was simple and straightforward, while incorporating the necessary elements to ensure a good user experience.

The app was designed to maximize efficiency when ordering, as well as providing an easy-to-use and visually appealing experience. Overall, the app addressed the pain points and objectives identified during the research. Try out the final product here.