RIVANT

Case study · Website

Deja Brew

A coffee website that walks you from the farm to the cup.

Deja Brew's takeaway cup: leaves and blotches in terracotta and brown, with the round black-and-white badge.

The brief

“Coffee that speaks of home” was the line to design to. The site had to feel homely, take its time, and show where the coffee comes from before it asks anyone to visit.

Client
Deja Brew Coffee
Sector
Cafés and franchising
What we did
UI/UX design, Website development, Cup design
Pages
Home, franchise, menu, locations

The design system

Drawn up before any page: two fonts, nine colour tokens and a type scale for desktop and phone, then the parts the pages are built from.

Fonts

Dela Gothic One

Used for headings

David Libre

Used for paragraphs

Type scale

Where it all begins

Handpicked with care

With nature’s touch

Rolling hills adorned with emerald green coffee bushes, basking under the golden rays of the sun. This is where our coffee’s journey begins, in the heart of the lush coffee fields.

Colours

  • White#FFFFFF--white
  • Almost White#D9D9D9--almost-white
  • Blue#009DED--blue
  • Orange#D08875--orange
  • Light Brown#A38C77--light-brown
  • Brown#645443--brown
  • Dark Brown#433839--dark-brown
  • Almost Black#1E1E1E--almost-black
  • Black#000000--black

Components

01

Deja Vu Espresso

A bold, double shot of our house blend espresso, perfectly balanced for an intense flavor experience.

₹220

Gokhalenagar

Open from 06:00am – 10:00pm

Plot no. 56, SB Road

Give me a call back…

Home: from the farm to the cup

The home page opens on the floating cup, then walks back to where the coffee started: eight stops down a dashed path, from “Picture a place” to “Served with passion”, before the café’s promises and the footer.

The Deja Brew home page on desktop: the floating cup and 'Coffee that speaks of home', the journey from the fields in eight steps with photographs, Why us, the Deja Brew experience cards and the footer.

A journey from our fieldsto your refreshing sip…

  1. Rows of coffee bushes on a hillside.
    01

    Picture a place

    Rolling hills adorned with emerald green coffee bushes, basking under the golden rays of the sun.

  2. A farmer picking ripe red coffee cherries.
    02

    Handpicked with care

    Handpicked by skilled farmers, only the ripest cherries make the cut.

  3. Workers raking coffee cherries on long drying beds.
    03

    With nature’s touch

    Some cherries go through the ‘washed’ process; others the ‘natural’ method, left to the sun and air.

  4. Coffee beans turning in a steel drum.
    04

    Carefully crafted

    At the mill, the last parchment and pulp come off, and the beans are sorted by size and quality.

  5. Freshly roasted beans, still smoking.
    05

    Roasted to perfection

    Green beans become the aromatic, flavourful gems we treasure.

  6. Ground coffee in a portafilter beside a sack of beans.
    06

    Ground just right

    The grind is tailored to the brewing method, from espresso to French press.

  7. Pour-over brewers and a French press on a café counter.
    07

    Brewed with love

    A symphony of methods, from the classic drip to the bold elegance of espresso.

  8. A barista in a Deja Brew apron holding out a cappuccino.
    08

    Served with passion

    Every cup is a canvas, and our baristas are the artists.

The home page's first screen: the Deja Brew badge and navigation, the patterned cup floating among beans, and 'Coffee that speaks of home'.

The home page’s first screen

On a phone

The same journey, stacked: the cup above the line, the path down the left edge, every photograph full width, and the navigation folded into one button.

The Deja Brew home page on a phone, the journey stacked into one column.
The phone home page's first screen: the badge, the floating cup and 'Coffee that speaks of home'.

The first screen on a phone

Franchise with Deja Brew

“Brew your own success story.” The franchise page makes the case in three columns, then lays out the application as the same dashed path as the journey, six stops from the enquiry form to the grand opening, and ends on the form itself.

  1. Fill out the Inquiry Form
  2. Application
  3. Discovery Day
  4. Franchise Agreement
  5. Training & Setup
  6. Grand Opening
The franchise page: Franchise with Deja Brew over a storefront photograph, why franchise, what sets Deja Brew apart, the six-step process with illustrations, the enquiry form and the footer.

Menu and locations

Both were stubs in the file: a heading and one card on the menu, one placeholder outlet repeated six times on locations. We finished them. The speciality list sits in dark cards under three counters; the finder shows the one real café beside a map, with the request-a-café form below.

The finished menu page: Our menu, Speciality coffee, three counters (Coffee, Cold, Desserts) and six dark brown cards from Deja Vu Espresso at ₹220 to Cappuccino at ₹150.
The menu page on a phone, one card per row.
The locations page on a phone: the search, the Gokhalenagar café, the map and the request form.
The finished locations page: Find your perfect cup of coffee, a search box and the Gokhalenagar café card beside a map with its pin, then Couldn't find an outlet nearby? and the request form.

In the café

The badge over the door, on a kiosk and on the wall behind the counter, in the mock-ups that run through the site, from the franchise page to the outlet cards. We designed the takeaway cup too.

Mock-up: a round lit sign with the badge in a brass ring, hung over a café counter.
Mock-up: the badge as a raised sign on a dark grey shopfront.
Mock-up: a kiosk with the badge on a fascia of hand-drawn coffee doodles.
The takeaway cup, patterned in terracotta and brown leaves, with the badge and ‘Established 2023’.

Credits

What we made

  • Design system: fonts, colour tokens, type scale, components
  • Home page, desktop and phone
  • Franchise page and enquiry form
  • Menu page
  • Locations page and request form
  • Build

Services

  • UI/UX design
  • Website development
  • Cup design