A fictional fast-food restaurant delivery mobile app that allows users to conveniently order and receive authentic Thai food, hassle-free.
Users are having difficulty ordering food as the process is inefficient, complicated, and slow, and they have no way of tracking their orders.
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.
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.
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.
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.
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.
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.
Users often find the navigation and interface difficult to use and the ordering process too slow and complicated.
Without an accessible way to track and manage their orders, users are often left wondering when their food will arrive and unable to cancel.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.