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.


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


Problem statements

User journey maps

Starting the design

Initial design concepts

Digital wireframes

Low-fidelity prototype

Usability studies

Refining the design


High-fidelity prototype



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.


User research: pain points



Don't want to spend a lot of time reading the menu.



The menus have a lot of words, and text-heavy menus in the app are often difficult to read an order from.



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.


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!