Ex Studio è un progetto di UX design per una piattaforma di gestione progetti pensata per combinare semplicità operativa e potenza funzionale. Nasce da un’esigenza concreta: offrire uno strumento flessibile e accessibile che non richieda lunghe configurazioni, ma che sia capace di supportare team di qualsiasi dimensione con funzionalità avanzate come la gestione a sprint, il tracciamento del tempo e l’assistenza predittiva tramite AI.

Il progetto è stato interamente sviluppato come prototipo ad alta fedeltà in Figma, con particolare attenzione all’uso degli strumenti nativi dello strumento: componenti, variabili, auto layout e documentazione interna, per creare un design system completo e scalabile.

Panoramica

Caratteristiche Principali

• Schedule personale con vista task e attività, in versione mobile e desktop
• Gestione progetti a sprint con assegnazione dinamica di task, stati e deadline
• AI per analisi predittiva: suggerimenti su complessità e tempi di completamento
• Storico attività, tracker orario integrato, report esportabili e dashboard visuali
• Interfaccia modulare e adattiva, ottimizzata per l’uso quotidiano da desktop e mobile

Obiettivi & Requisiti

L’obiettivo era creare un sistema alternativo ai software esistenti, spesso troppo generici o troppo verticali, con una UX che potesse essere usata tanto da un freelance quanto da un project manager in un grande team. I requisiti chiave includevano:

• Rapidità di comprensione per chi entra per la prima volta nell’ambiente
• Gestione del carico di lavoro con suggerimenti dinamici tramite AI
• Visibilità globale dello stato dei progetti per ogni utente, a seconda del proprio ruolo
• Adattabilità UI su dispositivi diversi, senza compromessi funzionali
• Progettazione modulare già pronta per una possibile fase di sviluppo front-end

Ricerca & Analisi

Abbiamo analizzato oltre 10 strumenti tra i più usati (Trello, Asana, ClickUp, Jira, Notion, Linear...) per individuare pattern utili da conservare e criticità da superare. Le principali aree di intervento emerse sono state: la dispersione dei contenuti, la rigidità nella gestione degli sprint, e l’assenza di intelligenza predittiva applicata al task management.

Prototipazione in Figma

Abbiamo costruito un prototipo completo e responsive utilizzando strumenti avanzati di Figma, che hanno permesso di lavorare con velocità, coerenza e precisione:

• Componenti principali per task, progetti, card statistiche e sezioni UI
• Variabili globali per temi colore (light/dark), breakpoint e stati interattivi
• Auto layout per una gestione fluida di ogni sezione, facilitando l’adattamento da mobile a desktop
• Componenti nidificati per badge di stato, pulsanti, menu e icone di stato riutilizzabili
• Prototipi interattivi con microtransizioni, flussi completi e simulazione realistica del comportamento dell’interfaccia
• Documentazione interna direttamente nel file, utile per sviluppatori, designer e stakeholder

Funzionalità

My Schedule – Tasks View (Mobile)

La versione mobile della vista task mostra le attività divise per stato (da fare, completati, cancellati) in una struttura a colonne scorrevoli orizzontalmente. L’interfaccia è ottimizzata per l’uso con una sola mano e si adatta in tempo reale alle azioni dell’utente, con feedback visivi chiari e immediati.

My Schedule – Tasks View (Desktop)

La vista desktop presenta la stessa struttura funzionale ma arricchita da dettagli e interazioni aggiuntive. Le card dei task possono essere espanse inline per una modifica rapida, mentre i filtri permettono di isolare task per priorità, assegnazione o scadenza.

My Schedule – Activities View (Mobile)

Nella vista attività, l’utente può visualizzare la timeline delle azioni previste, filtrate per progetto o categoria. Anche su mobile, le informazioni principali sono immediatamente accessibili, mantenendo la leggibilità senza sacrificare funzionalità.

My Schedule – Activities View (Desktop)

La versione desktop della vista attività estende la panoramica, mostrando una timeline globale con tutti i progetti attivi. Le attività sono raggruppate e categorizzate visivamente per fornire una chiara comprensione dello stato generale del carico di lavoro.

Caratteristiche UX

Design System modulare

Tutto il prototipo è stato costruito su un design system modulare che consente la massima coerenza visiva e funzionale. Ogni componente è stato progettato come elemento riutilizzabile e configurabile, grazie all’utilizzo di componenti Figma con varianti e variabili tematiche. Questo approccio ha permesso di garantire coerenza, scalabilità e rapidità nei futuri adattamenti, semplificando anche il passaggio dallo UX design allo sviluppo frontend.

Esperienza responsive

Uno dei principi guida del progetto è stato quello di creare un’interfaccia veramente responsiva, non solo in termini di layout, ma anche di logica e priorità delle informazioni. La versione mobile è ottimizzata per l’interazione rapida e la consultazione veloce, mentre la versione desktop offre una visione panoramica estesa, utile per la pianificazione e l’analisi multiprogetto.

Accessibilità e chiarezza

L’interfaccia è stata disegnata per essere leggibile, ordinata e inclusiva. Sono stati scelti colori con sufficiente contrasto, tipografia scalabile, e gerarchie visive che aiutano a distinguere elementi interattivi da elementi informativi. Le icone sono sempre accompagnate da testo esplicativo, e la navigazione può essere effettuata anche tramite tastiera. L’obiettivo è permettere un’interazione semplice e diretta, anche in contesti ad alto carico cognitivo o da parte di utenti con disabilità visive o motorie.

Feedback visivo e microinterazioni

Ogni azione significativa è accompagnata da un feedback visivo immediato. Le microinterazioni sono progettate per rinforzare la percezione di controllo e reattività dell’interfaccia, migliorando la fiducia dell’utente e la fluidità operativa durante le fasi di gestione quotidiana del progetto.