Afuera Taquería:
Brand Identity, Menu Design, UX/UI
Afuera Taquería:
Brand Identity, Menu Design, UX/UI
Restaurant concept developed from the brand and menu through a fully interactive mobile ordering experience.
The ordering flow prioritizes ease of use, dietary and allergen information, and detailed descriptions for less familiar dishes.
Restaurant concept developed from the brand and menu through a fully interactive mobile ordering experience.
The ordering flow prioritizes ease of use, dietary and allergen information, and detailed descriptions for less familiar dishes.
November 2020
Tools
Adobe XD, Illustrator, Photoshop
deliverables
- Brand identity
- Menu design & development
- Interactive prototype
- User testing
keywords
mobile-friendly, bright, modern, young, colorful, playful
This is the sequence that I tested. I took notes on the experience and made adjustments to the final product.
Individual dish views give users more information without losing their place in the menu.
Each includes a description, ingredients, dietary and allergen information, with a direct option to add the dish to their order.Visual Identity
Before any user testing or thinking about interactions, my focus was on the logo and brand design. The restaurant’s younger target demographic and trendy location informed my color scheme, with bright, poppy colors drawn from traditional Mexican crafts.
User Flow + Wireframes
Early sketches helped establish the ordering flow and work through the main functionality.
Priorities included simple navigation, dietary filters, clear dish and allergen information, and an intuitive clear path from browsing to checkout.
KEY CONSIDERATIONS:
- How should dietary filters behave as users move between menu categories?
- How can the interface clearly and instantly confirm that an item was added to the order?
User Flow and Wireframes
Early sketches helped establish the ordering flow and work through the main functionality.
Priorities included simple navigation, dietary filters, clear dish information, and an clear path from browsing to checkout.
KEY CONSIDERATIONS:
- How should dietary filters behave as users move between menu categories?
- How can the interface clearly and instantly confirm that an item was added to the order?
Interaction Design
I really focused on building the interactive prototype to make the ordering experience feel as seamless as possible. Feedback and transitions were carefully designed to provide continuity as users move through the menu and build their order.
These interactions include:
- persistent dietary filters
- detailed dish views with listed allergens
- immediate add-to-order feedback
- live item counts, quantity controls, and updated order totals
Interactions: Dish Transitions
Individual dish views give users more information without losing their place in the menu.
Each includes a description, ingredients, dietary and allergen information, with a direct option to add the dish to their order.
Interactions: Dish Transitions
Individual dish views give users more information without losing their place in the menu.
Each includes a description, ingredients, dietary and allergen information, with a direct option to add the dish to their order.
Interactions: Cart Additions
Adding or updating an item provides immediate visual feedback throughout the ordering experience.
Order counts, quantities, item states, and totals update as the order changes.
Interactions: Cart Additions
Adding or updating an item provides immediate visual feedback throughout the ordering experience.
Order counts, quantities, item states, and totals update as the order changes.
Artboard Linking
The screens on my pasteboard in XD are set up and named according to whether or not certain conditions are met and their position in the flow.
What wasn’t automatically linked through the components I created I wired together by hand.
