To the Mex
The product
To the Mex app is an ordering and delivery/pick-up Mexican food app that allows users to select from a wide range of Mexican dishes, including options for people with special dietary requirements. Users can also, place scheduled orders and choose whether they want them delivered or ready for collection.
The problem:
Busy professionals who lack the time and ability to prepare quality meals for themselves and their dependents and are in need of a food app to place scheduled orders. In addition to that, they are looking for an app to give them the option to choose between delivery and pick up and also be able to track their order.
The goal:
Design an app that gives users the ability to order from a wide range of Mexican food, including options for those with special dietary requirements, and choose between having the order delivered to them or ready for collection.
My role:
UX designer leading the app and responsive website design from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User research: summary
In order to better understand the users I’m designing for, I conducted interviews and created empathy maps. Through the above, a primary user group has identified as professionals who don’t have enough time to spend cooking and they are looking for meals delivered to them. This user group confirmed initial assumptions about To the Mex customers. Apart from the busy schedules that don’t leave them enough time to cook, there are other factors that make it difficult for them to get quality groceries or visit restaurants in person.
User research: pain points
Time
Busy professionals that don’t have enough to prepare meals at home, especially dinners.
Customisation
Users are not always able to tailor meals based on their preferences. Existing food apps have no clear categorisation of options for people with special dietary needs.
Order tracking
Most of the existing food delivery apps do not offer live order tracking. As a result, the users are not able to place scheduled orders.
Payment
Limited payment options and complicated checkout options make it difficult for users to complete their orders.
Personas
Femi
Femi is an NHS paramedic who works long shifts and is looking for an app to order their favourite vegetarian Mexican dish and deliver it to them because most of their local restaurants have long waiting times.
Tanisha
Tanisha is a busy freelance MUA who needs a food app to track their orders because they prefer to place them on the way home.
Paper wireframes
Drafting the main screens of the app and trying different layouts to make sure that users’ pain points have been addressed. Star elements have been used on digital wireframes.
Wireframes
Based on the user research data, I incorporated the following into the wireframes:
• Simplified the app's home screen
• Emphasised the 'delivery' and 'pick up' options for user convenience
• Provided an option for users to use the app without creating an account
• Implemented various categories for users to select dishes based on their preferences and dietary requirements
• Addressed the common request from usability study participants to allow users to add multiple addresses to their accounts
Low-fidelity prototype
he low-fidelity prototype linked the user journey of creating an account and making an order for either delivery or pick-up. This prototype was designed for usability studies with users.
User research: summary
Two unmoderated usability studies have been conducted, one on an early stage (low fidelity prototype) and the second one on a high fidelity prototype.
Round #1 findings
1. Users want the ability to choose from various payment options
2. Users expect to see their password as they type it in while setting up an account
3. Users desire the capability to add multiple addresses to their account
Round #2 findings
1. Users want an option to complete their order as a guest
2. Users feel that the green color is overpowering
3. Users find some texts especially on CTAs, hard to read
Mockups
After the usability study, I took the following steps:
• Conducted a comprehensive review to verify colour contrast compliance, especially on CTAs, with accessibility standards
• Utilised WebAIM to assess the colour contrast
• Decided to incorporate the following changes to the colour palette in my app:
•Adopted a darker shade of green
•Selected a more subtle off-white
Almost all of the test users mentioned the importance of being able to place an order without the requirement of creating an account. To address this, I went back to my prototype and developed an alternative user path for those who prefer to check out as guests.
After the second usability study of the high-fidelity prototype, I aimed to enhance the app's appeal by making the following changes:
• Incorporated illustrations into various parts of the app
• Altered button and field corner radius for a friendlier look
High-fidelity prototype
After the second usability test, the high-fidelity prototype had a smoother user flow for both account holders and guest users.
Design system
Takeaways
Here is a short summary of what I learnt from my experience building the 'To the Mex' app:
1. Keep It Simple: Make the app easy to use with a straightforward interface
2. Efficient Search and Filters: Help users find what they want quickly with strong search and filter options
3. High quality Images Matter: High-quality food images attract users and enhance the app's appeal
4. Smooth Payments: Ensure secure and seamless payment processing
5. Personalise: Offer personalised experiences, like suggesting favourite dishes based on dietary requirements
6. Location Services: Show nearby options using location data