LaPiadineria

Responsibility
UX Designer and Design System Designer
Team
4 people
Development time
3 months
Year
2025
Platform
Figma
Overview
The La Piadineria app was completely redesigned to transform the shopping experience into an interactive adventure.

Featuring an integrated gamification strategy, the app links the physical restaurant world with the virtual Piadaland universe, engaging users through missions, collections, and rewards.

The project addresses real challenges identified through shadowing and interviews, such as queue abandonment, lack of engagement during waiting times, and an ineffective loyalty program.

Features

Piadaland

Piadaland is the app’s virtual universe, designed to engage users through gameplay mechanics, collection, and rewards. Each in-store purchase unlocks exclusive content such as seasonal characters, missions, and new environments to explore.

By scanning QR codes in restaurants or pop-up books, users access timed challenges, collect badges, and earn real or digital rewards.

Piadaland enhances waiting time, strengthens brand loyalty, and creates a memorable, ongoing shopping experience.
Tre interfacce dell’app La Piadineria progettata dal team con Davide Molea, mostrate su iPhone: sezione Piadaland per avviare il gioco, interfaccia del villaggio virtuale di Piadaland e schermata con l’elenco delle missioni da completare.Tre interfacce dell’app La Piadineria progettata dal team con Davide Molea, mostrate su iPhone: schermata di accesso all’orto di Tito con visualizzazione di un secondo villaggio, interfaccia di avvio della missione “Pulisci le carote” e schermata di riepilogo dei punti guadagnati completando la missione.

MondoPiada

The new loyalty system has been completely redesigned: missions, credits, levels, and badges replace traditional discounts.Users accumulate Star Points by completing game missions, which can be converted into Piada Credits to redeem drinks or gadgets directly in-store.
Tre interfacce dell’app La Piadineria progettata dal team con Davide Molea, mostrate su iPhone: riepilogo missione completata con punti guadagnati, schermata riepilogo punti totali con tasto per convertire i punti in Piada Crediti e sezione Mondo Piada con visualizzazione dei punti totali e dei premi riscattabili.

Process

Field research

The app redesign was based on field research and qualitative interviews, revealing key issues: over half of users (54.5%) felt anxious while waiting, 21.4% of orders were abandoned, and only 9.09% used the “Mondo Piada” loyalty system. The app was perceived as not very smart and lacking engagement.
Solution
Based on this data, after a team workshop, we created a digital experience focused on gamification, storytelling, personalisation, and continuity between the physical and digital worlds.Through wireframes, logical flows, user testing, and final UI design, we designed an app that enhances the waiting experience, strengthens loyalty, and offers a memorable cross-media experience.

Colours

The colour palette uses bright, warm tones designed to convey energy and cheerfulness, perfectly aligned with the concept of play and fun.
La palette colori per l’app La Piadineria utilizza toni vivaci e giocosi per rafforzare il concetto di divertimento e gamification: rosso #FB1300, rosa #F6B1F9 e azzurro #6AB5F9. Grigio #777777 e arancione #FF5E00. Un sistema cromatico pensato per rendere l’esperienza visiva coerente, coinvolgente e memorabile.La palette colori per l’app La Piadineria utilizza toni vivaci e giocosi per rafforzare il concetto di divertimento e gamification: rosso #FB1300, rosa #F6B1F9 e azzurro #6AB5F9. Grigio #777777 e arancione #FF5E00. Un sistema cromatico pensato per rendere l’esperienza visiva coerente, coinvolgente e memorabile.

Font

The Owners Narrow and Owners font family was chosen for the project, featuring a modern, clean design that ensures excellent readability and consistency with the brand’s visual identity. These fonts guide users through both playful and functional elements, enhancing the app’s narrative and practical aspects.
Font Owners Narrow Medium utilizzato per l’app La Piadineria: in foto sono mostrati titoli H1, H2, H3 e H4 con dimensioni da 40 a 20 px. Tipografia scelta per garantire leggibilità su interfacce mobili e mantenere coerenza con l’identità visiva del brand.Font Owners Medium utilizzato per l’app La Piadineria: in foto sono mostrati titoli H1, H2, H3 e H4 con dimensioni da 40 a 20 px. Tipografia scelta per garantire leggibilità su interfacce mobili e mantenere coerenza con l’identità visiva del brand.Font Owners Narrow Medium utilizzato per l’app La Piadineria: in foto sono mostrati titoli H1, H2, H3 e H4 con dimensioni da 40 a 20 px. Tipografia scelta per garantire leggibilità su interfacce mobili e mantenere coerenza con l’identità visiva del brand.Font Owners Medium utilizzato per l’app La Piadineria: in foto sono mostrati titoli H1, H2, H3 e H4 con dimensioni da 40 a 20 px. Tipografia scelta per garantire leggibilità su interfacce mobili e mantenere coerenza con l’identità visiva del brand.

Components

We created the components in a modular way to ensure consistency and scalability. Each element was organised with variants and Boolean values, optimising usability and maintenance.
Variants
Variants manage the different configurations of components; carefully analysing them helps to understand what can coexist and what must be separated.
Booleans
Boolean values simplify the system, reducing the number of variants and making components lighter and easier to manage.

Modular design

Thanks to the use of colour variables, we were able to quickly modify the design and test its appearance in both light and dark modes.