Tal Comida | UX Case study

Project overview

The product:

A mobile application for a local
authentic Mexican food restaurant.

Project duration:

Oct 2021 - Feb 2022

The problem:

Ordering Mexican food from a mobile app with limited customization options, missing items when delivered, and a poor user experience.

The goal:

An app that will let users place and monitor the status of orders which will affect trust with the app and the service by displaying the current step in the process, status of the order, and an itemized breakdown after checkout.

My role:

UX designer designing an app for a local restaurant from conception to delivery.

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, account for accessibility, and iterating on designs.

Understanding the user

User research
Personas
Problem statements
User journey maps

Summary

I conducted interviews to gain a better understanding on how people use mobile applications to place an order for Mexican food. To simplify the process and avoid any issues with the kind of food being ordered, all research was done in regards to a general food ordering application.

The user group revealed several new possible additions and improvements. The research showed that some of the major pain points a user might experience are related to the applications stability, ease of use, and accountability for the service delivering the food.

Pain Points

Limited window in which to receive the order

Receiving an order with incorrect or missing items

Menus that do not reflect the main ingredients or provide images

No plasticware or napkins included

User journey map

Understanding how the user navigates the app will help
uncover possible problems or opportunities.

Starting the design

Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies

Paper wireframes

Following my initial research the next step was to mockup potential layouts and set a basic user flow.

Digital wireframes

For the homepage, easy access to recent orders, deals, and the menu. Engaging (tasty) imagery will be the main focal point.

The customization area should be fluid and easy to digest. Nutritional information for the item is available.

Low-fidelity prototype

After the wireframes were designed, I put together a low-fidelity prototype to conduct a usability study.

Click here to view the prototype.

Usability study

I conducted a usability study with 5 participants in an unmoderated environment. Users were given a set of tasks to complete and a brief questionnaire regarding their overall experience.

Research questions

What can we learn from the user flow, or the steps that a user takes to complete an order?
How long does it take for a person to complete an order from the homepage?

Participants

Total: 5 participants

Participants between the ages of 24-46 who reside in suburban areas and order out at least once a month.

Methodology

5 - 15 minutes

United States, Remote

Unmoderated usability study

Users were asked to complete 5 tasks within a low-fidelity prototype.

After the usability test, I created an affinity diagram to begin identifying patterns and form themes.

Refining the design

Mockups
High-fidelity prototype
Accessibility

Mockups

The orders page was brought into an overlay that can be accessed from the bottom navigation. This gives the user more freedom to check, edit, and remove items from the order at any point in the user flow.

Users expressed frustration while clicking radio controls for item customization. To help with this, the entire row is now clickable and changes appearance when pressed.

Additionally the bottom navigation bar has been updated to be more intuitive.

Style guide

During this phase, I finalized the style guide to ensure brand consistency.

High-fidelity prototype

The high-fidelity prototype introduced several new screens and features that addressed issues found during the usability test.

Click here to view the prototype.

Accessibility considerations

Colors used in the app were chosen to meet WCAG standards.

Labeled iconography and input labels have been used to ensure compatibility with screen readers.

The use of alt-text on images will help make the app more accessible.

Going forward

Takeaways
Next steps

Impact:

This project was insightful and challenging. It’s amazing seeing the progress that was made and more importantly, how it can help make someone’s life better.

"I like the layout, the large icons; it's pretty intuitive and flows well."
- Participant

What I learned:

One of the most important lessons I took away from this project was that there is never going to be a “one size fits all” solution. The importance of balancing all of the information from the initial concept to the final product can’t be overstated.

Next steps

Continue testing and iterating to resolve any accessibility issues that may have been missed.

Design a feature that displays any available deals for items added to the cart that do not have a discount applied.

Add the option to enable a dark mode and high-contrast theme.

Let's connect!

Thank you for taking the time to check out this project. If you're interested in speaking or reviewing more of my work, please feel free to contact me.

Email: info@rodneysean.com

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.