Introduction
The Problem
Grawlix Cocktail Bar has an outdated and ineffective website, which did not reflect its unique atmosphere or the quality of its sophisticated menu. The website lacked user-friendly navigation, an engaging "About Us" page, and a functional online reservation system. These gaps were causing a disconnect between the bar's in-person experience and its digital representation.
The Solution
Redesign the website to reflect the bar’s identity, improve user experience, and streamline online bookings.
Target Market
Cocktail bar enthusiasts, speakeasy goers, and event planners.
User Research
OBJECTIVES
01
Identify the competition
02
Determine motivations for going to a cocktail lounge.
03
Find any painpoints and key insights
Competitive
Audit
The competitive analysis focused on four prominent bars: The Spaniard, The Happiest Hour, The Dead Rabbit, and Sunset Bar, examining their strengths, weaknesses, and opportunities, with a particular emphasis on their websites.
Each competitor excelled in providing detailed menu descriptions, and online reservation systems. The analysis emphasized the importance of integrating high-quality visuals, interactive features, and a compelling "About Us" page to create a more engaging and user-friendly online experience.
.png)
_edited.png)
I interviewed five individuals who frequent speakeasies or cocktail bars. The insights gained were critical in understanding a user's willingness to try a new cocktail bar based on their website alone.
Interviews
Key Insights
Visual Appeal
High-quality images of cocktails and ambiance greatly influence user decision-making.
Brand Identity
Users expect a website to reflect the bar’s branding and atmosphere.
Ease of Navigation
Users need straightforward access to key pages like the menu, reservation system, and "About Us."
Reservations
Online reservations increase the likelihood of visits by 80%.
Define
After completing our research, I gathered the shared user needs and pain points and organized them into an affinity map, which helped shape a universal persona. From there, we used POV and HMW statements to guide and refine our design approach
.jpg)
Affinity Mapping
-
Website Importance:
-
Users emphasized that the website plays a crucial role in their decision to visit a bar, especially if it gives an authentic sense of the venue's vibe
-
-
Key Information Sought:
-
Users frequently looked for detailed menu descriptions, location information, and special events on a bar’s website
-
-
Online Reservations:
-
Convenience in booking a table or event online was a recurring theme, with users expressing frustration when this feature was missing
-
-
Visuals and Presentation:
-
High-quality visuals significantly impact users' perception of a bar. Photos of the venue, drinks, and food need to be clear and reflective of the bar's identity
-
-
About Us Page:
-
The need for an engaging "About Us" page came up often, with users wanting to feel connected to the bar’s story and uniqueness
-
_edited.png)
Pain Points
Time Management
Efficiency in learning and time management is a common concern. They all want resources and tools that help them make the most of their limited free time.
Pain Points
Flexibility
All participants appreciate flexibility in their learning approach. They have busy schedules and need learning resources that can adapt to their availability and preferences.
Pain Points
Stress of Learning
Several participants mention experiencing stress during the learning process. Overcoming this initial stress is a shared challenge, and addressing stress management could be a key consideration in designing learning resources.
Pain Points
Work life balance
Several participants mention experiencing stress during the learning process. Overcoming this initial stress is a shared challenge, and addressing stress management could be a key consideration in designing learning resources.
Lets Explore
-
Users want a visually appealing and intuitive website that showcases the atmosphere of Grawlix, especially since the website plays a significant role in their decision to visit a bar.
-
Users expressed frustration with the lack of detailed menu descriptions and photos, leading to confusion when deciding whether to visit.
-
The inability to make online reservations easily was a recurring issue, leading users to reconsider visiting on busy nights.
How Might We
use visuals and storytelling to capture Grawlix’s speakeasy vibe, ensuring users feel connected to the experience before they even walk in?
How Might We
provide a well-organized and informative menu with photos and detailed descriptions to enhance decision-making for potential customers?
How Might We
How might we integrate an online reservation system that allows users to book tables or special events easily?
Design
OBJECTIVES
01
User Flows
02
Low Fidelity Wireframes
03
High Fidelity (Mobile & Desktop)
04
Branding
User flows
The user flow for the Grawlix website was designed to ensure a seamless and intuitive experience from the moment users land on the homepage. The primary goal was to make it easy for users to explore the menu, learn about the bar’s unique atmosphere, and make reservations effortlessly. The flow begins with a clear navigation bar, directing users to key areas such as the menu, "About Us" page, and reservation system. Each step of the flow was designed to minimize clicks and distractions, guiding users through a logical and efficient journey—whether they’re browsing signature cocktails, learning the bar’s history, or booking a table. This user-centric flow ensures that information is accessible and the path to reservations is as streamlined as possible.
PROTOTYPING
Key Design Choices
Online Reservations
A straightforward, mobile-friendly booking system with instant confirmation.
Detailed Menu
Photos and descriptions of signature cocktails to entice users.
Storytelling
A visually immersive "About Us" page that highlights Grawlix’s history.
Merch
Added pictures to the merch so users can see what they are buying (which the original site didn't have)
Challenges Identified
User testing was conducted on high-fidelity prototypes, focusing on navigation, content understanding, and overall user satisfaction. Five users completed key tasks such as locating the menu, booking a table, and reading the bar’s story.
Hard to read
Increase font size for better readability on the desktop
Heirarcy
On the menu screen, the large photo on the left is too bright and/or big, distracting gaze from the cocktail descriptions.
Navigation Bar
The navigation bar was still the same as mobile.
Excessive Whitespace
The merch page on the desktop has excessive black space and suggest enlarging the photos for better focus
Based on the usability testing feedback, we made the following changes:
Navigation & Image
I chose to turn the volume down on the menu picture to help direct your attention toward the food and drink section of the screen. Additionally, I updated the navigation to span across the top of the screen for easier access, ensuring it's always available
.png)
After
Fixing
Visability
Increased the font size across the entire website for better readability
After
.png)
Eliminating
Unnecessary
Space
Removed the excess white space on the Merch page and also enlarged the photos for better visibility.
.png)
After
.png)
Lessons and Revisions
During the Grawlix website redesign, a few key takeaways stood out. The dark theme really struck a chord with users, perfectly capturing the speakeasy vibe and creating an immersive feel. While the navigation and functionality were mostly spot on, testing highlighted a few areas for improvement, like adjusting readability and photo placement.
Adding a well-crafted "About Us" page turned out to be a game-changer, helping users feel more connected to the brand. The new online reservation system, which had been a major pain point, also made a big difference, making the whole experience much smoother.
The process of reimagining the website’s role in the community was incredibly rewarding, and I’m confident that, when launched, it will help make Grawlix a go-to spot for locals looking for an inviting, memorable experience.
Before Re-design
Redesigning Grawlix's Website
Grawlix Cocktail Lounge, a speakeasy-style bar in Dripping Springs, Texas, is known for its intimate atmosphere and expertly crafted cocktails. To match its growing popularity, the bar required a refreshed, fully responsive website that authentically reflected its unique identity.
The project aimed to capture the bar's exclusivity and modern flair through sleek design, high-quality visuals, and seamless navigation, ensuring a cohesive experience across all devices. The new site would allow users to explore the menu, plan visits, and make reservations while bringing the elegance and charm of Grawlix’s physical space to the digital realm.
.png)
Branding
& Components
The visual design focused on Grawlix’s sophisticated and secretive speakeasy vibe. I used a dark theme with high-contrast imagery to evoke elegance and mystery.
