Coffee selection
Bright cup
Crisp · fruit-led direction
Comfort cup
Round · roast-led direction
Brand website
COFFEE STOPOVER
A specialty-coffee website concept explored through handmade ceramics, beans, linen, and stone.
Studio concept, not client work
Case narrative
Background
COFFEE STOPOVER is a self-initiated specialty-coffee website concept about a quiet urban pause. It expands one cup-led image into coffee selection, brew content, visit information, and a clear purchase path.
Case narrative
Challenge
Specialty coffee sites can become mood galleries while visitors still cannot find what is available, how to choose, what the space offers, or whether to view the menu, buy beans, or visit. Content and action must become concrete without losing pace.
Case narrative
Insight
Visitors do not learn about coffee through one route: some begin with cup character, some with brewing, and others with the store. Making those intentions visible on the homepage creates a clearer path than burying everything inside one brand story.
Case narrative
Strategy
The site organises navigation around what to drink, how to brew, and where to pause. Comparable coffee cards, editorial brew stories, and a visit page combining space, menu, and arrival actions keep one reading priority across devices.
Case narrative
Design
The result includes a homepage, coffee menu, brew stories and visit sitemap; desktop, tablet and mobile core screens; coffee content and product modules; and buy-beans, view-menu and visit conversion paths. All coffees and store details are design examples, not real products, addresses, or operating information.
Strategy translated into delivery
The systems below connect each strategic decision to an inspectable specification, touchpoint, or operable result.
Information architecture
From what to drink to how to brew and where to pause
The homepage separates coffee selection, brew stories, and visit needs before each path connects content to its primary action.
- Homepage, coffee menu, brew stories, and visit sitemap
- Cross-page content hierarchy and navigation relationships
A homepage entry for each visitor intention
Brand entry
How would you like to pause?
- Homepage01
Weekly selection · Brewing · Visit
- Coffee menu02
Cup character · Brew guide · Choose
- Brew stories03
Tools · Steps · Observations
- Visit04
Space · Menu · Arrival
Responsive interface
Making the same coffee legible across three screens
Desktop keeps editorial space, tablet reduces columns, and mobile fixes content and action order instead of shrinking the desktop composition.
- Desktop, tablet, and mobile core screens
- Cross-device coffee menu and action order
Preserving reading order, not shrinking a screen
Desktop · 1440
This week’s coffees
Tablet · 768
This week’s coffees
Mobile · 390
This week’s coffees
Conversion flow
Three intentions, three clear paths
Buying beans, viewing the menu, and visiting each receive a clear entry, required context, and completion state instead of sharing one generic button.
- Buy beans, view menu, and visit actions
- Entry, information, and completion states
Each action carries one complete intention
- 01
Buy coffee beans
Choose → Item → Cart
Selection complete → - 02
View menu
Drinks → Price → Today
Ready to order → - 03
Visit us
Space → Service → Directions
Plan the visit →
Content system
Distinct rhythms for coffee, brewing, and space
Comparable coffee cards support selection, brew stories explain method, and visit modules clarify seating and service while sharing one visual language.
- Coffee selection and product modules
- Brew-story and visit content modules
Different rhythms for choosing, learning, and visiting
Brew story
Tools, ratio, steps, and observation
The space
Bar, seating, and visit preparation
Coffee and visit prototype
Compare the bean list, then plan a visit
Bean list
All store names, hours, seating, and availability are illustrative.
Delivery standards you can inspect
Acceptance evidence
Concept demonstration — no order, inquiry, or reservation is transmitted.
Content completeness
The case connects background, challenge, insight, strategy, and design to each delivery decision.
Independent art direction
The visual system uses distinct colour, material, typographic rhythm, and information hierarchy.
Responsive delivery
Desktop, tablet, and phone reading preserve essential delivery information without horizontal overflow.
Keyboard access
Every link and applicable control is keyboard reachable with visible focus.
Truthful disclosure
This is a studio concept and does not claim a client commission, real transaction, or unverified commercial outcome.
Content completeness
Bean list, flavour filtering, brew content, store information, and visit confirmation are readable or operable.
Operable behaviour
The concept prototype is directly operable and exposes idle, loading, empty, error, and success states.
Related perspectives
Continue exploring
Service · Website design
Brand websites
A clear, distinctive website designed to strengthen your brand and user experience.
Service · Restaurant branding
Food & hospitality
Identity, menus, packaging, and spatial touchpoints shaped into one memorable experience.
Project · Brand identity
FLOWERDAZE
A quiet floral identity concept expressed through meadow flowers, clear glass, and blank stationery.
Project · E-commerce design
MULE TASTE
An editorial gourmet-commerce concept built from figs, bread, pears, ceramics, and tactile materials.
Project · Restaurant branding
Alley Bistro
A neighbourhood restaurant concept shaped through a timber facade, warm light, and street presence.
Project · Restaurant branding
Komugi Biyori
A warm hospitality identity concept explored through bakery display, natural materials, and packaging.
Share