Mobile digital menu

Puzzles.

Design di un menu digitale per il social bar

Presentation banner for the ‘puzzles’ app

La webapp di  PUZZLES è la parte digitale di un progetto più ampio dedicato all’immaginazione del bar “Puzzles”, nato dalla serie How I Met Your Mother.

Se la brand identity definisce logo, palette e materiali coordinati, la webapp si concentra sull’esperienza del cliente, trasformando il bar in uno spazio anche digitale. Permette di consultare in modo pratico il menu con proposte ispirate alla serie, mantenendo il tono giocoso e riconoscibile del brand.

L’obiettivo è stato creare un’interfaccia intuitiva, moderna e coerente, capace di estendere l’identità del bar oltre i confini fisici. Il progetto nasce come esercizio di design su interfacce mobile in Figma.

Prima di andare avanti,

Sei curioso di scoprire l'identità visiva completa?

Ruolo: UX/UI designer

Cliente: Puzzles – Social Bar

Tools: Figma; Adobe Illustrator

 
Mockup of the Puzzles app. A hand holding a smartphone with the app open.

01.

Concept Digitale.

Il bar Puzzles prende vita anche fuori dallo spazio fisico. La webapp nasce per offrire ai clienti un accesso rapido e ordinato al menu, mantenendo coerenza con l’identità visiva del brand.

02.

Funzionalità.

Un’unica funzione: visualizzare il menu.
Birre a tema, soft drinks e proposte ispirate alla serie sono organizzati in un’interfaccia intuitiva e di facile navigazione.

03.

Wireframe.

Opening animation

Wireframe of Puzzles App

Opening animation

Wireframe of Puzzles App

Homepage

Wireframe main page of the menu

Category page

04.

Prototype.

opening interface of the ‘puzzles’ app
Prototype of page "Whiskey & Spirits"
Prototype of page "Food to share"
Prototype of main page
Prototype of page "Meals"
Prototype of page "Bottles beers"
Prototype of page "Signature cocktails"
Prototype of page "Desserts"

05.

Conclusioni.

La webapp è stata progettata come strumento semplice e immediato, concepito esclusivamente per la consultazione del menu in versione mobile. L’interfaccia mette al centro chiarezza e usabilità, con particolare attenzione al contrasto cromatico, alla leggibilità dei font e alla coerenza con l’identità visiva del brand.

Se non lo hai ancora fatto,

Vuoi scoprire anche il progetto completo di brand identity?