Bruno Coffee Stores

Overview

Bruno Coffee Stores started in Larissa in 2008 and has grown to 129 stores in 37 towns across Greece, Cyprus and Albania. The brand is bold and warm — signature yellow, a grey wordmark, the "Just better coffee!" line — but its website read like a standard corporate template. The goal was a site that feels as confident as the brand: premium, playful, and easy to use on any device.

The challenge

Tell the Bruno story, sell the menu and recruit franchise partners on one site, for two audiences: coffee lovers and investors.
Make 129 stores easy to find, in Greek and English.
Replace an ageing WordPress site without losing its search presence.

Design

The palette is kept deliberately tight: Bruno yellow, grey and a warm cream. Literata (a heavy editorial serif) pairs with Manrope for body text. Headlines use a grey highlight band taken from the brand's own graphics. Product and lifestyle imagery was generated in Higgsfield around one locked visual style, so every image, from the splashing hero cups to the drink shots, looks like one shoot.

Motion as storytelling

On desktop and phones, the homepage is a pinned stage. Each scroll gesture plays one scene transition rather than scrolling past content:

the hero cups fly into the menu's yellow circle while the full-screen yellow contracts around them;
that circle slides across and becomes the store map, whose dots ripple out and pins drop in;
the map grows until its yellow becomes the franchise background;
the yellow splits into three photo circles for "What makes Bruno unique".

Elsewhere, the new drinks swap with shrink-and-grow transitions, franchise concepts advance as you scroll, and news articles open by growing out of their card.

Features

Menu: category tabs, "new" and "popular" filters, and a live drink preview.
Store finder: search that ignores accents, town filters, and a dot-matrix map of Greece with the stores pinned.
Franchise: four concepts with investment ranges, the steps to opening, and an enquiry form.
Jobs, news, contact and privacy pages, all bilingual.
Custom 404: a knocked-over Bruno cup spilling across the page.

Built for every screen

Phones and tablets each got their own layout pass, scoped so desktop stays unchanged. On phones, each scene is re-laid out to fit exactly one screen, and heavier effects are simplified so scrolling stays smooth.

Performance and SEO

It is a static site with no framework, deployed on Vercel. It has clean URLs, 301 redirects from every old bruno.gr address, canonical tags, Open Graph cards, schema.org markup, a sitemap, and compressed WebP images with fixed dimensions to prevent layout shift. Every asset is self-hosted, so nothing depends on the old site.