NORI Coffee
An independent speciality coffee shop needed more than a menu page — it needed a website that could genuinely take orders, while still feeling like the warm, considered space it represents in person.
Industry
Hospitality
Project Type
Speciality Coffee Shop Website Concept
Services
Brand Direction, UI/UX Design, Frontend Development, Online Ordering Experience, Responsive Design, Motion Design
Timeline
Concept Project
Platform
Responsive Website
Status
Concept
Business Overview
A modern speciality coffee shop concept combining warm editorial design with a complete interactive ordering experience.
The Challenge
A static menu page gave visitors nothing to actually do — no way to order, and no sense of the café's atmosphere.
Our Approach
Why we designed it this way
Brand Positioning
An editorial, Scandinavian-warm identity positions NORI as a boutique speciality roaster, not another generic café template.
User Experience
Every section of the homepage builds toward one outcome — getting a drink into the basket — without ever feeling like a form.
Ordering Journey
A static menu became a full add-to-basket, customise and checkout flow, so a visitor can genuinely place an order, not just read about one.
Visual Hierarchy
Oversized, asymmetric type and layered photography give every section its own moment, rather than repeating the same template rhythm.
Mobile-First Thinking
The basket, product customisation modal and checkout were all designed around a thumb before they were adapted for a trackpad.
Trust Signals
Real menu pricing, honest collection-time estimates and a working confirmation screen make the experience feel close to production-ready.
Design Details
The craft behind the surface
Typography
Cormorant Garamond carries display headings with an editorial, slightly italic warmth; Inter carries body copy and UI for clarity at small sizes.
Colour Palette
Warm off-white and deep coffee brown anchor the page, with sand and forest green used sparingly so the palette reads as considered, not the default coffee-shop template.
Spacing
Generous, asymmetric whitespace lets full-bleed photography and oversized type breathe between sections.
Layout System
No two sections share the same grid — overlapping image collages, a horizontal filmstrip gallery and split editorial panels keep the scroll feeling designed, not templated.
Component Consistency
The same rounded-pill buttons, card radii and hover-lift treatment repeat from the homepage through to checkout, so ordering never feels like a different product.
Animation Philosophy
Framer Motion handles scroll reveals, image wipes and a magnetic cursor-follow preview on the menu — restrained enough to feel premium, never decorative for its own sake.
Image Treatment
Warm, editorial photography with shallow depth of field carries the brand throughout, styled consistently from hero to gallery.
Visual Identity
Colour and type, up close
Colour Palette
Warm Off White
#FAF8F5
Deep Coffee Brown
#2C211B
Sand
#E7DDD2
Forest Green
#234234
Near Black
#181818
Typography
Display / Headings
Cormorant Garamond
Coffee worth slowing down for.
Body / UI
Inter
Small-batch roasted, thoughtfully brewed.
Responsive Experience
Designed mobile-first
The basket drawer, product customisation modal and checkout flow were all designed mobile-first, since most café ordering happens on a phone, not a desktop.
Coffee worth
slowing down for.
Performance & SEO Considerations
Built to be found, built to be fast
Built on Next.js with static generation and optimised image loading. The basket, checkout and confirmation flow run entirely on local state with no external ordering dependencies, keeping the site fast and self-contained.
Fast Load Times
SEO Foundations
Mobile Optimised
Technologies Used
Project Gallery
A closer look
Our Process
How this project came together
Research
Understanding the business, audience, and goals first.
Wireframes
Mapping structure and user flow before any visual design.
Design
Crafting the look, feel, and interactions around the brand.
Development
Building the site to be fast, responsive, and reliable.
Testing
Checking every page, device, and interaction before launch.
Launch
Going live, then staying on to support what comes next.
The Outcome
What the finished site achieves
Turns a static menu into a genuine ordering experience, from browsing to a working confirmation screen.
Gives NORI a digital presence that matches the craft and warmth of the physical café.
Shows how a hospitality site can carry real transactional functionality without losing its editorial feel.
NORI Coffee is a fictional coffee shop created for this portfolio. It is not a real business, and the ordering and checkout flow is a fully simulated front-end experience — no real orders or payments are processed.
Related Projects
More work worth exploring
Like what you see?
Let's build something similar for your business — starting with a conversation, not a sales pitch.
No obligation. Response within one business day.