Responsive Website Design
User Research
UX/UI Design
Branding
Prototype and User Testing
4 WEEKS
Tools: Figma, FigJam
Zoom, Otter AI, Visual Electric
Background
Vision Quest Brewery located in Boulder Colorado has been in business since 2014. Their website has changed very little since they established their experimental brewery and community nexus.
Context
Insight #3
Event information clarity, legibility, and larger spacing were identified as areas for improvement.
The current event page is confusing to the users and could benefit from something easier to engage with.
4 out of 5 users expressed the need for clarity in events and details.
Insight #4
Users expressed the disconnect between the website and the essence of the brewery.
The current website has a limited history of the brewery. It fails to mention its connection with Boulder Fermentation Supply.
5 out of 5 users expressed the website doesn’t reflect the Vision Quest brewery they know.
Interviews
6 regular patrons were asked to share their thoughts about the current website.
User interviews were conducted in person at the brewery, providing an opportunity for direct interaction and a more engaging experience. This setting allowed participants to share their thoughts and experiences in a relaxed atmosphere, fostering open and honest dialogue.
The owner was also interviewed so future design changes could also align with the ultimate stakeholders goals.
Sample interview questions
Do you visit other brewery websites in Boulder or nearby areas?
What features or aspects do you find appealing on those websites that you would like to see incorporated into Vision Quest's site?
How would you describe the atmosphere and character of Vision Quest Brewery based on your experiences?
To what extent do you feel the current website reflects the brewery's unique identity?
What comes to mind when you think of Vision Quest?
What challenges or difficulties have you faced while using the current website?
Can you recall a specific instance where you felt frustrated or confused while navigating the website, If yes, can you please explain in detail?
Which features do you wish were more prominent or easier to access?
Have you attended any events at Vision Quest? If not, Why?
Have you attended events or participated in activities promoted on the website? If yes, what events?
How do you usually discover upcoming events or promotions at Vision Quest Brewery?
Is there anything about the current website that encourages or discourages your participation?
Affinity map
Insight #1
Users faced challenges in finding the location and hours information on the website.
Ensuring that the location and operating hours are clearly visible is crucial and achievable across multiple locations.
5 out of 5 users expressed the need for better navigation to find location and hours.
Insight #2
Users shared a sense that the beer menu was hard to read, pictures were inconsistent.
Various fonts and lack of contrast is limiting the beer menus readability.
5 out of 5 participants found the beer menu hard to navigate and read, agreeing on necessary improvements.
Key insights
Point of View Statement
For users exploring local breweries online, the cluttered design and inconsistent navigation of Vision Quest Brewery's website hinders their ability to quickly find essential information, leading to frustration and potential loss of interest.
How Might We?
How might we optimize the website's layout and navigation to provide a seamless and intuitive user experience for individuals researching local breweries, ensuring that they can quickly find essential information and develop a positive impression of Vision Quest Brewery?
Discovery
Defining the user
Based on findings from the research phase, I defined two personas, a out of town potential visitor and a regular patron.
What else is out there?
Prior to user interviews, I completed a competitive analysis of other breweries websites in the area. The goal of this stage was to understand how other breweries define their online presence.
Problem
Despite having a inviting brewery, Vision Quest struggles with a confusing website. Customers find it challenging to navigate the website and locate essential information.
This difficulty results in decreased foot traffic to the brewery and missed opportunities for sales and community engagement.
New visitors, potential customers, and community members are impacted by the current design.
Key Takeaways
Competitors shared similar features
Accessible beer menu.
Upcoming events and community outreach.
A intriguing bio or about section.
Pertinent information about hrs, location and contacts.
Recommendations Summary:
Prioritize usability and simplicity in website features and design.
Optimize the beer menu layout for better readability and user-friendliness.
Align the website design with the brewery's welcoming and experimental character.
Develop a robust "About Us" section to convey the brewery's story and identity.
Improve the display of location and hours information.
Enhance the calendar page for events with a more intuitive format.
Strengthen social media engagement for community building.
User and Business Goals
Based on information from research and interviews, I defined the goals of Vision Quest and it’s users. I then identified their common goals.
The project also aims to bridge the gap between the online representation and in-person experiences, ensuring a seamless transition for users exploring the website and visiting the brewery.
Goal
The redesign project aims to improve website navigation and accessibility to enhance user engagement and drive more foot traffic to Vision Quest Brewery.
The refined project goals, derived from insights gathered in user interviews, aim to elevate Vision Quest’s Brewery's online presence and strengthen its brand identity.
Problem and Goal
Research
What features should be prioritized?
Based on the research I prioritized features that brought the most value to the business and users.
Enhanced navigation gaining the highest priority based of the 5 out of 5 interview participants having had difficulty navigating the website. Next most important features were a solid home page and a About Us page, 4 out of 5 users expressed the importance of these pages and how they specifically needed improvement. Lastly is the Events page, though its is extremely important to the website and the owner, interview participants did not prioritize it because they are all regular patrons who do not rely on a calendar or social media accounts to visit the brewery.
From concept to working prototype.
Creating the Framework
Once feature set was established, I created a Site Map and User Flows to form the frame of the project.
The website was broken into 4 main sections
“About” section was developed where there wasn’t one originally.
“Events” page where users can find out whats happening.
“Visit” page where all pertinent information about location and hours lives.
“Beers” page where all the breweries current offerings are on display
User flows
The three user flows reflect the two personas. The regular patron is wanting to know the latest beer on tap and a out of town visitor is looking for basic information like location, hrs and possible events.
Turning Sketches Into Prototypes
Before starting any digital work, I sketched out ideas for different variations of how the desktop and mobile versions would operate and feel.
Variation #1: High contrast.
Sketches to mid-fidelity
Next I explored two variations mid-fidelity wire frames and used them for early usability testing.
Variation #2: More white space.
Mid-fidelity usability test
With the wire frames I explored different takes on composition and contrast. I laid out two ways to present the beer menu, about us, events, home and visit us pages.
Usability tests helped me realize the following observations:
Hybrid "Events" page with list and calendar was the preferred layout by all 5 out of 5 participants.
Finding location and hours was achieved by all 5 out of 5 participants.
4 out of 5 participants intuitively identified social media links.
Version 2 "About" section was the favored iteration of 4 out of 5 participants.
Navigation tabs were not intuitive, leading to confusion with 4 out of 5 users when finding specific information like event details and brewery information.
3 out of 5 participants expressed difficulty finding the navigation bar.
3 out of 5 participants struggled to locate the beer menu initially due to its placement on the homepage.
The lack of visual hierarchy made it challenging to prioritize information on the page.
Design
Strengthening Vision Quest’s Brand
Clarify and Simplify
In this website redesign, I rebuilt what Vision Quest Brewery already had and added a new “About” and “Visit” page.
I stayed true to some of the existing graphics and color palette while simplifying their font selection for maximum accessibility.
Home page
About page
On Tap
Visit Us
Initial prototype
The top navigation is simplified into 5 main pages
Home
About
Events
Visit
On Tap
The landing page received a fresh clean look. Their iconic logo is front and center followed by hours of operation and a prominent CTA leading users to whats on tap, a main reason why 6 out of 6 of those interviewed were most inclined to visit the website.
The About page was added to really showcase Vision Quest’s story. This page was born from the 4 out of 5 interviewees feeling that their current story section did not do the brewery justice. It failed to fully explain how they started and what their relationship with the fermentation supply company is.
Original pictures were outdated, so fresher more recent photos were added here.
The On Tap menu is far and away a central fixture for the breweries website. The old website beer menu was hard to read and distracting based on the interviews. 4 out of 5 participants found it hard navigate, reasons being based on fonts, colors and out of place images.
Beer tiles were created with a picture of available beer and a clear description.
A way to easily filter between styles of beer was made accessible at the begining of the beer list.
The Visit Us page is an important page, it is home to necessary information commonly searched by current and potential customers. Information like hours and location were deemed highly difficult to find by 4 out 5 participants in the research interviews.
All the useful information a user would want is front and center on this page, a lighter text color was used indicating clickable links.
Initial prototype
Home
On tap
Events
Mobile screens
Age verification
The Events page has a current calendar as the focal piece when viewing the page. A upcoming events calendar with available food trucks, links for social media accounts are all here based on 5 out of 5 of the interview participants.
A section high-lightening coming soon events was added based on 4 out of 5 users suggested feedback
Does it work?
User testing
After the initial prototype was complete, it was tested via Zoom with 5 participants.
Each participant was asked to complete five tasks:
Navigate the landing page: Start by exploring the landing page. Take note of any initial impressions or difficulties encountered.
Find the beer menu: Locate the beer menu on the website. Select a specific type of beer to view details.
Find operating hours and location: Determine the brewery's operating hours and location. Note where this information is found and how easy it is to locate.
Discover upcoming events: Identify upcoming events hosted by Vision Quest Brewery. Navigate to the events section and select an event for more details.
Responsive mobile: Navigate from landing page to current beer menu.
Prioritization matrix
Recommendations for Improvement:
The usability testing sessions conducted with various participants revealed several common themes and areas for improvement in the Vision Quest brewery website redesign. Across the sessions, participants expressed a need for enhanced clarity, ease of navigation, and improved accessibility.
In order of priority from highest to lowest.
4 out of 5 participants felt that the navigation tabs could be more clearly labeled
3 out of 5 participants thought the hours should include closing time.
2 out of 5 participants expressed to Integrate social media links more prominently for increased visibility.
2 out of 5 participants said I should reorder beer menu categories for based on light to darkness.
Iterations
Post usability test
Iterations were made based on valuable feedback received.
Age verification
Before
Home
Events
Before
Visit
Based on feedback from participants the age verification page background color was changed for better visual appeal. 2 out of 5 user thought something cooler would feel more welcoming
After
On Tap
About
The hours now includes time the brewery closes.
3 out of 5 users expressed that a closing time would be useful on the homepage.
Events “Whats happening” CTA is now a secondary button making it easier for users to find. From the usability test 2 out of 5 participants expressed the feeling that it should be more prominent.
The social media links are more prominent higher on the page.
The calendar was deemed hard to read by 3 out of 5 participants. The fonts size was increased and the food truck info received its dedicated space to free up space for other text.
Coming soon events have been edited for clarity, each event gets only one coresponding image.
Based of comments by 2 out of 5 participants.
Visit page turned into Tap Room based on 3 out of 5 participants thoughts.
To avoid confusion only clickable links are treated with the blue text color.
Header image was also darkened for readability while the text was changed to bold for added contrast.
Based on 2 out of 5 participants feedback about the size of the photo gallery controls the navigation buttons were increase in size.
Header image was darkened for readability while the text was changed to bold for added contrast.
The beer filter tabs were organized from light beers to darker beers based on feedback received by 3 out of 5 participants as well as the listed beers.
Readability and visual appeal were the focus of edits.
The images now line up together.
The text boxes have been shrunken for visual appeal.
Header image was lightened for visual appeal while the text was changed to bold for added contrast.
Dog background image enlarged and lightened for visual appeal.
After
Before
After
Before
After
Before
After
Before
After
Final prototype
Whats next?
Upon completion of the UX project for Vision Quest Brewery, the next steps will involve integrating the next items on feature set.
Development of the Fermentation Supply Companies website.
Virtual tour of the brewery facilities. High-quality images showcasing the brewing process and interior design. Video content highlighting the brewery's unique features and atmosphere.
Retail distribution information about where users can get their beer outside the brewery.
Prominent display of ongoing specials, discounts, and brewery promotions. Subscription option for newsletters and exclusive offers. Coupon code integration for online and in-person purchases.
Online store for users to purchase brewery merchandise.
Lessons learned?
This project has significantly contributed to my growth as a UX designer, offering numerous learning opportunities along the way. One of the most significant learnings was honing my skills in user research and understanding the intricacies of user behavior and preferences. Through conducting surveys, interviews, and usability testing, I gained a deeper insight into how users interact with digital platforms and the factors that influence their decisions.
What I particularly enjoyed about this project was the creative freedom it allowed me. Redesigning the Vision Quests website provided me with the opportunity to explore innovative design solutions while keeping the user experience at the forefront. It was gratifying to see ideas come to life and witness how they positively impacted the overall user journey.
However, this project was not without its challenges. One of the main hurdles was reconciling diverse user perspectives and preferences. Balancing the needs of different user segments while maintaining coherence in the design was a delicate task that required careful consideration and iteration.
Aligning design solutions with identified user needs and goals was a paramount focus throughout the project. I continuously referred back to user feedback and research insights to validate our design decisions. Techniques such as persona creation, affinity mapping, and prototyping helped me visualize and refine the user experience iteratively.
Inevitably, there were trade-offs that had to be made during the project. For example, I had to balance aesthetic appeal with usability, ensuring that the design was visually engaging without compromising on accessibility and ease of navigation. Decisions were approached collaboratively, weighing the pros and cons against the project objectives and user requirements.