Since 1870, one pin away

A website for the Café Barbera coffee houses in the Middle East and North Africa

Case study · 21Middle East & North Africa · 2023Scroll

Case study · web design, UI/UX

Find your nearest Café Barbera.

Café Barbera began in 1870, when Domenico Barbera started roasting coffee in southern Italy with a small handcrafted roaster. Its Italian coffee houses now open across the Middle East and North Africa, and they needed a website for the guest in Dubai, Baghdad or Amman: what to order, where the café is, what is new. Every page keeps a red pin with a coffee bean and one promise: find your nearest Café Barbera. Around it, a menu in twelve categories, the family story told generation by generation, news, delivery and a rewards programme, on desktop and mobile.

Client
Café Barbera, cafés in the Middle East and North Africa
Sector
Coffee houses (franchise)
Location
Middle East & North Africa
Year
2023
Café Barbera · MENA · the mark in motion

The brief

What was needed

A roastery from 1870 with franchise cafés across the Middle East and North Africa needed a website for its guests. It had to answer three questions: what to order, where the café is, what is new.

The idea

How it was solved

A red pin with a coffee bean stays on every page, with a Search button under it, so the nearest café is always one tap away on a map of the region. Around it sit the menu, the family story, news, delivery and rewards, on desktop and mobile.

Since 1870, one pin away.

01 · The pin

One pin away.

Every page keeps the same red pin on the left, with a coffee bean inside and a Search button under it. Wherever the guest is on the site, the nearest café is one tap away, on a map of the cafés across the region. On the phone the pin moves to the top right, next to the logo.

  1. LocationsA map and a list of the cafés across the region.
  2. MenuA dark espresso band of twelve categories, from hot coffee to grill.
  3. StoryA timeline of generations, with photos from the family archive.
3D render for Café Barbera · MENAWeb designUI/UXStore locatorResponsiveMenu

02 · Colour

The palette

Barbera Red#EA3024Logo script
Pin Red#D2232APin, buttons
Espresso#3B2A22Menu band, dark backgrounds
Cream#EDE9E0Page background

No colour board in the original material: values sampled from the logo and the case-study boards (approximate).

03 · Applications

Where it lives.

Café Barbera · website
Home pageSo tasty, you can't stop eating
Mobile homePin top right, next to the logo
LocationsMap of the cafés, original mock-up
DeliveryOpens the Deliveroo menu
RewardsVisits turned into prizes
Coffee CultureWhere the beans come from

What I did

  • 01Website design for the MENA cafés
  • 02Home page and Tasty menu
  • 03Menu in twelve categories
  • 04Our Story timeline
  • 05News and tips
  • 06Locations map with the nearest café
  • 07Mobile pages: delivery, rewards, Coffee Culture

Credits

Client: Café Barbera, cafés in the Middle East and North Africa
Website design: Luca Colucci
Laptop and phone screens are rectified from the original presentation mock-ups (soft, low resolution). Food photos, café illustrations, archive photos and the logo belong to Café Barbera.