Project Overview
Product
As Google's Professional UX Design Certificate's first of three project, I was assigned to design a delivery tracking app for a takeout restaurant. To do that, I created a hypothetical fast food restaurant chain called Chomps.
Chomps is a takeout fast food restaurant that operates in many cities inside US and Canada. Chomps aims to combine tasty food with quality experience. For them, the entire eating process is a holistic experience and every part of it should meet the customer’s expectations. They offer a variety of items ranging from burgers to hot dogs.
Chomps delivery tracking app aims to inform and improve the tracking and waiting experience of the customers.
.png)
My Role
Sole UX designer and UX researcher designing a delivery tracking app for the takeout restaurant Chomps from conception to delivery.
Duration
September 2021 - November 2021
Responsibilities
User research, user journey, wireframing, usability testing, mockup design, lo-fi and hi-fi prototyping.
The Problem
People with busy or a versatile schedule and people who are very hungry often needs to track their order’s status to adjust their plans or to check problems but most delivery tracking systems in use are insufficient for the needs of the tracker.
The Goal
Design a mobile app that enables users to both place order and track their orders seamlessly.
Methodology
I decided to implement the Design Thinking framework and followed the phases in the following order Emphatize, Define, Ideate, Prototype and Test which helped me improve the product by adding more dimensions in each phase, facilitated iterating on my designs and refining them properly.
Understanding
The User
●User research
●Personas
●Problem statements
●User journey maps
User Research: Summary
I conducted moderated interviews and created empathy maps to empathize with users, understand user needs and frustrations and base the designs on the findings to better resonate with end users. The primary user group for the research was young working or studying adults and middle aged working adults who constantly order takeout food and have either busy or versitile daily schedules.
The research with the primary user group confirmed the assumptions regarding the frustration caused by the insufficient and unconsistent information. However the research surficed that not only the presented information caused frustration. Not being able to reach the restaurant or the delivery person and inconsistent performance were discoverd to be important pain points too.
User Research: Pain Points
Persona: Maisie Holt
![Google UX Design Certificate - Persona [Template] (1).png](https://static.wixstatic.com/media/3dd72b_9ee871de68e64914a49c63b0e7854883~mv2.png/v1/fill/w_960,h_540,al_c,q_90,enc_auto/Google%20UX%20Design%20Certificate%20-%20Persona%20%5BTemplate%5D%20(1).png)
Problem statement:
Maisie Holt is busy lawyer at a big law firm who needs to track their order’s delivery process because since she works late and leaves the office starving, she orders before she comes home and needs to track if the courier gets home before she does.
Persona: Adam Williams
![Google UX Design Certificate - Persona [Template].png](https://static.wixstatic.com/media/3dd72b_2a3bb2e98fe64f71a21ec19bce050167~mv2.png/v1/fill/w_960,h_540,al_c,q_90,enc_auto/Google%20UX%20Design%20Certificate%20-%20Persona%20%5BTemplate%5D.png)
Problem statement:
Adam Williams is a university student with two roommates who needs to order takeout and track its delivery process because he has a versatile daily schedule which requires him to do constant rearrangements.
User Journey Map
Mapping Maisie’s user journey revealed that waiting for the delivery can be quite frustrating and stressul in certain situations and showed that clear indications and even simple information such as the reason of delay or the order status can improve the experience greatly.
![Google UX Design Certificate - User Journey Map [Template].png](https://static.wixstatic.com/media/3dd72b_1a97f1551e924c589288796a6b825aa3~mv2.png/v1/fill/w_843,h_474,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20User%20Journey%20Map%20%5BTemplate%5D.png)
User Flow
I designed a user flow focused on delivery tracking and solving the problems that occur while waiting for delivery. I kept in mind that contacting the live support service should be the last resort for the users and needs to solve their problem no matter what. So, I planned the live support option to be recursive if necessary and noted that the app should deliver explanations and indications to solve problems and minimize the need of contacting live support.
![Google UX Design Certificate - User flow [template].png](https://static.wixstatic.com/media/3dd72b_111c118a7c5a4cb3b26d8a4a2d6f5529~mv2.png/v1/fill/w_789,h_444,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20User%20flow%20%5Btemplate%5D.png)
Starting
the design
●Paper wireframes
●Digital wireframes
●Low-fidelity prototype
●Usability studies
Paper Wireframes
Mapping Maisie’s user journey revealed that waiting for the delivery can be quite frustrating and stressul in certain situations and showed that clear indications and even simple information such as the reason of delay or the order status can improve the experience greatly.
Digital Wireframes
As I moved to digital designs, I tried to base my decisions merely on user feedback and statements. I tried to design a simple, intuitive yet informative homepage with features and information that users state critical for their tracking experience.
This slide menu helps users easily access the screen that they are searching for.
This green section indicates the most critical information regarding the order
This button helps users contact live support easily with one tap and ensures trust.
This live map navigation helps users track the courier live and inform the users on how much time is left until delivery.
Live navigation tracking feature was a key user need. In addition, users stated that they sometimes need more detailed information such as the number of their order in the route of the couriers that deliver multiple orders at the same time, occupation level of the restaurant etc.
This stepper indicates the order status which is the most important information that users need to track their orders.
This section indicates more detailed information that users might need in certain siutations such as courier name and type of vehicle
Low Fidelity Prototype
Using the completed set of wireframes, I created a low fidelity prototype. The main flow that I focused on was tracking the current order and then rating the entire ordering processes so that the prototype could be used in a usability study which would later shape the high fidelity prototype.
Usability Studies
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.
Refining
The Design
●Mockups
●High-fidelity prototype
●Accessibility
Mockups
Early designs delivered most of the information on the homepage which caused problems regarding negative space and hierarchy, to solve, I only kept key information on the homepage and used lines, scale and proportion to maintain hierarchy.
Lack of indications caused confusion on how to interact with features. To help users interact, I added indications as writings or icons that explained the interaction beforehand.
After Usability Studies
Before Usability Studies
Early designs delivered most of the information on the homepage which caused problems regarding negative space and hierarchy, to solve, I only kept key information on the homepage and used lines, scale and proportion to maintain hierarchy.
Lack of indications caused confusion on how to interact with features. To help users interact, I added indications as writings or icons that explained the interaction beforehand.
After Usability Study 2
Before Usability Study 2
High Fidelity Prototype
Surfacing new pain points and analyzing the feedback from the second usability study, the final high fidelity product followed cleaner, and more intuitive flows. I moved the Live Support to the top navigation area and presented it as an icon instead of a button since buttons were accidentaly misclicked in the study. I added a menu and an ordering feature since users did not show appreciation towards having seperate apps for ordering and tracking. Plus, I seperated the order details and delivery details section more clearly as users showed confusion when searching for information. Finally, I revised the designs to look more polished, refined and appealing.
.png)
Sticker Sheet
Accesibility Considerations
Going Forward
●Takeaways
●Next steps
Takeaways
Impact
The app strenghtens the bond between users and the brand by enabling them track their orders and arrange themselves accordingly. It improves the overall ordering experience. plus, it ensures trust by providing them easy support services, detailed information regarding their orders and clear and simple solutions for their problems
What I Learned
While designing the Chomps delivery tracking app, I realised users have quite diverse expectations and importance rankings when it comes to order tracking. I learned quantitative research findings really help when facing with diverse feedback. Plus, I learned that early concepts are just a starting point. User testings and additional research play the key role in designing the final product.
Next Steps
