Since 1870, one pin away

Un sito web per le caffetterie Café Barbera in Medio Oriente e Nord Africa

Caso studio · 21Medio Oriente e Nord Africa · 2023Scorri

Caso studio · web design, UI/UX

Trova il Café Barbera più vicino.

Café Barbera nasce nel 1870, quando Domenico Barbera inizia a tostare caffè nel Sud Italia con una piccola tostatrice artigianale. Oggi le sue caffetterie italiane aprono in tutto il Medio Oriente e il Nord Africa, e serviva un sito per il cliente di Dubai, Baghdad o Amman: cosa ordinare, dov'è il locale, cosa c'è di nuovo. Ogni pagina tiene un pin rosso con un chicco di caffè e una sola promessa: trova il Café Barbera più vicino. Intorno, un menu in dodici categorie, la storia della famiglia raccontata generazione dopo generazione, news, delivery e un programma fedeltà, su desktop e mobile.

Cliente
Café Barbera, caffetterie in Medio Oriente e Nord Africa
Settore
Caffetterie (franchising)
Luogo
Medio Oriente e Nord Africa
Anno
2023
Café Barbera · MENA · il marchio in movimento

Il brief

Cosa serviva

Una torrefazione nata nel 1870, con caffetterie in franchising in tutto il Medio Oriente e il Nord Africa, aveva bisogno di un sito per i suoi clienti. Doveva rispondere a tre domande: cosa ordinare, dov'è il locale, cosa c'è di nuovo.

L’idea

Come l’ho risolto

Un pin rosso con un chicco di caffè resta su ogni pagina, con un pulsante Cerca sotto, così il locale più vicino è sempre a un tocco di distanza su una mappa della regione. Intorno ci sono il menu, la storia della famiglia, news, delivery e programma fedeltà, su desktop e mobile.

Since 1870, one pin away.

01 · Il pin

A un pin di distanza.

Ogni pagina tiene lo stesso pin rosso a sinistra, con un chicco di caffè dentro e un pulsante Cerca sotto. Ovunque si trovi il cliente sul sito, il locale più vicino è a un tocco di distanza, su una mappa delle caffetterie in tutta la regione. Su smartphone il pin si sposta in alto a destra, accanto al logo.

  1. LocaliUna mappa e un elenco delle caffetterie in tutta la regione.
  2. MenuUna fascia color espresso con dodici categorie, dal caffè caldo alla griglia.
  3. StoriaUna timeline delle generazioni, con foto dall'archivio di famiglia.
Render 3D per Café Barbera · MENAWeb designUI/UXStore locatorResponsiveMenu

02 · Colore

La palette

Rosso Barbera#EA3024Scritta del logo
Rosso pin#D2232APin, pulsanti
Espresso#3B2A22Fascia del menu, sfondi scuri
Crema#EDE9E0Sfondo delle pagine

Nel materiale originale non c'è una tavola colori: valori campionati dal logo e dalle tavole del caso studio (approssimativi).

03 · Applicazioni

Dove vive.

Café Barbera · sito web
Home pageSo tasty, you can't stop eating
Home mobilePin in alto a destra, accanto al logo
LocaliMappa delle caffetterie, mock-up originale
DeliveryApre il menu su Deliveroo
PremiVisite che diventano premi
Coffee CultureDa dove arrivano i chicchi

Cosa ho fatto

  • 01Design del sito per le caffetterie MENA
  • 02Home page e menu Tasty
  • 03Menu in dodici categorie
  • 04Timeline Our Story
  • 05News e consigli
  • 06Mappa dei locali con la caffetteria più vicina
  • 07Pagine mobile: delivery, premi, Coffee Culture

Crediti

Cliente: Café Barbera, caffetterie in Medio Oriente e Nord Africa
Design del sito: Luca Colucci
Le schermate di laptop e smartphone sono raddrizzate dai mock-up originali di presentazione (morbide, a bassa risoluzione). Foto dei piatti, illustrazioni dei locali, foto d'archivio e logo appartengono a Café Barbera.