Beer Garden Website
Beer Garden Website
Embedded Files
Created in AdobeXD
Problem
Problem
Current competing breweries have busy and overwhelming designs. Ordering can sometimes be difficult to complete online or through a mobile web browser.
Current competing breweries have busy and overwhelming designs. Ordering can sometimes be difficult to complete online or through a mobile web browser.
Goal
Goal
Design a Beer Garden website that is simple, intuitive, and eye catching. Create an accompanying version that is mobile friendly as well.
Design a Beer Garden website that is simple, intuitive, and eye catching. Create an accompanying version that is mobile friendly as well.
Understanding the User
Understanding the User
User Research, Personas, Problem Statements, User Journey Maps
User Research, Personas, Problem Statements, User Journey Maps
User Pain Points
User Pain Points
Navigation
Navigation
Menus that are clear and focus on essential click through buttons
Simple to use
Simple to use
Users want a simple, intuitive website
Aesthetics
Aesthetics
Most websites can lack a fun and creative aspect
Research Persona
Research Persona
Research User Journey Map
Research User Journey Map
Competitive Audit
Competitive Audit
Website Analysis of one indirect competitor and two direct competitors
Website Analysis of one indirect competitor and two direct competitors
Starting the Design
Starting the Design
Sitemap
Sitemap
Simple information architecture that is user friendly but doesn't overwhelm
Wireframes
Wireframes
Paper Wireframes of intended main user flow - star Indicates features chosen for prototype
Responsive Design Wireframes
Responsive Design Wireframes
Wireframed on grid paper
Digital Wireframes
Digital Wireframes
Main homepage wireframe
Lo-Fi Prototype
Lo-Fi Prototype
Conducting the Usability Study
Conducting the Usability Study
Usability Study Prompts
Usability Study Prompts
Usability Study Affinity Diagram
Usability Study Affinity Diagram
Usability Study Findings
Usability Study Findings
1) Quantity Function Needed
1) Quantity Function Needed
Once at the checkout screen, users didn’t have a way to edit the quantity of items in the cart
Once at the checkout screen, users didn’t have a way to edit the quantity of items in the cart
2) Flyout menu
2) Flyout menu
Users weren’t able to easily copy the shipping address information into the billing info field, duplicate fields were removed
3) Order Again
3) Order Again
Confirmation page didn't encourage reordering and if a user wanted to reorder they had to repeat the process of ordering all over again
Refining the Design
Refining the Design
Before Usability Study
Before Usability Study
After Usability Study
After Usability Study
Users wanted an easier to access the menu after ordering
Before Usability Study
Before Usability Study
After Usability Study
After Usability Study
To make adjusting beer quantity easier I added a function where guest can type in their quantity
Accessibility
Accessibility
Information Architecture
Information Architecture
Header menus, title, and text all have different font sizes
Z layout
Z layout
Common Z layout to easily guide users through the site
Hi-Fi Prototype
Hi-Fi Prototype
The Beer Garden Hi-Fi prototype had design updates to aid accessibility and user flow. Simplicity and visual appeal were emphasized in final updates.
Desktop Mockups
Desktop Mockups
Responsive Design
Responsive Design
IPad Tablet Mockup
IPhone Mockup
Going Forward
Going Forward
What I learned
What I learned
I learned that focusing on the small details matters to the users. Small changes can have a big impact on the user experience.
A great designer strives to put themselves in a user's shoes and considers different types of technology users utilize.
Page updated
Google Sites
Report abuse