[Case 03]
Mercury's Coffee Co.
Local Coffee Shop Website
Increased user engagement by 45% by redesigning the website
Redesigning a Local Coffee Shop Website
[Project Overview]
Mercury’s Coffee Co., a local café in Woodinville, WA, needed a website that reflected its brand and quality. I redesigned the site to improve user experience, navigation, and overall functionality. Through user research and prototyping, the new design offers intuitive and cohesive interactions. The updated platform mirrors the café’s warmth and enhances the online experience for visitors.
[Problem Statement]
I’ve visited many times and always enjoyed their coffee and bakery items. While their physical locations are welcoming and nicely designed, the website doesn’t match. The header has extra pages, the layout feels plain, and the colors don’t show their focus on natural, minimally processed, organic ingredients.
[Opportunity]
How can I create a visually appealing design to enhance user friendliness and increase user engagement?
[Business Model]
Local Coffee Shop Website
[My Role]
Lead UX/UI Designer
[Platforms]
Desktop, Tablet
[Timeline]
July 2025 - Sep 2025
[Process]
[01] Empathize
a. Competitve Analysis
To understand how other applications handle their content, I analyzed the weaknesses and strengths of 5 competitors.
b. User Interviews
Research Goal
After analyzing the competitors, I wanted to learn about customers' coffee shop habits and their experience with Mercury's Coffee. To gather this information, I conducted a structured interview focusing on various aspects:
Frequency of Coffee Shop Visits
Website Usage: For those who visited Mercury's website, questions were aimed at understanding their primary use of the website, features they found helpful or frustrating, and the ease of finding relevant information such as location, menu, and hours of operation.
In-Person Experience
Desired Features or Services: Participants were asked about specific features or services they wished Mercury's offered, either online or in-person, to identify potential areas for enhancement.
Importance of Online Ordering and To-Go Options: Understanding the importance of online ordering or to-go options provided insights into participants' convenience preferences.
User Interviews
I went to a coffee shop and chatted with random people. I was nervous at first, but I warmed up to it as time went on.
c. Reflection
Participants provided diverse perspectives on their experiences with Mercury's Coffee Co. While some visit regularly, others were less frequent visitors. Common themes included appreciation for the coffee shop's atmosphere and quality offerings, along with suggestions for improvement such as enhancing website usability, expanding menu options, and implementing online ordering and loyalty programs. Overall, participants value Mercury's Coffee for its ambiance and quality but suggested enhancements to better meet their preference and convenience needs.
[02] Define & Ideate
a. Persona
Based on the results of user interviews and affinity maps, I created a persona to comprehensively understand the desires, goals, and pain points of our potential users.
Emily
Graphic Designer
I’m a coffee lover who enjoys ordering ahead and browsing simple online menus to decide what to get.
Age: 26
Location: Seattle, WA
Introverted, Creative, Detail-Oriented Person
Gender: Female
[Goal]
Find a coffee shop with a calming environment where she can relax and enjoy quality coffee and desserts.
Browse the menu online before visiting to ease social anxiety.
Ensure a smoother ordering process without having to navigate a noisy environment.
[Frustrations]
Difficulty in deciding what to order without visuals of the menu items on the website.
Frustrated by the lack of online ordering options, making the experience less convenient.
Difficult to find a specific location.
b. Project Goals
After creating a persona, I considered both the business and user perspectives, identifying goals for each. This phase allowed me to envision features that could be beneficial for both parties.
c. User Flows & Sitemap
To ensure smooth navigation, I set the goal of the user flow to help users find a location and check the hours of operation.
I also created a sitemap to visualize the website's structure.
[03] Prototyping & Usability Testing
a. Low-Fidelity Wireframes
After that, I designed a simple wireframe to visualize the layout and functionality of the website. This process helped me present the information I had analyzed so far in an easy-to-understand format.
b. High-Fidelity Wireframes
Before conducting user tests, I refined the low-fidelity wireframes into high-fidelity versions, incorporating interactions to make the website more realistic. Since the original website lacked pictures for items, I decided to generate individual item pictures using an AI program called 'Deep AI’
c. Usability Testing
I conducted a usability test with 16 participants to understand different perspectives that I might not have considered. I used an online usability test program called 'Maze'.
Goal
To understand the challenges users may face when navigating the website.
Tasks
Find and choose a location : Find a "Bellevue" location, select it, and review the opening hours.
Order a specific drink : Go to the menu of the "Bellevue" location.
Choose the 16oz Hot Organic Latte with Oat milk and whipped cream, then add it to your order.
[04] Insights & Iterations
a. Insights
6 testers misclicked the banner and click the button ‘Check out the menu’. I addressed this issue by disabling the link for the button to prevent users from getting lost.
Users appreciate the clean and visually appealing UI, which makes the website easy to navigate.
Some users find the variety of coffee options overwhelming and may benefit from a simplified menu.
The front page layout can be confusing for first-time visitors, suggesting a need for clearer organization or hierarchy of information.
b. Iterations
Based on feedback, I refined some details to make the website more user-friendly.
I disabled the 'Check out the menu' link because users naturally tend to click the large central button instead.
I updated the map design and added amenities to make it more user-friendly.
I added more tabs to make the website feel more realistic.
c. Outcome
