CASE STUDY

Case Study "“ Token Quest

Web App in React per trasformare la gestione delle attivitè  in un"™esperienza fantasy

Overview

Token Quest è¨ una web app che applica meccaniche da gioco di ruolo alla gestione delle attivitè  quotidiane, con un obiettivo preciso: ridurre il senso di colpa legato al tempo libero. In un contesto sociale che premia la performance continua, la piattaforma permette agli utenti di riconquistare tempo per sè© attraverso missioni, badge e ricompense basate non su progressi estetici, ma su tempo da dedicare al piacere.

  • Ruolo: ideazione, UX, UI, illustrazioni, branding, sviluppo front-end, integrazione backend
  • Tecnologie: React, React Router, Firebase Authentication, Firebase Database, localStorage
  • Durata: 2 settimane (prototipo completo)

1. Problema

Con amici, familiari e utenti potenziali emergeva lo stesso pattern: anche quando si completano tutti i propri doveri, leggere un libro, giocare o riposare genera senso di colpa. Le esistenti app di produttivitè  offrono avatar, skin o statistiche, ma nessuna fornisce l"™unica ricompensa realmente percepita come preziosa: tempo da dedicare a sè©.

Pain point principali rilevati:

  • percezione di "perdere tempo" durante le attivitè  ricreative
  • mancanza di strumenti che rendano il tempo libero un premio tangibile
  • flussi complicati o troppo "aziendali" nelle app di produttivitè 
  • assenza di un immaginario coinvolgente

2. Concept & Vision

L"™idea nasce dall"™unione tra design comportamentale e immaginario fantasy.

La domanda guida:
"E se la nostra giornata fosse un"™avventura e il tempo libero una ricompensa epica?"

La scelta del tema fantasy non è¨ solo estetica:

  • permette di reinterpretare le attivitè  quotidiane come missioni
  • inserisce distanza emotiva e alleggerisce il giudizio su sè© stessi
  • rende la routine piè¹ motivante grazie a badge, progressi, narrazione

Per esempio:

  • andare in palestra diventa "allenarsi per il duello"
  • una giornata lavorativa diventa una "missione lunga" da 8 frammenti di energia

3. Ricerca & Competitor Analysis

Analizzando app di gamification e to-do list (Habitica, Finch, Forest), è¨ evidente che:

  • le ricompense sono quasi sempre virtuali (skin, avatar, monete interne)
  • non esiste un legame tra attivitè  svolte e tempo libero reale
  • le interfacce fantasy sono di solito sovraccariche o infantili

Lo spazio di innovazione è¨ chiaro: una UI fantasy moderna e pulita, con reward realistici.

4. Design: UI/UX

Processo

  • wireframe iniziali sviluppati in Figma
  • definizione della palette basata su nero, giallo pop e bianco
  • studio di trasparenze per ottenere un"™estetica medievale contemporanea
  • sfondo illustrato: un dipinto fantasy medievale che guida l"™atmosfera del prodotto
  • UI minimale per evitare il "rumore visivo" tipico del fantasy

Sfide UX risolte

  • Reset giornaliero intelligente: le attivitè  completate restano marcate per 24h per evitare frustrazione, ma si resettano automaticamente a mezzanotte tramite logica locale.
  • Flessibilitè  delle card: attivitè  e ricompense sono predefinite ma completamente personalizzabili.
  • Onboarding chiaro: la registrazione via email/password introduce l"™utente in un contesto narrativo, non tecnico.

5. Funzionalitè  chiave

  • Missioni (attivitè ): completandole si guadagnano frammenti di energia
  • Ricompense reali: i frammenti possono essere convertiti in tempo libero (gioco, film, lettura)
  • Badge: si sbloccano al raggiungimento di milestone (es. 100 frammenti)
  • Dashboard con sfondo medievale
  • Attivitè  predefinite e personalizzabili
  • Salvataggio progressi cross-device tramite Firebase
  • Reset giornaliero automatico

6. Tecnologia

  • Frontend: React
  • Routing: React Router
  • State Management: stato locale e componenti riutilizzabili
  • Autenticazione: Firebase (email/password)
  • Database: Firebase Realtime + fallback localStorage
  • Persistenza: dati sincronizzati per l"™uso su piè¹ device
  • Obiettivo secondario: testare la velocitè  di sviluppo con IDE su Windsurf + IA

7. Sviluppo

Durata complessiva: 2 settimane

Il lavoro piè¹ complesso è¨ stato garantire la corretta gestione del ciclo giornaliero: il sistema doveva marcare le attivitè  completate per 24h, ma al tempo stesso ripristinarle automaticamente senza intervento dell"™utente. Il risultato è¨ un flusso naturale, che abbassa il carico cognitivo e mantiene coerenza narrativa.

8. Risultati

Il prototipo è¨ stato testato da amici e familiari con risultati significativi:

Effetti riportati:

  • calo del senso di colpa legato al tempo libero
  • migliore percezione del "permesso" di dedicarsi a sè©
  • apprezzamento per il tema fantasy moderno e non infantile

Principale limite emerso: richiede comunque la volontè  di aggiornare l"™app, quindi non è¨ adatta a chi non ama il tracking quotidiano.

9. Roadmap

  • recap settimanale via email
  • nuovi badge narrative-driven
  • potenziamento UI e nuove illustrazioni
  • statistiche settimanali e mensili
  • integrazione con notifiche e reminder
  • shop interno con nuovi tipi di ricompensa

10. Learnings

  • un"™estetica fantasy puè² essere moderna, pulita e funzionale
  • la gamification non deve premiare solo con elementi virtuali: il tempo libero è¨ una reward molto piè¹ potente
  • piccoli automatismi (reset, salvataggi distribuiti) migliorano drasticamente l"™esperienza
  • ideazione, design e sviluppo end-to-end in 2 settimane è¨ possibile con un processo snello

Ti interessa un progetto simile o vuoi vedere il codice del prototipo? Scrivimi e ne parliamo.

← Torna ai Progetti