THE PROBLEM
The Keep Coffee's website is limited to to online ordering
The current website only supports online ordering through a basic Square template, lacking key pages to showcase the brand’s story and identity. With incomplete visuals and missing imagery, the website provides a limited and disconnected user experience beyond placing an order.
Original website, Apr 2026
MY GOAL
Replacing a bare-bones ordering page with a full digital brand
Translate Keep Coffee's existing industrial and minimal brand identity into a cohesive digital experience
Communicate the café's story, cultural background, and unique drinks to attract and connect with new customers
Design with the primary users in mind: curious, aesthetic-driven students looking for a new study or social spot
UX RESEARCH
Getting to know the owner and background
To understand more about the brand and mission, we interviewed The Keep Coffee's owner, Pam. Through the interview, we identified key features, content priorities, and aesthetic direction to carry into the website design.
Affinity Map - client objectives
Getting to know customers and café-goers
We interviewed 9 customers and people who go to coffee shops with a variety of coffee/matcha habits and preferences, organizing our findings into 3 personas who would visit The Keep Coffee's website.
No centralized place to find it all
Menu information lacks clarity as customers wanted images, flavor descriptions, and pricing visible upfront
Current ordering page that only includes item name and price
Seasonal drinks are hard to track, leaving customers dependent on finding them through social media posts
Need to find Instagram account and scroll to find seasonal posts
Wi-Fi, outlets, and seating are not mentioned online, forcing users to take a risk, rely on word of mouth, or search on Yelp
Need to search on yelp and find images of the interior
Missing coffee bean descriptions leave enthusiasts without the necessary context to make a choice
Current coffee bean cards lack image and descriptions
LOW-FIDELITY PROTOTYPING
Fixing the broken navigation
I first addressed the navigation of the website, ensuring the information architecture was intuitive.
Handling the content design
Next, we created low-fidelity prototypes for each page. We created different explorations before committing.
THE DESIGN SYSTEM
Building the design system from the moodboard
PROTOTYPE ITERATIONS
From feedback to final
After creating the first prototypes, we conducted usability tests with 4 people who enjoy visiting coffee shops to evaluate how intuitively users could navigate the website and find café information, browse the menu, and place an order. I changed the designs based on the feedback.
Removing the logo and button let the hero image stand out and created a cleaner first impression
The homepage needed clearer visual hierarchy and easier access to key information.
Adding the amenities displayed practical information and addressed the primary customer of college students
Customer reviews were less trusted than social media content, and people would rather watch than read content
The header image opacity felt inconsistent with the rest of the site's
The Menu headline felt disconnected sitting inside the header image rather than with the rest of the items
The navigation bar was difficult to use, needing to be fixed in place with clearer horizontal scrolling cues
The two-column grid layout made menu items harder to scan, with users preferring a more spacious single-row format
THE FINAL WEBSITE
Everything in one spot
Since the client will be managing the website by herself, she does not have the capacity to have engineers develop the website. We used Wix to build and manage the website. Showing the mobile site as customers are more likely to use their phones.
Home
About
Menu
REFLECTION
Key takeaways
Balancing client and user needs
Designing for a client meant balancing between the client's vision and what users actually needed, even if the two don't always align.
Building a brand from the ground up
With no formal brand guidelines beyond a logo, we had to construct an entire visual system from scratch. This pushed us to be more intentional with every design decision.
Practical information can be just as persuasive as visuals
Amenities, pricing, and hours had just as much influence on a user's decision to visit as the aesthetic of the site. A reminder that function drives conversion as much as form.
Some of the menu items we got to try :)
