Restaurant delivery app
The Italian app lets users quickly place meal orders from the Italian restaurant chain and track them all the way from the restaurant to their door.
Research
To get a better idea of the users' needs, I conducted interviews with 5 potential users.
With the insights from those, I was able to create user personas and a user journey map.
.jpg)
Problem statement
Reena is a working single parent with a busy schedule who needs to easily choose and order healthy meals because she wants her child to have a healthy diet and time for their sports clubs in the evenings.
Problem statement
Leah is a doctor with a busy schedule who needs to order dinner online and track when it will arrive because she wants to make the most of her free time.
This user group confirmed initial assumptions about people who order takeout frequently, but research revealed that time is not the only factor limiting users from cooking at home.
Time
Working adults are too busy to spend time on meal prep.
Accessibility
Platforms for ordering food are not adjusted for accessibility.
Tracking
Once the order is placed, there is often no way to know at what time exactly it will arrive.
UI
Text-heavy menus in apps are often difficult to read and order from.
Design Process
With a clear picture of the user needs and pain points in mind, I created design storyboards.
This helped me to get a clearer idea of the user flow and screens needed for the app's design.
It became clear that the user flow would have to be simple and quick to complete. This way external distractions wouldn't affect the user's ability to complete their order and the user needed predictability regarding the time when the food would arrive.
![Google UX Design Certificate - User flow [template].jpg](https://static.wixstatic.com/media/a7b9d9_cb4aadadc619491090f77190163bbf25~mv2.jpg/v1/fill/w_582,h_327,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20User%20flow%20%5Btemplate%5D.jpg)
I then sketched out the user flow to ensure that the digital wireframes in the next step would include all the necessary interaction elements to smoothly guide the user through the app. This also made me realise that I needed a some additional screens to meet all user needs.
I took time to draft iterations of each screen of the app on paper. This way I ensured that elements that made it into the digital wireframes were well-suited to address user pain points. Throughout the app, there is an emphasis on the use of visual elements to make the app more accessible.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy to navigate categories were key to meeting the user’s needs for a quick order placement process.
Within the categories the overview of meals was image based with only the meal name underneath it as text.
The aim for the product page was to contain key information that tell the user enough about the meals to make a quick decision.
In the basket the user could adjust the quantity of each item or remove any items that they no longer wanted.
The driver tracking feature was designed to meet one of the core needs of our users - to know when their food will arrive in order to plan around that.
The order summary page is a way for users to remind themselves what they ordered and a proof in case anything was missing from their delivered order.
Once I had working low-fidelty prototypes, I conducted a usability study with 5 potential users to test how easy it is for users to complete the main user flow.
Round 1 tasks (low-fidelity)
-
Open up the restaurant app and choose a restaurant you’d like to order from.
-
To order, add a drink and a dessert.
-
Checkout and complete the order.
-
Finally, take a look at your order summary and then navigate back to the delivery tracking feature.
Round 1 findings
01
Locations screen is difficult to navigate
02
It is cumbersome to choose meals
03
Navigation arrows are not intuitive to use
User Interface
Once I had applied the user feedback to the prototype and was happy with the general layout, navigation, user flow, etc, I started defining the colour scheme, typography and general aesthetic of the app with a sticker sheet.
I applied the style to my mockups and did another round of usability testing to test whether the changes I made to the low-fidelity prototype improved the usability and to get feedback on the user experience with a polished interface.
Round 2 tasks (high-fidelity)
-
Open up the app and choose a restaurant you’d like to order from. Choose a delivery date & time.
-
To order, add the two portions of tomato fettuccine to your basket.
-
In the basket, remove one tomato fettuccine dish.
-
Finally, please check out.
Round 2 findings
01
Locations page is still difficult to navigate
02
Difficult to change the item quantities in basket
03
Unclear for the user whether an item has been added to basket
Here are three of the biggest changes I've made over the course of the app design process to address the pain points from the usability studies.
Early designs proved overwhelming to users as there were multiple prominent elements and they didn’t know where to start.
I made the interactive map the focus and added the location details as an overlay on top of it. Below it I included further search options.
The second usability study still revealed frustration with the location selection. I added more interactivity to the map and removed the confirmation check mark which confused users. Instead, locations can now be selected by clicking on the underlined location name in the overlay.
The process of adding meals to the basket consisted of too many steps. To make it easier to filter I added buttons to select different meal categories at the top as well as a search bar and filter. I also changed the layout to make it easier to skim and include more meal information.
Conclusion
While designing this app, I learned how important it is to put the users front and center in the design process. From initial user research to gathering feedback through usability studies, keeping the user in mind at all times and listening to their needs enables me to create the best possible solution for them.
As a designer it is very easy to view my designs from my own point of view, but since I'm the one who came up with the design, I of course know how to use it. If I don't clearly signpost actions to the users, then they won't know how to complete the user flow and achieve their personal goal.
User feedback from second usability study:
​
“The app is very clear and presented very well. If a restaurant had an app like this I would have no problem ordering from it!"
"I love the delivery tracking feature!"