Comet Coffee
This is an individual project where I redesigned the website of a local coffee shop. I focused on enhancing digital engagement while preserving the authentic in-store experience and personal human interaction that defines the brand.
August 2025 - December 2025
Empathize
Ideate
Design
Prototype
Test
Quick Overview
The Problem
Comet Coffee is a local cafe where the baristas know customers by name in an intimate, "no-tech" setting. This extends to their current website which has minimal information, no coffee, and inconsistent merchandise between in-store and online offerings.
How might we… create a cohesive online experience that clearly showcases Comet Coffee’s drinks, merchandise, and beans for pickup or delivery, while preserving the shop’s intimacy and “no-tech” charm?
The Solution
I designed a website enabling online merchandise ordering for delivery or pickup while clearly showcasing the full menu. To preserve Comet Coffee’s “no-tech” ethos and in-person connection, pre-ordering drinks was intentionally excluded. A “Meet the Team” page and customer favorites on the homepage to bring the shop’s community online.
Jump to design
Product Goals
Enable seamless online merchandise purchasing to support users need for coffee and create a consistent revenue beyond in-person sales.
Create a digital experience that modernizes the cafe, but preserves it's ethos, increasing revenue and visibility without compromising the shop’s physical charm and identity.
Increase visibility and customer engagement online by showing menu offerings, staff favorites, and customer highlights driving foot traffic, repeat visits, & overall sales.
Empathize
Utilized Methods
Heuristic Evaluation
Product Vision Board
Observations
Interviews
Persona
Current Website
Before conducting formal research, I audited the existing website. I found a bare-bones digital presence that provides little to no information about what Comet Coffee is, what they serve, or what they stand for as a brand. The site lacks clear messaging around their values, atmosphere, or differentiators, making it difficult for new users to understand the experience they’re walking into. It features amateur merchandise photos, yet shows no coffee, drinks, or menu items, creating a disconnect between the physical cafe and its online presence.
Heuristic Evaluation
Clarity and Real-World Alignment
Jargon is simple and easy to understand, matching user expectations.
Recognition Over Recall
Limited interactive elements make the site simple and intuitive to use.
Navigation, Control, and Error Prevention
Users can easily navigate between pages, edit or remove cart items, and recover from small mistakes.
Few opportunities for error beyond selecting or adjusting the wrong item.
Consistency and Minimal Design
The interface is highly consistent and minimalist, but lacks visual appeal and warmth.
Product options are inconsistent in-person vs online and photos feel amateur in a way that doesn't inspire purchases.
Data Collection
To gather data, I first separated the stakeholder perspective from the user perspective and approached each differently. This allowed me to understand both the business goals of the cafe and the real behaviors and needs of customers. I used a mix of observational research, quick intercept interviews, and informal stakeholder conversations to gather insights without disrupting the cafe’s normal operations.
Understanding the User
To understand users, I conducted observational research inside the cafe, watching how customers interacted with the space, the menu, and staff. I also conducted short intercept interviews with customers to quickly gather insights about how they discover the cafe, their general thoughts on the business, and how they engage with the brand. I also did a quick sketch of the layout of Comet Coffee space to visualize the flow of the space.
Understanding the Business
For stakeholders, I asked brief, informal questions to baristas during slower moments to understand their perspective on customer behavior, common questions, and how the cafe operates day-to-day. As part of the assignment, we were also required to complete a Product Vision Board. Because I was unable to connect directly with the Comet Coffee's owner, I adapted my approach and used ChatGPT to help simulate stakeholder responses based on publicly available information and information gathered in the shop in order to complete the exercise.
User Persona
Through my research, I found that Comet Coffee functions as a safe space to disconnect from technology, the outside world, and the rush of daily life, allowing customers to slow down, reconnect with others, and enjoy intentional moments of human interaction. While a few accessibility concerns and minor friction points exist, they appear brief quickly forgotten as customers delve into the cafe's welcoming and relaxing atmosphere and quickly settle into conversation or quiet time.
For the purposes of this project, the physical café experience was outside my scope and control. However, these insights helped shape my approach moving forward, ensuring that any digital solution would support and reinforce the café’s intentional, low-tech atmosphere rather than disrupt it
Ideate
Utilized Methods
Crazy 8's
Design Decisions
Customer Favorites
I aimed to replicate the warm, personalized customer experience within the website, ensuring that customers feel welcomed and understood just like in the cafe.
Meet The Team
Just as I observed the ease in which baristas connected with the customers, I also noticed the familiarity in the way the customers asked about the lives of the Comet Coffee employees.
No Online Order
Comet Coffee is all about slowing down and being present in the moment, so removing the “Skip the line. Order Online” option was an easy choice to preserve the café’s human interaction and atmosphere.
Crazy 8's
Design
Utilized Methods
High Fidelity Designs
Design System + Accessibility
Designs
Following the classes pace, we went straight from crazy 8's ideation to high fidelity designs.
Prototype
Test
Utilized Methods
usertesting.com
Data Collection
After creating my initial High Fidelity’s designs and executing some prototyping, I turned to usertesting.com for usability test and a comparison between the live website and my redesign. Then created an affinity diagram based on the feedback I received to help guide in my iterations. As I worked on incorporating the feedback, I kept a detailed log of the design changes I made.
Affinity Mapping
Design Changes
In Retrospect…
Due to the course timeline and assignment constraints, I moved straight from Crazy 8 ideation sketches to high-fidelity designs, skipping the full low-fidelity and mid-fidelity iteration stages. If I had more time, I would have created low-fi wireframes to experiment with layouts and structure before committing to the final design.
I also would have liked to do usability testing with Comet Coffee’s actual customers and employees. Because the café has such a distinct “slow down” and low-tech culture that informed many of the design decisions, it would have been valuable to get feedback from real customers and stakeholders to validate whether the digital experience still felt aligned with the in-store atmosphere.