Intuitive desktop + mobile experience: Sharing products, streamlining ordering experience, & creating a welcoming business philosophy.
The Problem
Limited to Online Ordering
Keep Coffee is a San Diego cafe largely supported by their digital presence and social media influencers.
Their website drew no engagement: it was a Square template with only a basic menu and ordering. Without brand identity, cafe info, seasonal offerings, CTAs, visuals, and incentives to visit, the website gave a limited and disconnected user experience.
UX Research
Learning from the Owner & Customers
Findings
The Need for a Centralized Digital Presence
Client Needs
Translate Keep Coffee's existing industrial and minimal brand identity into a cohesive digital experience
Communicate the cafe's story, cultural background, and unique drinks to attract new customers
Design with the primary users in mind: curious, aesthetic-driven students looking for a studying environment
Customer Needs
Pain point: Menu lacks clarity. Customers wanted images, flavor descriptions, and pricing visible upfront
Seasonal offerings: seasonal drinks are hard to track, leaving customers dependent on finding them through social media
Amenities: Wi-Fi, outlets, and seating aren't mentioned online, forcing users to take a risk, rely on word of mouth, or search on Yelp.
Coffee beans: missing coffee bean descriptions leave enthusiasts without the necessary context to make a choice.
Prototype
User Flows
Low-Fidelity Prototype
Design System
Iterations
Implementing Design Feedback
Homepage (Desktop)
Menu (Desktop)
The Final Website
A Consolidated Cafe Experience: Keep Coffee ↗
The client will be managing the website by herself, so we used Wix to build and host the website for a more beginner-friendly experience.
Reflection
Learning Outcomes
Balancing client and user needs
Building a brand from the ground up
Practical information can be just as persuasive as visuals.
Future Improvements
If I were to revisit this work, I would:
Rewrite content writing to further optimize it between device types. We shortened body text for mobile but could make text even more concise.
Add a blog section or mailing list to the About Us page, further humanizing the brand