Selexi — Veronica Posti

ContestoContext

01 / 06

Lo stesso concorso, in posti diversi. The same competition, in different places.

Selexi organizza concorsi pubblici distribuiti su più sedi fisiche — Milano, Roma, Rekru — e trasferte esterne. Ogni giorno il team operativo coordina aule, referenti, tecnologie di somministrazione (CBT, TBT, PBT) e candidati, spesso con gli stessi eventi replicati simultaneamente in sedi diverse. Selexi organizes public competitions across multiple physical locations — Milan, Rome, Rekru — and off-site assignments. Every day the operations team coordinates classrooms, contacts, testing technologies (CBT, TBT, PBT) and candidates, often with the same events replicated simultaneously across different locations.

La pianificazione girava su strumenti generici non pensati per questa complessità. L'interfaccia costringeva le persone a un lavoro mentale aggiuntivo: ricordarsi che quell'evento a Milano e quell'altro a Roma erano, in realtà, lo stesso concorso. Planning ran on generic tools not designed for this complexity. The interface forced people into extra mental work: remembering that the event in Milan and the one in Rome were, in fact, the same competition.

"Il problema non era la mancanza di informazioni — erano tutte lì. Mancava una struttura visiva che rendesse leggibili le relazioni tra gli eventi." "The problem wasn't a lack of information — it was all there. What was missing was a visual structure that made the relationships between events legible."

Il sistema di partenza: calendario generico sovraccarico — Prima — tutto su un calendario generico, illeggibile a colpo d'occhio. Before — everything on a generic calendar, illegible at a glance.

ApproccioApproach

02 / 06

Prima capire il dominio, poi disegnare. Understand the domain first, then design.

Prima di aprire Figma ho mappato l'architettura dati con un flowchart costruito insieme al cliente. È servito a creare un vocabolario condiviso — Event, Activity, Session, Appointment — e a far emergere un errore di struttura: l'Activity Sheet era collocata dentro la Sessione, ma in realtà appartiene all'Attività. Before opening Figma, I mapped the data architecture with a flowchart built together with the client. It helped create a shared vocabulary — Event, Activity, Session, Appointment — and surfaced a structural error: the Activity Sheet was placed inside the Session, but it actually belongs to the Activity.

Correggerlo prima di disegnare ha evitato di costruire l'interfaccia sopra una logica sbagliata, che avrebbe chiesto di compilare le stesse informazioni più volte per lo stesso concorso. Fixing it before designing avoided building the interface on top of flawed logic, which would have required filling in the same information multiple times for the same competition.

Wireframe della schermata di configurazione attività — Dallo schema dati al wireframe — la struttura prima della grafica. From data schema to wireframe — structure before graphics.

Track A — LogisticaTrack A — Logistics

Quando e doveWhen and where

Libera e indipendente: aule e staff si prenotano anche se il test non esiste ancora. Nessun prerequisito — riflette la realtà operativa, dove le aule si bloccano con mesi di anticipo. Free and independent: classrooms and staff can be booked even if the test doesn't exist yet. No prerequisites — it reflects operational reality, where classrooms get booked months in advance.

Track B — Contenuto TestTrack B — Test Content

Cosa e comeWhat and how

Sequenziale, a sblocco progressivo: una state machine dove ogni step deve essere completato per accedere al successivo. Garantisce l'integrità del contenuto della prova. Sequential, progressively unlocked: a state machine where each step must be completed to access the next. It guarantees the integrity of the test content.

Il SistemaThe System

03 / 06

Il calendario è solo la superficie più visibile. Il lavoro tocca tutto il ciclo operativo — creazione evento, configurazione del test, gestione referenti, fatturazione. The calendar is just the most visible surface. The work touches the entire operational cycle — event creation, test configuration, contact management, billing.

— Overview & Sessioni— Overview & Sessions

Tutto l'evento su un pannello soloThe whole event on a single panel

Logistica, sessioni e appuntamenti convivono in un'unica vista, con lo stato di completamento sempre in alto. I due binari — logistica e contenuto — restano visivamente separati ma leggibili insieme. Logistics, sessions and appointments coexist in a single view, with completion status always visible at the top. The two tracks — logistics and content — remain visually separate but readable together.

Vista Overview con logistica, sessioni e appuntamenti

— Composizione del Test— Test Composition

Il contenuto della prova, passo dopo passoThe test content, step by step

Il binario sequenziale: regole della prova, materie del bando, composizione del test. Ogni step si sblocca quando il precedente è completo, e lo stato (Missing, Editable, Verificata) è sempre esplicito. The sequential track: test rules, subject areas from the call, test composition. Each step unlocks when the previous one is complete, and the status (Missing, Editable, Verified) is always explicit.

Riepilogo Activity Sheet e tabella di composizione del test

Configurazione dettagliata delle materie del bando

— Manage References— Manage References

Il backoffice dei referentiThe contacts backoffice

Persone, aziende e ruoli per ogni slot di appuntamento, con stati di validazione chiari — Verified, Draft, Empty — e una barra di completamento che dice sempre quanto manca prima della conferma. People, companies and roles for every appointment slot, with clear validation states — Verified, Draft, Empty — and a completion bar that always shows how much is left before confirmation.

Pannello Manage References per la gestione dei referenti

— Billing— Billing

Dalla sessione conclusa alla fatturaFrom completed session to invoice

La fatturazione degli eventi conclusi: invoice, scadenze e stato pagamento in un colpo d'occhio, con azioni rapide e riepiloghi — pagato, in attesa, scaduto — sempre in primo piano. Billing for completed events: invoices, due dates and payment status at a glance, with quick actions and summaries — paid, pending, overdue — always front and center.

Il CalendarioThe Calendar

04 / 06

Ripensato sull'asse giusto. Rethought on the right axis.

La decisione che ha cambiato tutto: abbandonare la griglia settimanale a sette colonne. Qui la dimensione rilevante non è il giorno — è la sede. Ho impilato i giorni in verticale e usato l'asse orizzontale per le sedi (TC Milano, Roma, Rekru, Dal Cliente): così ogni striscia mostra cosa succede contemporaneamente ovunque, che è la domanda che il team si pone ogni mattina. Le trasferte "Dal Cliente" hanno un bordo tratteggiato — un secondo segnale che funziona anche senza colore. The decision that changed everything: abandoning the seven-column weekly grid. Here the relevant dimension isn't the day — it's the location. I stacked the days vertically and used the horizontal axis for locations (TC Milan, Rome, Rekru, On-site at Client): so every strip shows what's happening everywhere at the same time, which is the question the team asks every morning. "On-site at Client" assignments have a dashed border — a second signal that works even without color.

Nuova vista settimanale del calendario — Vista settimanale — giorni in verticale, sedi in orizzontale. Weekly view — days vertical, locations horizontal.

Nuova vista mensile del calendario — Vista mensile — stessa logica, densità diversa. Monthly view — same logic, different density.

Design SystemDesign System

05 / 06

Un sistema scalabile, non venti card separate. A scalable system, not twenty separate cards.

Ho costruito il sistema dai componenti atomici verso l'alto, perché chiunque nel team possa aggiornare il calendario senza conoscere Figma a fondo. L'EventCard è un unico Component Set con sei proprietà combinabili — tipo, sede, attività, cluster color, dimensione, quesiti: aggiungere un'attività significa modificare una variante, non rifarne venti. I built the system bottom-up from atomic components, so anyone on the team can update the calendar without deep Figma knowledge. The EventCard is a single Component Set with six combinable properties — type, location, activity, cluster color, size, questions: adding an activity means editing a variant, not recreating twenty.

Il colore è funzionale, mai decorativo: ogni colore ha un solo ruolo. Tema chiaro, tema scuro e sidebar collassata sono documentati e coerenti, derivati dagli stessi design token. Color is functional, never decorative: each color has a single role. Light theme, dark theme and collapsed sidebar are documented and consistent, derived from the same design tokens.

Sidebar in tema chiaro, scuro e collassato — Sidebar — tema chiaro, scuro e stato collassato. Sidebar — light, dark and collapsed state.

RisultatiResults

06 / 06

Cosa ha prodotto il progetto. What the project produced.

Le schermate qui raccolte sono una selezione: il redesign copre l'intero gestionale, dalla creazione dell'evento alla fatturazione. The screens collected here are a selection: the redesign covers the entire management platform, from event creation to billing.

Deliverable: viste calendario (settimanale v1 e v2, giornaliera), Component Set EventCard documentato, sistema cluster color Master/Shadow per gli eventi multi-sede, sidebar filtri a otto gruppi, spec Figma del pannello Manage References e guida UI per la preparazione del materiale con logica condizionale per tipo attività. Deliverables: calendar views (weekly v1 and v2, daily), documented EventCard Component Set, Master/Shadow cluster color system for multi-location events, eight-group filter sidebar, Figma spec for the Manage References panel and a UI guide for material preparation with conditional logic per activity type.

Prossimi passi: prototipo interattivo con transizioni Day ↔ Week, vista mensile a componente dedicato, test di usabilità con il team commerciale e logistico, e handoff allo sviluppo con CSS custom properties derivate direttamente dal token system di Figma. Next steps: interactive prototype with Day ↔ Week transitions, a dedicated monthly view component, usability testing with the sales and logistics teams, and a development handoff with CSS custom properties derived directly from the Figma token system.