The Coaster: Crafting a Digital Experience
A website redesign for a beloved local cocktail bar in downtown Puyallup, bringing their craft cocktail experience online.
What is The Coaster?
The Coaster is a beloved cocktail bar located in downtown Puyallup, Washington. Known for their handcrafted cocktails, intimate atmosphere, and local charm, they needed a website that captures the essence of their establishment and helps them connect with both locals and visitors.
Craft Cocktails
Artisanal drinks
Local Community
Downtown Puyallup
Project Details
UX/UI Designer
2 weeks (2026)
Freelance Project
Figma, Photoshop, Illustrator
Website Redesign, Brand Guidelines
The Challenge
The Coaster's existing online presence didn't reflect the quality and atmosphere of their establishment. They needed a website that would attract new customers, showcase their menu, and communicate their unique brand identity as a craft cocktail destination.
The Goal
Create a visually stunning, user-friendly website that captures the warm, sophisticated atmosphere of The Coaster while providing essential information like menus, hours, and location in an easily accessible format.
Design Process
01. Research & Discovery
I conducted interviews with local bar patrons and analyzed successful cocktail bar websites to understand user expectations and identify opportunities for The Coaster's digital presence.
Competitive Analysis
I analyzed successful cocktail bar websites to understand what works well in the industry.
Death & Co
NYC Craft Cocktail Bar
+ Stunning photography
+ Clear reservations system
- Complex navigation
- Slow load times
The Aviary
Chicago Cocktail Lounge
+ Immersive experience
+ Strong brand identity
- Menu hard to find
- Limited mobile experience
Canon
Seattle Whiskey Bar
+ Great menu presentation
+ Easy to navigate
- Dated visual design
- Lacks personality
Key Opportunity Identified
There's an opportunity to create a website that combines stunning visuals with easy navigation, showcasing the menu prominently while maintaining a mobile-first approach for local customers on the go.
User Interviews
I conducted interviews with 5 local bar patrons to understand their needs and pain points when researching bars online. Here are the key findings:
Menu Accessibility is Critical
"I always check a bar's website before going. If I can't find the menu or hours quickly, I just move on to the next option."
Atmosphere Visualization Matters
"I want to know if a bar is good for groups or more of a date spot. Photos of the space help, but most bar sites don't show enough."
Mobile Experience is Essential
"I hate when menus are PDFs. They're impossible to read on my phone, and I end up just going somewhere else."
Events Drive Repeat Visits
"Events are a big draw for me. Trivia nights, live music, karaoke - I want to easily see what's happening this week."
Design Impacts Recommendations
"I share bar recommendations with friends all the time. A nice-looking website makes me more confident recommending a place."
Survey Results
Survey responses from 5 participants revealed key priorities when evaluating bar websites.
Most Important Website Features
Biggest Frustrations with Bar Websites
Key Survey Findings
All 5 participants ranked menu accessibility and location/hours as their top priorities. The most common frustrations were PDF menus and outdated information, validating the need for a dynamic, mobile-first design approach.
Usability Testing Results
I tested the prototype with 5 users to validate design decisions and identify areas for improvement.
Testing Feedback Summary
What Worked Well
- +"The menu was so easy to find - right there on the homepage."
- +"Love the warm colors, feels like the actual bar vibe."
- +"Works great on my phone, no pinching to zoom."
- +"The photography makes me want to visit immediately."
Areas for Improvement
- -"Calendar could show more events at a glance."
- -"Would like drink prices on the preview."
- -"Happy hour info could be more prominent."
System Usability Scale (SUS) Score
Average score across all 5 participants
User Persona
Based on research, I developed a primary persona representing The Coaster's target audience.
Nadia Lowe
The Social Curator
Background
Nadia treats nights out as carefully planned experiences. She researches bars online before visiting, values atmosphere as much as the drink itself, and almost always makes a reservation. She introduces friends to new spots and considers herself a taste-maker in her social circle.
Goals
- •Quickly assess vibe and menu before deciding to visit
- •Book a table or event reservation without calling
- •Share the bar's page easily with her friend group
- •Discover seasonal specials or upcoming themed nights
Challenges
- •Menus hidden behind a PDF or not updated
- •No clear hours, location, or parking info
- •Sites that feel generic — no sense of atmosphere
- •Can't tell if it's good for a group vs. a couple
User Journey Map
Mapping the user journey helped identify key touchpoints and emotional states when discovering and visiting The Coaster.
Actions
Hears about bar from friend or sees social post
Actions
Visits website, browses menu, checks hours
Actions
Compares with other options, checks events
Actions
Arrives at bar, orders drinks, enjoys atmosphere
Actions
Shares photos, recommends to friends
Feeling
Curious, intrigued
Feeling
Interested but cautious
Feeling
Confident, excited
Feeling
Delighted, relaxed
Feeling
Satisfied, proud
Opportunity
Strong visual brand presence online
Opportunity
Easy-to-navigate menu and clear info
Opportunity
Showcase events and unique offerings
Opportunity
Match digital experience to in-person
Opportunity
Easy sharing and social proof
02. Ideation & Prototyping
Based on my research insights, I developed the user persona and created wireframes to establish the information architecture. I then built interactive prototypes to test the navigation flow and content hierarchy.
Low Fidelity Wireframes
Early wireframes helped establish the information architecture and user flows for the three main pages of the website.
Homepage
Menu Page
Events Page
Key Wireframe Insights
The wireframes prioritize easy access to the menu, clear navigation between pages, and prominent display of events and specials. The homepage hero section was designed to immediately convey the bar's atmosphere, while the menu page uses a sticky sidebar for quick category navigation.
User Flows
I designed intuitive user flows to ensure visitors can easily find information and complete key tasks on the website.
Menu Discovery & Reservation Flow
Event Discovery Flow
Flow Design Principles
The user flows were designed to minimize clicks and make key information immediately accessible. The menu is reachable within one click from any page, and event discovery follows a natural browsing pattern from overview to details.
03. Testing & Iteration
I tested the prototypes with potential users to validate the design decisions and gather feedback. This led to refinements in the navigation structure and menu presentation before finalizing the high-fidelity designs.
Visual Design
Color Palette
Crimson Red
#B51B0F
Cream
#FFF7E3
Deep Plum
#27001F
Blush Pink
#F3B1AA
The color palette was designed to evoke warmth and sophistication - the rich crimson and deep plum create an intimate atmosphere, while cream and blush pink add elegance and approachability.
Typography
Aa
Helvetica
Headlines & UI Elements
Clean, modern sans-serif for clear communication
Aa
Times New Roman
Body Text & Display
Classic serif for elegance and readability
Warmth
Creating a digital space that feels as inviting as the bar itself
Sophistication
Elevated design that reflects the craft cocktail experience
Accessibility
Easy to navigate on any device, especially mobile
Final Solution
Final Screens
The completed high-fidelity designs showcase the warm, sophisticated aesthetic that reflects The Coaster's brand identity.
Homepage
Hero, menu preview, and events section
Menu Page
Cocktails, whiskey, and food categories
Events Page
Calendar view with upcoming events
Homepage Hero
A stunning full-screen hero section with atmospheric photography that immediately conveys the bar's vibe, with clear calls-to-action for menu viewing and reservations.
Interactive Menu
A beautifully designed menu section with cocktail categories, ingredient highlights, and the story behind signature drinks - bringing the craft cocktail experience online.
Mobile-First Design
Optimized for on-the-go browsing with quick access to hours, location, and menu right from the mobile homepage - perfect for locals deciding where to go.
Events & Specials
Dedicated section for happy hour specials, live music nights, and seasonal cocktail features to keep customers informed and engaged.
Project Outcome
This freelance project explores how a local cocktail bar can establish a strong digital presence that matches the quality of their in-person experience. The redesign demonstrates how thoughtful UX/UI design can help small businesses connect with their community online. The project received positive feedback for its warm aesthetic and user-centered approach to local business web design.
View All Projects