Food delivery website UX UI design
Brief Summary
At-a-Glance
I worked for Sonimod as a UIUX designer for 3 months in 2023. I worked to design a desktop website and an IOS mobile app for Sonimod to tailor users who want to track the process of food delivery in real-time through three rounds of wireframing, prototyping and testing. In three months, I created a complete set of website, app designs, a design system, and collaborated with another designer.
Timeline
Role
Collaboration
Platform
February 2023-May 2023
UX UI Designer
a team of two
Figma, Balsamiq Wireframes
Client
Sonimod, an internationally operating pizza and pasta restaurant.
The Problem
The current food delivery platform does not have different delivery options, and the delivery process cannot be monitored throughout. Speed and food integrity are two of the food delivery industry's most significant concerns in addressing this issue. Sonimod requires to develop an app experience that covers the pre-delivery, tracking, and post-delivery stages of an order, to ensure that customers feel confident in the ability of Sonimod’s delivery robots to deliver their food safely.
Target User
Individuals who lead busy lifestyles and may not have the time or energy to cook their own meals.
Design Solution
Our goal is to provide real-time tracking and notifications about the delivery process. Provide visual confirmation of the delivery robot's identity and status, including real-time photos or videos of the robot approaching the customer's location. In order to meet the needs of users who order food online and assure them of the safe delivery of their meals by Sonimod's delivery robot.
John
Busy office staff
Scenario: John always works long hours and often finds it challenging to cook meals at home. He frequently orders food online for convenience.
​
Design Solution: John can easily navigate the user-friendly interface, quickly select his preferred items, and customize his order based on his dietary preferences. The real-time tracking feature allows him to monitor the delivery progress, ensuring he knows when to expect his meal.
Eric
Retired seniors
Scenario: Eric who finds it challenging to go out for meals. He relies on food delivery services to order pizza and conveniently delivered to his doorstep.
Design Solution: The interface provides a straightforward ordering process, and the visual feedback feature reassures Eric about the delivery robot's identity and safety.
Research
Background Research
Nowadays, more and more people like to order take-out because it is convenient and efficient, and they can eat their favorite
food when they don't have time and energy to cook.
​
Online food delivery services (OFD) are now trending in the electronic commerce space. OFD is ordering and delivery of food
from various restaurants through website or app. Customers usually search for a favorite restaurant, choose from available
items, and provide their delivery address (Pigatto et al., 2017) The time-saving factor increases the value of services provided because it reduces the amount of time and energy consumers expend (convenience) to purchase a product (Jeng, 2016)
Online Ethnography
Competitor Analysis​
The following products are our competitor analysis, to which we have added a real-time tracking system
Jobs-to-be-Done
provides a framework for defining, categorizing, capturing, and organizing our users' needs
-
Always check the status of food preparation
-
Check the estimated time remaining and the location of delivery to make subsequent schedules
User Profiles
Design Process
Low-Fidelity Prototype Iteration - Desktop
Test Method
From Low-fidelity to High-fidelity Prototype
Before turning into the final high-fidelity prototype, I conducted a heuristic evaluation with experts, including team members and classmates, to test the wireflow. After that, I made some changes according to the feedback. Here I will show key screens iterations to show my progress.
Visual Identity & Design System
Final High-Fidelity Prototype
Wireflows
What I learned
During the iterative process, I used many methods to test and obtain feedback, allowing me to better understand the pain points of users and be more user-centric.
​
In each iteration, I invite some potential users to test our model. Users give us questions, ideas, and revelations that I haven't considered. By improving on these issues, I will proceed to the next iteration. After several iterations, I will have the final prototype. In this process, I have accumulated a lot of experience, learned to substitute the perspective of users, consider the needs and points of users from different angles, and how to solve these problems. These opinions are invaluable, motivating us to improve again and again, ensuring that I can make suitable products.
​
One of the most important methods I learned is Jakob Nielsen's ten principles of heuristic evaluation. Which is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process
Key challenges
When converting the first low-fidelity prototype to high-fidelity, we found that needed to rethink the image size and layout of the page. This was because the original visual hierarchy and the information presented were not appropriate and looked messy.
​
Another big challenge is designing our prototype that focuses on the delivery process rather than an online food ordering system. Users need to see the real-time tracking process and clearly know where is the robot.
​
Choosing the colour of the background and button is also a big challenge. We want to make the wireframes look clean and aesthetically pleasing.
Solutions
​We viewed a lot of examples of UI design, learned the colour scheme they used and got inspiration from them. Finally, we decide on our system colour on red, white and grey.
​
We reconsider my wireframes after the heuristic evaluation. We add more content to the delivery process page. Provide visual confirmation of the delivery robot's identity and status, such as the robot's name and photo. Enable customers to see real-time photos or videos of the delivery robot as it approaches their location. This helps build trust and reassures users that their food is being handled safely.
​
So we modified the low-fidelity model again to present the page layout at the actual size possible. Conducted multiple rounds of user testing to modify my design based on the feedback collected.