How might a café create a digital experience that feels as warm, calm, and intentional as the experience of sitting down with a carefully crafted cup of coffee?
Modern café websites often focus solely on menus or online orders, leaving little room for storytelling, atmosphere, and brand identity. The challenge was to design an experience that not only helps users discover products, find information, and place orders, but also communicates the slow, comforting philosophy behind the Cafe Kish brand.
THE SOLUTION
A Brand-Driven Café Experience Designed for Discovery, Comfort, and Connection
I designed Cafe Kish from the ground up, creating a complete digital experience that combines storytelling, e-commerce, customer support, and café information within a cohesive interface. Through thoughtful information architecture, intuitive navigation, and a calm visual language, the website makes it easy for users to explore the brand, discover products, and engage with the café both online and in person.
Final UI Showcase
01 / 06
HOME PAGE
Calm Sensory Portal
The homepage serves as a digital entryway, replicating the warm atmosphere of the physical café. We avoided cluttered grids and immediate product lists, instead utilizing large imagery and editorial typography to create a spacious, inviting feeling that encourages exploration.
cafekish.com/home
BACKGROUND
Designing a Digital Home for a Modern Café Brand
Cafe Kish was created as a concept project exploring how a specialty coffee brand could extend its atmosphere and values into a digital experience. While many café websites focus only on menus and online ordering, I wanted to create a platform that also communicated the warmth, craftsmanship, and slow-living philosophy behind the brand.
The challenge was to balance multiple user needs within a single experience. Visitors should be able to discover the café, explore products, learn about the brand story, find practical information, and make purchases without feeling overwhelmed.
"For many consumers, the experience of visiting a café goes beyond just the coffee. It's about atmosphere, comfort, and connection."
This idea became the foundation for Cafe Kish, guiding both the user experience and visual design decisions throughout the project.
RESEARCH
Competitive Analysis: Benchmarking Leading Coffee Brands
To better understand user expectations and industry best practices, I analyzed four established coffee brands and specialty cafés in France. The goal was to identify strengths, weaknesses, and opportunities that could inform the design direction for Cafe Kish while helping it stand out in a competitive market.
Competitors Analyzed
CAFÉ KITSUNÉ
Café Kitsuné
STORYTELLINGPREMIUM
Strong storytelling and premium photography
Consistent brand identity across touchpoints
COUTUME
Coutume Café
E-COMMERCESPECIALTY
Well-developed e-commerce experience
Clear navigation and product lists
TERRES DE CAFÉ
Terres de Café
SOURCINGDIVERSITY
Strong origin and trace details
Easy-to-use search and purchase flow
STARBUCKS
Starbucks
LOYALTYMASS MARKET
Highly optimized mobile ordering
Extremely robust loyalty program
SWOT Matrix Analysis
STRENGTHS (FOR STORYTELLING & FLOW)
Strong visual storytelling and premium photography
Clear navigation and product categorization
Consistent brand identity across digital touchpoints
Well-developed e-commerce experiences
WEAKNESSES (FOR USABILITY)
Important information occasionally buried within content-heavy pages
Some websites prioritize aesthetics over usability
Limited visibility of customer support and contact options
OPPORTUNITIES (FOR CAFE KISH)
Create a stronger connection between the digital and in-person café experience
Combine brand storytelling with seamless product discovery
Improve customer engagement through loyalty and subscription experiences
Surface support and assistance throughout the customer journey
THREATS (TO MITIGATE)
Growing competition within the specialty coffee market
Increasing user expectations for online shopping experiences
Overly complex interfaces that create friction and reduce engagement
User Interviews: What Cafe Lovers Really Want
Through five in-depth interviews with frequent cafe-goers, I explored their needs, preferences, and frustrations when choosing and visiting cafes. I then analyzed my findings and created an affinity map to uncover key themes:
Figure 1: Affinity Map showing key themes around comfort, digital discovery, and order accessibility.
DEFINE
Bringing the User to Life
To make my research findings more tangible, I created a user persona which provided a holistic view of the target user that will shape my design decisions.
Understanding Our User: Meet Chris!
Chris
Café Enthusiast
AGE28
OCCUPATIONGraphic Designer
LOCATIONParis, France
Chris needs a local coffee shop that is welcoming, community-focused, and offers easy access to essential information online.
GOALS & NEEDS
Wants a local coffee shop that feels warm and community-driven.
Needs fast access to operating hours and menus on a mobile viewport.
Values transparency regarding coffee bean washing, roasting, and origin details.
FRUSTRATIONS
Buried cafe locations and operating hour cards on old sites.
Inability to buy roasted beans online or customize subscription kits.
Physical stamp cards are easily lost or forgotten.
HOW MIGHT WE...
How might a café create a digital experience that feels as warm, calm, and intentional as the experience of sitting down with a carefully crafted cup of coffee?
FEATURE ROADMAP
Feature Roadmap
To define and prioritize the key functionalities of Cafe Kish, I created a feature roadmap that aligned both user needs and business objectives. As Cafe Kish combines a physical café experience with an online specialty coffee shop, the platform needed to support product discovery, online purchasing, brand storytelling, customer engagement, and long-term loyalty.
The following features were identified as the most important components of the initial product experience:
• Homepage
• Menu
• Shop
• Product Details
• Shopping Cart & Checkout
• Login / Account Access
• Story
• Visit Us
• FAQ
• Customer Support Widget
• Newsletter Subscription
• Loyalty Program
• Order Tracking
• Product Recommendations
These features were prioritized to help users easily discover the Café Kish brand, explore products and menu offerings, make purchases with confidence, and build an ongoing relationship with the café through subscriptions, rewards, and customer support.
Figure 2: Feature Roadmap priority matrix aligning user value against implementation complexity.
INFORMATION ARCHITECTURE
Translating Features into a Site Map
With the core features and user journeys defined, I translated them into a site map to establish a clear and intuitive information architecture. The structure organizes content into logical sections, helping users easily navigate between the café experience, online shop, account features, and customer support resources.
The site map ensures that key actions such as exploring the menu, purchasing products, managing a cart, and finding café information remain accessible while supporting both business goals and user needs. By creating a clear hierarchy, I was able to design a seamless navigation experience that reflects Cafe Kish's calm, welcoming, and thoughtfully crafted brand identity.
Figure 3: Information Architecture map for Cafe Kish, grouping digital shop elements and café details.
DESIGN PROCESS
Designing a Calm and Conversion-Focused Experience
With the information architecture and user flows established, I began translating the experience into low-fidelity wireframes. The goal was to define content hierarchy, page structure, and key conversion paths before introducing visual styling.
Throughout the wireframing process, I focused on:
Clear content hierarchy to guide users through the café experience
Strategic placement of calls-to-action to support menu exploration and online purchases
Balanced layouts that combine storytelling, product discovery, and customer engagement
Consistent navigation patterns to create a seamless browsing experience
By establishing the structure early, I was able to validate page layouts, user journeys, and business priorities before moving into the final visual design phase.
Crafting the Visual Design
To bring the Cafe Kish brand to life, I focused on creating a visual language that reflected warmth, comfort, and slow-crafted quality. Every design decision was guided by the café's philosophy of mindful rituals and quiet luxury.
To reflect user expectations, I focused on:
Warm, inviting visuals – Creating a calm and welcoming atmosphere.
A cohesive color palette – Using soft neutrals and caramel accents to reinforce the brand identity.
Refined typography – Balancing elegant serif headings with highly readable body text.
Consistent UI components – Designing buttons, forms, cards, and interactions that feel unified across the experience.
Every design choice, from imagery and typography to interface components, was selected to capture Cafe Kish's slow-crafted atmosphere while maintaining a cohesive and memorable brand experience.
Used for serif headings to convey calm luxury and slow comfort.
Plus Jakarta Sans
Used for body copy, options, and lists to ensure highly readable browsing.
COHESIVE PALETTE
#0F1612
#F4F1E8
#5B4A3F
#D69A4E
TESTING & ITERATIONS
"This Feels Like a Place I Would Want to Visit"
To evaluate the overall experience, I conducted informal usability testing with five participants. The goal was to understand how easily users could navigate the website, discover key information, and complete common tasks while experiencing the calm and welcoming atmosphere of the Cafe Kish brand.
PARTICIPANT TESTING TASKS
Locate the café's opening hours and address
Browse the menu and find a featured signature drink
Explore the online shop and locate a specific coffee product
Find customer support and contact options
Access account and cart functionality
All five participants successfully completed the tasks and described the experience as intuitive and visually cohesive. Several participants commented that the design felt calm, premium, and aligned with the atmosphere they would expect from a modern specialty coffee brand.
However, the testing process also revealed a few opportunities to improve discoverability and streamline key user journeys.
1. Customer Support Accessibility
AFTER REDESIGN
2. Menu Items Discovery
AFTER REDESIGN
OUTCOMES & IMPACT
Measurable Improvements
The final design successfully combines café discovery, online shopping, brand storytelling, and customer engagement into a single cohesive experience.
Through iterative refinement, key user journeys became more intuitive, including product browsing, customer support, and account access. The addition of a global support widget improved accessibility across the site, while category filtering and featured product organization made the online shop easier to navigate and explore. The resulting experience reflects the calm, welcoming atmosphere of Cafe Kish while supporting both business goals and customer needs through clear navigation, consistent visual design, and thoughtfully designed conversion paths.
8
Core Pages Designed
Complete layouts detailing home, menu, ordering flows, and dashboards.
20+
Reusable Components
Unified design system primitives for buttons, inputs, filters, and cards.
3
Primary User Journeys
Highly optimized purchasing, contact, and loyalty collection pathways.
2
Major Design Iterations
Usability findings directly structured back into visual layout updates.
Interactive Walkthrough
Watch the video overview showcasing customer dashboard, purchase flows, and responsive layouts:
Final Design Video Walkthrough
Click to play the interactive video walkthrough presentation.
Cafe Kish began as an exploration of how a modern café brand could extend beyond its physical space and create a cohesive digital experience. From defining the information architecture and user journeys to designing the interface and e-commerce experience, every decision was guided by the idea of slow comfort, simplicity, and craftsmanship.
What I Learned
This project reinforced the importance of designing beyond individual screens. Creating Cafe Kish required balancing brand storytelling, product discovery, customer support, and e-commerce functionality within a single experience. It also highlighted how information architecture, content hierarchy, and consistent design systems work together to create a seamless user journey.
Next Steps
With more time, I would expand the experience by developing a complete digital loyalty program, personalized customer accounts, and a richer subscription management system. I would also conduct additional usability testing with a larger participant group to validate assumptions and further refine key user flows.
What I'm Most Proud Of
I'm most proud of creating a complete end-to-end product experience from concept to final interface. From the initial site map and wireframes to the visual identity and interactive features, every element was designed to support a clear vision and create a digital experience that feels as warm, calm, and welcoming as the Cafe Kish brand itself.
