Case study: Chair 5 Restaurant
A total web design makeover
What is Chair 5 Restaurant?
Chair 5 Restaurant is an American restaurant and bar local to Girdwood, AK. Serving fresh fish, pizza, and burgers in a lodgelike hangout, Chair 5 offers a cozy atmosphere and delicious meals for local Alaskans and visiting tourists.
Role: Researcher, UX/UI Designer
Methods: UX Research, Wireframing, Usability Testing, and Iteration
Timeline: July 2024 - August 2024
Empathize
First, What’s the problem?
The current user interface of Chair 5 Restaurant’s website feels chaotic upon entry. There is too much overlap with the navigation bar, and the home page is overwhelmed with information.
Although well-organized, the website feels like it needs a push in the right direction to make it that much more inviting and attract more customers to the restaurant.
User Research
I set out to understand how users decide to visit a restaurant, focusing on what influences their choices and how Chair 5 Restaurant’s website could improve their chances of attracting guests. Through surveys and phone interviews, I explored how users prioritize factors like price, atmosphere, reviews, and menu when picking a place to eat. I also identified what features on restaurant websites leave a positive or negative impression, revealing key insights and potential challenges. These were the main takeaways:
What qualifies as a ‘good’ restaurant when choosing where to go?
A good restaurant is primarily defined by its food quality, price, and vibe. Many users value an atmosphere that aligns with their personal preferences, and the availability of vegetarian, non-dairy, and gluten-free options is important for those with dietary needs. Additionally, recommendations from friends and family, as well as online reviews on platforms like Yelp and Google, are highly influential in determining whether a restaurant qualifies as “good.” Other key factors include menu variety, operating hours, and location convenience.
How do users compare restaurants online?
When comparing restaurants online, users often rely on Google searches and social media platforms. They evaluate restaurants based on price, ambiance, and online reviews from trusted sources like Yelp and Beli. Menus, including dietary options, play a big role, along with location and accessibility. The overall vibe, based on pictures and descriptions, helps users assess whether the restaurant fits their preferences and expectations.
What stands out about a restaurant website positively? Negatively?
Positively, users appreciate a well-designed restaurant website that clearly showcases the menu, includes high-quality food photos, and provides detailed information about hours, location, and dietary options. Negatively, users are put off by outdated websites, missing information, or difficult navigation. A lack of clear pricing or unclear imagery also leaves a negative impression, as it makes it harder for potential diners to visualize their experience.
Research Synthesis
Insight: Users have difficulty finding and choosing an item for something to eat when navigating through Chair 5 Restaurant’s website.
POV: As a customer looking for a meal at Chair 5 Restaurant, I need to easily find and choose an item to eat on their website so that I can quickly decide on my order and have a pleasant dining experience.
HMW: How might we find an easy way to help users navigate to the menu effectively without having to download it?
Define
Who are we designing for?
In compiling my research findings, I was able to narrow down who my users are, their motivations, needs, and pain points.
Welcome, Annie and Jack.
Meet Annie
The Foodie on a Quest
A lifelong resident of Girdwood, AK, 43-year-old Annie is on a mission to find the best fish and chips in all of Alaska. Already a seasoned foodie, she’s sampled some top spots and is excited to discover her next great meal.
Motivations: her love for food, especially finding the best fish and chips in the state
Needs: great food, fair prices, and a welcoming atmosphere
Pain-points: outdated websites, overwhelming text, and small fonts make it difficult for her to explore restaurants online
Meet Jack
The Hungry Tourist
26-year-old Jack, originally from Golden, Colorado, is on vacation in Alaska. Based in Anchorage, he’s planning a day trip to Girdwood to see the glacier, but needs a place to eat.
Motivations: treating himself on vacation while staying gluten-free to avoid an upset stomach
Needs: affordable, gluten-free meals that won’t break the bank, with a good atmosphere
Pain-points: unsure of local dining standards and unreliable online reviews, especially those based on bad experiences
IDEATE
Sitemap
User Flows
Considering how Annie might want to view the menu to ensure Chair 5 Restaurant has fish & chips, and Jack might want to learn about the history of the restaurant to get a better idea of the dining standards in Girdwood, these flows came to mind: menu navigation and restaurant history.
Low fidelity Wireframes
These were some of the first iterations of the screens Annie and Jack might use when Browsing Chair 5 Restaurant’s website on a mobile device: the home page, the menu, the karaoke setlist, restaurant history, and a contact page. Below are low-fidelity wireframes in a desktop format.
Brand Style Tile
Since Chair 5 Restaurant already has an established brand, I revamped their color palette using colors from various logos found online, and used a font similar to the one found on their current downloadable PDF menu to match.
PROTOTYPE
Lo-Fi Wireframes + Finished Component Library = Hi-Fi Prototype
High Fidelity Prototype
TEST
Usability Testing
Objectives
Determine if the workflow provides a satisfying and smooth experience
Evaluate the ease and efficiency of task completion
Identify any usability issues and and/or pain points
Gather feedback on the application as a whole, if it accomplishes its intended use
Questions
Per Task
Q1: How easy or difficult did you find this task? Why?
Q2: Did anything seem overly complicated or confusing?
Q3: Do you have any questions regarding this task?
After Testing
How does this compare to other restaurant websites you’ve visited before?
Do you have any suggestions for improving the flow of this site and/or the visual design of it?
Do you have any questions for me?
Revisions
1. Add map location to the home page for better visibility
Adding restaurant hours and a map location to the home page was the top priority. In the previous version, users had trouble quickly locating essential information like hours of operation and how to find the restaurant, which could lead to frustration and potentially losing them to other sites.
By clearly displaying both the location, we’ve improved the overall user experience, ensuring quick access to critical information without cluttering the homepage.
Before
AFTER
2. Add Cocktail List and Daily Specials Buttons with Selected State Functionality
Previously, users were confused about which section they were viewing, leading to navigation issues and a less intuitive experience. In the earlier version, the lack of a selected state made it unclear what page or menu section they were on, which could result in frustration.
By introducing these new buttons and a clear selected state, we’ve ensured users can easily navigate the menu, know exactly where they are, and access more comprehensive details without confusion.
Before
AFTER
3. Add Photo Descriptions to Menu Page Images
Adding photo descriptions to the images on the menu page was important, as users previously had difficulty identifying which items they were viewing. In the earlier version, images lacked context, which led to confusion and could cause users to miss out on items they were interested in.
By incorporating clear, concise descriptions for each image, we’ve enhanced the user experience, making it easier for users to connect the visuals with the menu items, resulting in a smoother and more informative browsing experience.
Before
AFTER
The Final Solution
Chair 5 Restaurant: a total web design makeover
Features
In-depth Home and About pages
Interactive hamburger menu
Reduced history of Chair 5 Restaurant and its name
Varied Menu selections, including Food, Beer, Cocktails, and Daily Specials
Event calendar
Map view & restaurant hours
Contact page
Detailed footer found on every page
Next Steps
With this total website redesign for Chair 5 Restaurant, users like Annie and Jack can confidently dine in Girdwood, Alaska knowing they’ve made a good choice.
Whether Annie is looking for the next best fish and chips or Jack is looking for a cost-efficient yet tasty meal, they can use Chair 5 Restaurant’s new website to discover what best suits their needs.
Since the conclusion of this project, from discovery of the issue at hand, defining the problem, developing and delivering a solution, and launching and iterating on the final prototype, next steps include handoff to developers, where the designs may be implemented and launched to real-life Chair 5 Restaurant customers!