Taco Loco

Client

Taco Loco - Taco Trucks

My Role

UX / UI Lead - Designing a mobile food ordering app for Taco Loco from conception to product delivery.

Project Duration

August - October 2023

Skills

User Research, User Personas, Competitive Audits, Customer Surveys, Wireframing, Logo Design, Prototyping, Usability Studies, Refinement and Product Mock Ups

Project Overview

Taco Loco is a local taco truck business that has mobile food trucks scattered around Melbourne city. Taco loco attracts waves of city workers, commuters and food enthusiasts with their on-the-go fresh Mexican dishes and community feel.

This is case study project was created during a Google UX Design Academy Course.

Understanding and defining the User

A small group of customers were asked the same list of questions to further understand their pain points when ordering food. The findings from the customer interviews lead to the creation of two user personas, the personas represent a diverse range of customers and highlight common frustrations.

Synthesizing -
User Research

This user group confirmed initial assumptions made. However, the research also concluded that it wasn’t just long order queues and orders issues. There is a language barrier issue and more images of the products would drastically improve the experience.

User Personas created from research findings

The Problem

Customers can be deterred from ordering due to long wait times or errors with group orders.

The Goal

Improve accuracy of group orders and ordering efficiency, primarily the waiting time.

Storyboarding

Big picture storyboarding is utilised to further empathize with the user and look for improvements at all interaction points along the journey.

A small picture storyboard is also sketched to observe the situation solely from the direct user and product perspective.

Competitive Audit

A competitive audit was conducted to compare the mobile ordering experience of existing products whilst gaining insights on how to innovate and improve on my own designs. The UI and UX of competitor companies were evaluated in detail, below is a snippet of the large table matrix used.

Identifying the User Pain Points

Order Wait Time

Users experience long waiting times and queues when ordering. The design will aim to reduce order wait times for customers by creating a mobile ordering system. Pre-ordering is enabled and a QR code to install the app present on site.

Incorrect Orders

Order issues - incorrect or missing items, especially with larger orders. The order errors will be mitigated by reducing human error in the process. Automating the orders straight to a kitchen order docket.

Language Barrier

Customers that do not speak or read English fluently can struggle  being understood and interpreting the menu. A menu translation feature will mitigate this language issue.

Menu Imagery

The taco truck currently has a written menu list with limited images of the order items. Adding quality imagery for all menu items will aid customers decision and encourage additional and alternative purchasing overall.

Starting the Design

Now that the user, their goals and pain points are defined the design process begins!

Quick Idea Generation

Rapid sketching on paper with a focus on quantity and variety of ideas. This exercise encourages unique ideas that can provide great starting points for a potential design solution.

Paper Wireframing

Iterations of paper wireframes were created for each screen of the app to ensure the layout addressed the users common pain points whilst prioritising usability and aesthetic UI elements. For example a consistent large ‘ORDER’ button has been implemented to optimise the ordering process from the Home Screen all the way to the final Order Status Screen.

Screen Iteration

Up to eight different screen and layout designs were drafted before a final UI was selected. The sketches below show some of the iterations sketched for the home screen design.

Initial User Flow created

The primary user flow - Placing an order using the mobile app

Wireframes digitised in Figma

Refined wireframe sketches are placed into Figma for reference when creating digital wireframes.

Small adjustments and spacing enhancements are added to better suit the desired mobile screen size (390 x 844px).

Lo-fi user flow created

Digital wireframes organised into a user flow for placing an order using the mobile app.

Prototyping & usability testing

Interaction testing and running through adding selecting and adding an item to cart.

Testing the checkout and order completion process. Feature exploration such as, slide to remove an item from cart.

From here a Usability Study was conducted

The lo-fi prototype was sent to five participants along with a set of tasks to complete within the product. After two rounds of usability studies were conducted sufficient data could be synthesized and used to further improve the designs.

Results and Findings from the usability studies

Improved Navigation

Users want to be able to undo and updates orders from all checkout screens

Accessibility Considerations

Some users required accessibility features such as a screen reader or language aid

Layout
Legibility

Users felt the layout of the payment and details screen to be hard to read and navigate

Design Refinement

The results from the usability study are then implemented into the design. At this stage branding and colours are also implemented.

Logo & Branding

The  logo was designed to be legible and optimal for mobile, whilst connecting the brand identity of Taco Loco. Fresh food, community and tradition.

Design System and Colour Selection

A colour palette of primary, accent and neutral colours was selected and created into styles within Figma for uniformity and brand guidelines. Font families were also created into styles for the design system.

Hi-fi prototypes ready for further usability testing

Colour, branding and imagery added to the prototypes ready for users to test and experience the product without guidance.

Home Screen - From testing and usability studies design principals such as hierarchy, conformity and negative space were applied. For example the carousel food section now wraps all of its sub elements in a semi-transparent white card.
Order Menu Screen - White cards have been used to frame the images and provide greater context off the background. The transparency and blur effect adds a playful and fun aspect to the design.
Payment Details Screen - Layout changes and overall styling improved the intuitiveness of the payment details screen. Example grey texts prompts the customer of the information that is required to be input to proceed.

Prototype
run-through

Home and Profile screen interactions. The taco truck location finder map saves the customers time on locating nearest food truck.

Adding an item to cart. Order menu and product detail screens explored.

Cart list with itemised costing and quantities to further reduce order errors. Easy slide to remove from cart feature.

Share your order with friends so they can see the itemised cost and view the order status.

Order status animated screen and review order feature.

Custom Illustration

I create my own graphics and illustrations when stock assets aren't suitable. This makes my work truly unique, this also makes it easy to maintain consistency on all illustrations throughout the product.

Accessabilty Considerations

Language

Easily change the language within the app from the primary menu

Legibility

Iconography, imagery and numbers are used as frequently as possible to ensure each feature and screen is legible for users of all abilities and backgrounds 

Vision Impaired

Screen reader and colour blind modes have been included to assist users of need

Language Settings

Prototype showing the language selection and other accessibility considerations such as a screen reader and colour blind mode.

Design Impact

The new app has drastically improved the customer experience and business at Taco Loco. Customers can now pre-order and view waiting times allowing efficient collection of their orders with fewer order mistakes.

“The app has meant I can order before my lunch break then collect it without wasting any time in the ordering line - I highly recommend this app!”

Next Steps

Obtain further feedback from other UX/UI Designers, then look into how the app could be launched.

Test new features, like loyalty deals or points system to encourage uptake and downloads of the app.

Throughout the design process feedback from users always adds a positive new perspective. This meant the design was further refined and constructed avoiding any biases, ultimately improving the experience and the apps success in a real-world application.

Thanks for viewing my case study!

I appreciate the time taken to look through my work. If you want to get in contact hit the 'SAY HI'  button below.