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:

  1. Frequency of Coffee Shop Visits

  2. 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.

  3. In-Person Experience

  4. 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.

  5. 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

  1. Find and choose a location : Find a "Bellevue" location, select it, and review the opening hours.

  2. 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.