Mercury’s Coffee Co.
Re-designing a local coffee shop's website to enhance user-friendliness and increase user engagement.
Case Study #3 : Responsive Web Design
*This project is a fictitious scenario, completed as a part of Designlab's UX Academy.
#User Interviews #Prototyping #DeepAI #Web Design
Role
Product Designer (UI/UX)
Tools Used
Figma, Maze, Deep AI
Type
Web
Timeline
6weeks
✨ Prototype Demo ✨
Here is the Prototype Demo of the Website I created using AI to generate item images. I took an approach that focused on user-friendliness.
🔍 Background
Mercury's Coffee Co. founded in Woodinville, Washington in 1998, now has 12 locations and 225 employees. Known for great organic coffee and natural ingredients, Mercury's has won many awards. I have visited many times and always enjoyed their coffee and bakery items. Despite the beautiful interiors of their cafes, the website design falls short with unnecessary pages, a lack of visual appeal, and colors that don't reflect their organic focus.
🚩 problem
“Customers might feel confused by the website compared to the in-store experience because of a complicated layout, too many pages, and colors that don't match their organic vibe.”
💡 Opportunity
How can I create a visually appealing design to enhance user friendliness and increase user engagement?
01. Empathize
To understand how other applications handle their content, I analyzed the weaknesses and strengths of 5 competitors.
Competitive Analysis
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.
Research Goal
Methodology
User Interviews (with 5 people)
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.
These are the responses I received from five participants.
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.
Summary
02. Define
I then analyzed interview data to create an affinity map, followed by a user persona to guide the focus on target users throughout the remaining design processes.
I organized the interview transcripts on sticky notes and grouped similar opinions, thoughts, and statements. The groups were broadly divided into website-related and location-related feedback.
Affinity Map
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.
Persona
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.
Project Goals
03. Ideate
During the ideation phase, I began to conceptualize a site map for Mercury's website, drawing from the project goals to create a clear sitemap and user flows.
Information Architecture / Sitemap
Based on the project goals, I created a sitemap to visualize the website's structure.
To ensure smooth navigation, I set the goal of the user flow to help users find a location and check the hours of operation.
User Flows
04. Prototyping
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.
Low-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’
High-Fidelity Wireframes
05. 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'.
I aimed to understand the difficulties users might encounter while navigating the website.
Goal
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.
Tasks
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.
Results
👍🏼 Pros
Nice UI design.
Easy to use.
👎🏼 Cons
Consider simplifying the coffee options.
Make the front page clearer to avoid confusion.
06. Iterations
Based on feedback, I refined some details to make the website more user-friendly. Some parts I had to start from scratch, but it was fun.
I’ve disabled the 'Check out the menu' link as users commonly would instinctively click the large button in the center.
1.Button Disabled
I've updated the map design and added amenities to enhance user-friendliness.
2.Map, Amenities
I’ve added more tabs to make the website more realistic.
3.Refind Details
✨ Outcome
The collective input led to a 90% increase in user opinion of the website. This project also significantly increased my own growth as a designer.
Conclusion |
Conclusion |
Designing a website for a local coffee shop from scratch presented challenges; particularly with the absence of item photos, requiring manual input into AI for generation. The interview phase demanded courage and energy as we engaged in unplanned conversations with unfamiliar individuals - yet it proved to be a valuable learning experience, fostering personal and professional growth.