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.
November 2020
Tools
Adobe XD, Illustrator, Photoshop
deliverables
- Logo & brand identity
- Interactive prototype
- Eventual small-scale testing
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:
- Navigate to the “etc” page
- Filter dishes by Vegan
- Check the description page: Does the Vegan Avocado Tostada contain almonds? If not, add one to your order
- Check the order to see the final price of the tostada with tax
- From the “My Order” section, find out what’s in the Pink Señorita drink
- Add one drink to your order
- Check final price, add one more Pink Señorita (2 total) from the “My Order” section
- 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.
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.