Route 66 - Takeaway App
Role: Lead UX/UI Designer
Project Vision
Route 66 is a local takeaway restaurant for people who enjoy American style food and drink. For this project, the focus was to create an app for a single retailer as apposed to "JustEat" & "Deliveroo" who cater to multiple takeaway providers. The MVP for this product was designed as an app to create an eco-system that would promote repeat custom through shortnered user journeys. This shortnered journey would be achieved through user accounts, saved preferences, orders, addresses and payment details.
Challenges
-
Increase repeat customers by increasing user sign-up
-
Shorten the user journey by saving preferences to the user's profile such as addresses, favourites and payment details
-
A design system that has high accessibility for a large range of abilities and age ranges
-
Deliver minimalistic UI focused on delivering the primary experience of placing an order
-
Provide a clean and clear purchasing experience that is easy to complete in as few steps as possible
Kick Off
To begin the project I conducted an online survey across a broad spectrum of people to identify common behavioural patterns and the challenges faced when ordering from a restaurant. Before beginning the research I had made the assumption that most people ordered takeaway through apps. However, this was found to be inaccurate as surprisingly the number one method of ordering is by phone calls. This app aims to change that.
In this project, we took a broad look at the behaviour of takeaway users to get a comprehensive look at the experiences that are currently happening. These insights would allow us to target user's pain points and find the gaps in the market not now catered for by current solutions. The biggest pain points found were the following:
-
Bad reviews
-
Delivery that is slow & expensive
-
Bad menu
-
Difficult to use apps
Meet the Users
From the study, we determined two personas that would need to be catered for by the app. The first persona was a busy husband and family that needed to cater to his family's needs quickly. The second persona was a single female that regularly has takeaway as a social event and has a higher priority on value for money.
Competitive Analysis
We looked at several potential competing companies, and although some cater to multiple takeaway outlets, they can still infringe on the business' revenue & popularity. The Route 66 takeaway app has the opportunity to fill a gap in the market by creating a single app experience that could be white-labelled for use for multiple outlets without side-by-side competition and to cater directly to their own niche of customers.
The majority of the features between competitors were very similar, however the main differences that we noticed were:
– Lack of filtering and categories
– Delivery buried in sub-pages
– Promotions difficult to find and/or apply
– Very bland minimal UI
Wireframes & User Flows
After sketching out some initial concept wireframes and thinking through the preliminary flow, we reviewed what was necessary, and unnecessary, before moving on to digital versions. We poured a lot of our time into this step to make sure we had the full user journey mapped out with an underlying UX methodology before applying the UI and branding.
Iteration
After creating our prototype from low-fidelity wireframes, our team prepared 2 unmoderated usability studies for participants. We asked 5 different participants to run through different a selection of scenarios in our prototype in hopes of garnering enough feedback to use for each set of design iterations.
Missed Basket
Most participants reported the basket was easily missed
Filters Missed
Most participants reported the filters were easily missed
Payment Slow
Users found the payment process to be slow & difficult
Limited Options
The productions had limited options for customisation
Vouchers Missed
The vouchers were not easily found and missed by most
Order Complete?
Once users completed their order it wasn't clear
Profile Vs Orders
The profile area was featured in the main navigation and orders were a sub-section. After the study, we found that orders are too important to hide and the profile section was moved to the home page. This also allowed for order notifications to be a more prominent feature of the main navigation.
Deliver Options
The menu page featured delivery options at the top which were missed by most users. This now has a prompt on the first load and is styled to stand out compared to the quick links below. The filters on the quick link section were also missed, so for accessibility and for prominence it was expanded and fixed in place.
Expanded Options
The product pages originally contained additional extras on the page for quick selection. From the study, people found this limiting and the more options the harder the page became to use. Additional extras were then added as additional steps via overlays which allowed a focused selection process and individual customisation of meals.
Style Guide & Components
Combining two incredibly distinct colours to create Route 66 signature "Americana" feel, but also allows the system to be easily rebranded to create a white-label platform. The splash screen grabs your attention whilst providing a quick and easy onboarding process. The components have been created to feel familiar for maximum accessibility.
Takeaways
This project was completed as part of my Google UX Design Professional Certificate and was my first time using Figma. I found it incredibly useful to do such in-depth UX research. Targeting a specific set of problems based on a persona's needs allowed me to gain greater empathy of their needs, and not create UI for the sake of UI.
"Through user-testing, I was able to catch blind spots in the design that I would not be able to see myself"
Our testing provided useful quantitative and qualitative data points that allowed for design iterations that would make all the difference to the final performance of the takeaway app. If I was to continue this process of making improvements I would try testing a bigger variety of user journeys such as different login types, payment types and how different a non-member journey would differ. The user journey for a non-member would be an interesting path as this would present new a new goal of upselling the benefits of creating an account and becoming a member and where these touch points would most effectively be placed in the user journey.