1. Coffee House
Brew Society coffee house
The challenge
How do you make someone smell freshly ground coffee, feel the warmth of baked pastries and live the ritual behind every cup…through a screen?
Brew Society needed a digital experience that could translate a rich, multi-sensory café atmosphere into a clear, premium website while communicating ethical sourcing, craftsmanship, and care.
The solution
We designed a website that engages all the senses: visually, structurally, and emotionally The result is an immersive, story-led website that turns texture, motion and visual rhythm into sensory cues: from coffee-field imagery and grounded colour palettes to tactile surface and fresh coffee grounds.
Design approach
Our design approach for this fictional business focuses on translating physical sensation into digital form. Every visual choice – from colour and type to layout and motion – is intentionally crafted to evoke warmth, craft and immersion, guiding users through the experience as naturally as moving through the café itself.
Colour palette
A warm, earthy palette reflecting coffee and pastry tones.
Cocoa
#4A2F26
Mulled wine
#7A301A
Toffee
#8D5F32
Warm shortbread
#D9C89C
Typography
The type system blends elegant, sculptural forms with warm, readable text to guide visitors through the sensory experience. They balance sophistication with approachability, reinforcing the warmth and premium quality of the café.
Aa
Fraunces – headings
Aa
Merriweather – body text
Visual storytelling
Visual storytelling plays a central role in shaping the Brew Society experience. Floating content layers, subtle wood and tactile textures and full-screen imagery work together to suggest touch, warmth, and materiality. Narrative elements such as timelines formed from falling coffee grounds add rhythm and depth, transforming the website into a sensory journey.
A glimpse into our design process
Below is a comparison illustrating how information architecture and UX decisions inform the low-fidelity wireframe, later translated into a high-fidelity design.
Desktop
Tablet
Mobile
Device compatibility
Built on a strong structural foundation, the responsive design adapts seamlessly across desktop, tablet, and mobile, preserving both the structure and sensory experience of the coffee house on every screen.
This project is a conceptual case study for a fictional business and is our original intellectual property, fully created in-house. This design is available for licensing or adaptation should you feel inspired by it.