Barberitos:

A new (burrito) skin

My role: Lead UI/UX Designer

*Due to an NDA, I can’t show you everything that went into this project. Read the case study here, or reach out to learn more.

CONTEXT

Although the old Barberitos app was functional, tex-mex fans and Barberitos HQ alike had several main complaints:

Customers couldn’t place orders through the app. As evidenced by the app store comments below, this really irked Barberitos patrons.

Users could see the location of various Barberitos restaurants– but there were no options for users to call or get directions to the restaurant.

Users couldn’t scan in-store QR/barcodes at restaurants.

The branding on the app was outdated and did not reflect Barberitos’ current branding guidelines.

GOALS + OBJECTIVES

⭐️

Implement a new order ahead flow allowing users to place and schedule orders

⭐️⭐️

Simplify the mobile user experience by adding clear CTAs

⭐️⭐️⭐️

Improve the look & feel of the Barberitos app, reinforcing key branding elements.

ONBOARDING

Previously, the app would just open right into the home page.

We implemented a series of tutorial screens to be displayed the first time a new user opens the Barberitos app, directing users to the main app functionalities.

HOME PAGE

Instead of a static image, there is a carousel of images on the new homepage, meaning Barberitos can feature three promotional campaigns at once.

We put large CTAs to the most popular and most frequently used functions.

ORDER AHEAD

We implemented a new order ahead flow that allows users to select their Barberitos restaurant, schedule an order for a specific time/date, or order for pickup ASAP.

REWARDS SCREEN

We also rearranged the hierarchy of information to focus on the actual percentage instead of Pepe, the beloved mascot (sorry Pepe).

We added burrito status levels, reward tiers users can unlock after reaching milestones in their Barberitos careers.

SCAN QR CODE

Users could continue to scan to pay with their Barberitos app, but we expanded upon the original functionality by offering loyalty points as well.

LOCATION SERVICES

We updatded the location screen to include Pepe icons with indicator states.

CONCLUSIONS / KEY TAKEAWAYS

The Grubhub enterprise team is an agency organization, meaning we design apps for a variety of clients. This was my first time working on an agency team, and I learned a great deal about the importance of communication not only within the product/design team, but also with the clients themselves. What we think is best as designers is not always the right fit for the client, and it is our job to make sure their voices are heard and championed in the app.

Design without attachment. Realize that what you make today could easily be shelved tomorrow, and put aside your ego to become a better listener, communicator, and designer.

Something I thought would be as simple as a new button shape or an extra feature could actually create a ton of new work for developers, so it’s important to follow the SDK and communicate often with product managers and developers to see what can/can’t be done. It’s better to have these conversations earlier rather than later so you can better understand the limitations of the functionalities of your designs.