UX/UI Case Study: Afuera Taquería

UX/UI Case Study:
Afuera Taquería

Start-to-finish UX/UI project with interactive prototype (best viewed on desktop) for a restaurant concept.

There were three main points of focus: a smooth and intuitive user experience, filters for people with dietary restrictions and clearly marked allergen info, and a separate description page for each dish.

Start-to-finish UX/UI project with interactive prototype for a restaurant concept.

There were three main points of focus: a smooth and intuitive user experience, filters for people with dietary restrictions and clearly marked allergen info, and a separate description page for each dish.

when

November 2020

Tools

Adobe XD, Illustrator, Photoshop

deliverables

keywords

mobile-friendly, bright, modern, young, colorful, playful

This is the desktop link to the high-fidelity interactive mobile prototype (opens in a new tab). Clicking an inactive area guides the user through the experience with highlighted hotspots.

See video below for a screen recording of the tested flow.

Instructions:

  1. Navigate to the “etc” page
  2. Filter dishes by Vegan
  3. Check the description page: Does the Vegan Avocado Tostada contain almonds? If not, add one to your order
  4. Check the order to see the final price of the tostada with tax
  5. From the “My Order” section, find out what’s in the Pink Señorita drink
  6. Add one drink to your order
  7. Check final price, add one more Pink Señorita (2 total) from the “My Order” section
  8. Place your order

After coming up with the logo and branding, I sketched out some potential user flows based on the goals of the project.

These goals included a clean and accessible interface, filters for dietary restrictions and clearly marked allergens, and separate pages for descriptions of the dishes.

This exercise brought up some questions:

  • Does the user assume the selected filter is still in place when they select another menu category?
  • How can I ensure the user knows the dish was added to the order?

After coming up with the logo and branding, I sketched out some potential user flows based on the goals of the project.

These goals included a clean and accessible interface, filters for dietary restrictions and clearly marked allergens, and separate pages for descriptions of the dishes.

This exercise brought up some questions:

  • Does the user assume the selected filter is still in place when they select another menu category?
  • How can I ensure the user knows the dish was added to the order?

The first question would be answered in the user testing phase. The answer to the second question is through the use of microinteractions. The little number on the “My Order” icon updates as items are added and the “add to order” button also changes to reflect additions.

Image showing my very organized pasteboard in Adobe XD
My pasteboard organization; screens are arranged by whether or not certain conditions are met
My screens all linked together, automatically through components/interactions and the rest by hand

The screens were set up on the pasteboard according to whether or not certain conditions were met and their position in the flow.

What wasn’t linked automatically through the components that I created was wired together by hand.

© 2023  //  all rights reserved