The Mugs
Redesigning The Mugs’ website to mirror its creative and cozy coffee shop ambiance in order to entice new customers.
ROLE
Sole UX/UI Designer
TIMELINE
1 Week Sprint
TOOLS
Figma
Google Forms
Photoshop
Procreate
METHODS
Branding
Interaction Design
User Research
Visual Design
INTRODUCTION
The Mugs is a coffee shop well-known and loved by locals.
The Mugs presents a wide-ranging and flavorful menu, served by friendly staff. Sunlit windows highlight the featured artwork from the local arts community. It truly lives up to its reputation as the place “where coffee meets art.”
THE PROBLEM
The store has a growing in-person community as an “artistic coffee shop,” yet struggles to spotlight its diverse offerings and creative personality online.
The current website appears bare and doesn’t capture the unique artistic essence of the store, causing a disconnect among its customers. Many users struggle to find information on the site, often resorting to other sources to find the details they need.
This poses a challenge for new users who want to find out more about the store.
MY ROLE + THE SOLUTION
I decided to build The Mugs a new responsive website in order to improve its usability and showcase its artistic charm to get more users engaging with the brand.
Exploratory Home Page Browsing
Mirroring the in-store experience, visitors to The Mugs’ comprehensive homepage can easily explore various aspects using long-form scrolling. They can browse the diverse drink menu, explore the works of featured artists, and be informed of any upcoming events, just like if they were to walk in-store!
Discover Brand Identity
With a clear navigation system, users learn what sets The Mugs apart and understand its brand identity by accessing key information including its history, news, and community involvement.
Curated Artists Section
Various sections on the website provide information about the featured artists of a given time period, including details about the artist’s showcase, upcoming events, and product merchandise that can be purchased in-store.
HEURISTIC EVALUATION
The current website feels barren and doesn’t showcase the store’s distinct offerings.
I conducted a heuristic evaluation to gather my initial thoughts and any areas of improvement. The existing website is dated and not user-friendly. The design is inconsistent, too. Notably, there is a potentially high bounce rate due to the absence of easily-available information and a demanding user journey for users who want to find out more about the store.
USER RESEARCH
70% of individuals reported that they frequent coffee shops for work or study, which makes it important that these coffee shops are easily discoverable online.
Understanding user needs and any points of friction they have will validate design decisions and set a direction for the project. Additionally, it will cater the most optimal design for their needs.
KEY INSIGHTS
Word-of-mouth effectively leads new users to visit the website to learn more, but it falls short of users initiating action after that.
Understanding user needs and any points of friction they have will validate design decisions and set a direction for the project. Additionally, it will cater the most optimal design for their needs.
THE OPPORTUNITY
How might we transform The Mugs’ website to replicate its ambient in-store experience and showcase artistic collections, enticing new customers to explore and be motivated to visit?
SOLVING THE PROBLEM
Based on the insights, the goal is to get more users to spend time engaging with the website.
This goal will be achieved through these 3 design objectives:
Objective #1:
Align the website experience with the in-store experience (charming, artistic)
Objective #2:
Highlight the ambient features that make The Mugs an ideal venue for work or study
Objective #3:
Emphasize the commitment to the local arts scene by providing detailed information on artists and upcoming events
SKETCHING
The design became straightforward given the goal and objectives.
Existing website content and information hierarchy was kept and prioritized while new content was filtered to meet one or more objectives. After a few round of revisions, this is the final design iteration that I decided to build.
IDEATION + VISUAL DECISIONS
I followed up the sketch by creating an intuitive navigation for the prototype.
Following the initial sketch, I translated the design over to Figma. I tested a few variations before landing on the below image, with notes to elaborate on the visual decisions made.
Mid-Fidelity Wireframes
A Responsive Layout of the Landing Page
TESTING + IMPROVEMENTS
I conducted a usability test to ensure that the user flow was logical and to bridge any gaps during testing.
My goal was to collect user feedback, assess the ease with which volunteers completed assigned tasks, and measure their overall satisfaction with the task experience. Here are several significant design improvements implemented as a result of that testing:
Hoverable Dropdown Menus
- Users wanted to preview navigation systems, so I added hoverable dropdown menus for ease of access
- Tabs outlined from left to right in order of customer journey expectations (in order of importance to meet objective #1 & #2)
Before
After
Detailed About Page
- In the testing phase, users wanted to find out more about artists featured in store
- Originally designed to only feature artists, now changed to feature artists’ external pages for more ties to the art community
- This directly aligns with objective #3 to emphasize details of the community
Before
After
More Visual Galleries
- Based on feedback, photos are meant to be alluring and persuasive, so galleries would intensify the feeling
- Allows users to instantly connect with the store’s atmosphere
Before
After
Designated News Area in Top Nav
- Previously included an embed of the Mugs’ Facebook page for the business’ ease of use
- However, it didn’t perform well in the testing because of its unfamiliar and unfriendly design pattern (it would also not do well in a responsive environment
- Instead, I opted to create a new top nav for all updates and News
Before
After
The original visual design and navigation
The new website in high-fidelity
The Final Product
REFLECTIONS
I felt proud of my work in contributing to a brand that I would recommend and want to see flourish.
Some things I learned:
Visual branding and design require being meticulous and strategic. Using existing design patterns, I tactfully tweaked their color scheme and fonts to meet WCAG standards for accessibility. Where there were new patterns, I experimented with various colors and shapes to encapsulate their cozy, artistic, and creative aura.
The presence of trade-offs are inevitable, so it is crucial to think critically. Keeping business objectives in mind, I initially integrated a Facebook embed to streamline their social media updates on two platforms. However, this did not scale well in responsive layouts. Instead, I created a new UX pathway on the top navigation called News. While this may demand more effort and monitoring from the business, it fulfills user objectives in engaging with the site more effectively.
NEXT STEPS
Contacting the business …
This project will be packaged and pitched to the store manager for a collaboration.
