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.
Digital wireframes
Based on the data collected from the user research, I decided to keep the home screen of the app simple and straightforward by placing the ‘delivery’ & ‘pick up’ CTAs in a prominent place. Users also requested to be able to use the app without having to create an account as well as for different categories, where they can choose dishes based on their personal preferences and dietary requirements. Lastly, one of the most common feedback collected from nearly all the participants of the usability study, was for the users to be able to add multiple addresses to their accounts.
Low-fidelity prototype
The low-fidelity prototype connected the user flow of creating an account and placing an order for either delivery or pick-up. The prototype could be used for user usability studies.
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 wish to be able to select between different payment types
2. Users expect to see their password as they’re setting up an account
3. Users want to add more than one address to their account
Round #2 findings
1. Users want to be able to complete their order as a guest
2. Users find the green colour overwhelming
3. Users find some texts especially on CTAs, hard to read
Mockups
After the usability study, I double-checked that the colour contrast, especially on CTAs, passes accessibility standards. By checking the colour contrast on WebAIM, I decided to use a darker shade of green and a more subtle off-white for the colour palette in my app.
Nearly all the test users expressed the need to be able to place an order without having to create an account. So, by taking this into consideration, I revisited my prototype and created an alternative user journey for those who want to check out as guests.
After the second usability study of the high-fidelity prototype and in order to make the app more inviting, I decided to add some illustrations and change the radius on the corners of the buttons and the editable fields.
High-fidelity prototype
After the second usability test, the high-fidelity prototype had a smoother user flow for both account holders and guest users.
Takeaways
Impact
Late user testing confirms that the app has addressed all the main pain points and users can quite easily complete the main user flow.
‘This app is brilliant! I couldn’t ask for a more convenient way to order my favourite vegetarian Mexican dish’
What I learned
Throughout this whole app development process I learnt a lot about food apps and what are the main pain points that users face while placing online food orders.