Menu app for a beer-garden.
Beer Garden is located in the suburbs of a metropolitan area, they offer different and new types of artisanal beers and food. Beer Garden targets customers like young people who enjoy tasting new beers and prefer to spend more time socializing with their loved ones than reading the menu.
My role:
UX designer designing an app for a Beer Garden menu from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The problem:
Hesitant and busy customers who wants to spend less time looking at the menu and ordering.
The goal:
An easier way to order that makes the customers feel like deciding what to order could be fun, quick, and easy.
Understanding the user
User research
Personas
Problem statements
User journey maps
Starting the design
Initial design concepts
Digital wireframes
Low-fidelity prototype
Usability studies
Refining the design
Mockups
High-fidelity prototype
Accessibility
Takeaways
Next steps
What I learned
Understanding the user
User research: summary
The primary user group is young adults who don’t want to spend too much time looking at all the options and reading all the menus from a restaurant. This user group enjoys trying different options of food.
The user problems, like too many words in the menu, sometimes make it hard to choose one option quickly, or waiters who tend to speak too fast the options from the menu and letting no time for the customer to think with a calm about what to order.
Personas
User research: pain points
1
Time
Don't want to spend a lot of time reading the menu.
2
Accessibility
The menus have a lot of words, and text-heavy menus in the app are often difficult to read an order from.
3
Choices
The menus from apps have a lot of options, there is no way to filter an option that adapts it to your preferences for food.
Starting the design
Initial design concepts
In the first phase, I based the designs on feedback and findings from user research.
I created an easy way to choose from the menu and place an order by yourself.
For the home screen, I added a button that was easy to find and the user can access quickly to the menu.
Digital wireframes
Usability study: findings
Round 1 findings:
1 User was confused about the way to add items
2 Users want another confirmation page when they finished their order
3 Users want to create a new profile in a more intuitive way
Round 2 findings:
1 The "go back" option was difficult to find
2 Difficulties to know what to do next to get the end
Refining the design
Key mockups
After usability studies, I changed the way you can add items to the cart, also I changed the colors and shapes of the arrows and improved the cues of the process.
High-fidelity prototypes
The final high-fidelity prototype presented better cues for the steps to make an order. It also meets the user's needs for order quick and easily enhancing their ordering experience.
Detailed imagery for the options in the menu to help all users see the menu faster without having to read all the descriptions to get to know the options.
Accessibility considerations
1 Provides access to users who are vision impaired through adding alternative text to images for screen readers.
2 Used icons to help make navigation easier.
3 Used detailed imagery for the options in the menu to help all users see the menu faster without having to read all the descriptions to get to know the options.
Takeaways
Next steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
What I learned
I learned throughout the project that when you make usability studies you can learn more about your user's needs and how the users are going to interact with your design, this usability study allows you can have another vision of the design that you are creating.
Thanks for watching!