Beer Garden App
Beer Garden App
Embedded Files
Created in Figma
Problem
Problem
Users wanted to enjoy the outdoors at the beer garden, not spend time in line while they are trying to relax.
Users wanted to enjoy the outdoors at the beer garden, not spend time in line while they are trying to relax.
Goal
Goal
To create a seamless, all-in-one app that allows users to select and order from their seat in the beer garden.
To create a seamless, all-in-one app that allows users to select and order from their seat in the beer garden.
Understanding the User
Understanding the User
User Research, Personas, Problem Statements, User Journey Maps
User Research, Personas, Problem Statements, User Journey Maps
Ideation - Competitive Audit
Ideation - Competitive Audit
2 Direct Competitors and 1 Indirect Competitor
Starting the Design
Starting the Design
Paper Wireframes, Digital Wireframes, Lo-Fi, Usability Studies
Wireframing
Wireframing
Paper wireframes were initially created with stars indicating features chosen for the final wireframe.
Paper wireframes were initially created with stars indicating features chosen for the final wireframe.
5 frames pic pencil
Lo-Fi Prototype
Lo-Fi Prototype
The low-fidelity prototype had connections for the main user flow through the app to allow for testing on the early concept.
Usability Study
Usability Study
Study prompts and note taking spreadsheet
Research - Affinity Diagram
Research - Affinity Diagram
Results from the usability study were aggregated and analyzed for patterns
Refining the Design
Refining the Design
Mockups, Hi-Fi Prototpye, Accessibility
Iterations After Testing
Iterations After Testing
Before usability study
Before usability study
After usability study
After usability study
Polished mockups with price feature added
Before usability study
Before usability study
After usability study
After usability study
Back button was moved to the left side of screen, subtotal was added for clearer communication
Hi-Fi Mockups
Hi-Fi Mockups
Hi-Fi Prototype Link
Hi-Fi Prototype Link
Hi-Fi Updates:
Clear buttons for easier navigation
Auto tip population and order total
Pricing was added to the beer menu
Payment total listed
Confirmation Page Added
Accessibility Considerations
Accessibility Considerations
Visual Aid
Visual Aid
Arrows and button placements were adjustment throughout the app to help aid in navigation.
Arrows and button placements were adjustment throughout the app to help aid in navigation.
Color Contrast
Color Contrast
Web Content Accessibility Guidelines (WCAG) were used to ensure accessible app color contrast for users with color blindness and eye sensitivity.
Web Content Accessibility Guidelines (WCAG) were used to ensure accessible app color contrast for users with color blindness and eye sensitivity.
Iconography
Iconography
Material symbol Icons were used to help new users navigate through the app and provide an additional cue for specific actions.
Material symbol Icons were used to help new users navigate through the app and provide an additional cue for specific actions.
Going Forward
Going Forward
Takeaways, Next Steps, Let's Connect
What I learned
What I learned
Usability studies are incredibly important in building a product that is truly user focused. Features that are ideated in the beginning often need to be adjusted to better fit the user.
Usability studies are incredibly important in building a product that is truly user focused. Features that are ideated in the beginning often need to be adjusted to better fit the user.
"I like how the payment information is presented, would be helpful if the tip number auto-populates when clicking the tip buttons" - Justin
"I like how the payment information is presented, would be helpful if the tip number auto-populates when clicking the tip buttons" - Justin
Page updated
Google Sites
Report abuse