Cabinet Manager: app per la gestione dei cabinet della fibra ottica

Prova tecnica (3 giorni di tempo) superata con successo durante la mia selezione come UX/UI designer a Eagleprojects.

La sfida

Mi è stato chiesto di progettare da zero un'app che facilitasse la gestione dei cavi e delle porte dei cabinet da parte degli operatori della fibra ottica. L'app doveva consentire agli utenti di associare dei QR code alle porte dei cabinet, velocemente e riducendo il margine di errore.

Se come me prima di affrontare questa prova, non hai idea di come funziona tutto ciò, clicca il tasto qui sotto per leggere nel dettaglio il brief. Troverai contesto, glossario e anche il flusso richiesto.

Brief

Obiettivo della prova

Questo progetto è servito a valutare le mie capacità di ragionamento logico e di tradurre situazioni complesse in interfacce semplici ed efficaci.

Richiesta: un progetto Figma con le schermate necessarie a rappresentare la soluzione proposta; specificando che non sarebbe stata valutata la quantità di schermate prodotte e che il focus non sarebbe stato sul prototipo interattivo. Inoltre sarebbe stata premiata un'organizzazione strutturata del file, una soluzione progettuale non gravosa sui tempi di sviluppo software e ben accette proposte di features complementari.

Soluzione

Trovi il file Figma al pulsante in basso. Contiene:

- WIREFRAMES; solo quelli che mi sono stati necessari a dare forma a ciò che la mia mente elaborava, non era necessario farlo per ogni singola schermata.

- STYLE GUIDE; Una pagina in cui raccolgo gli stili creati per tipografia, palette colori e layout.

- COMPONENT LIBRARY; una pagina che raccoglie e categorizza in maniera ordinata e intuitiva tutte le componenti e le rispettive varianti, compreso il logo, ho realizzato anche quello.

- MOCKUPS; le schermate ad alta fedeltà utili a rappresentare la soluzione per i flussi richiesti.

FILE FIGMA

Lista cabinet

Una volta effettuato l'accesso, la lista dei cabinet fa da pagina di partenza.

Dalla mappa (feature complementare) l'utente può vedere dove si trovano i cabinet che gli sono stati assegnati e pianificare in modo più efficiente l'ordine degli interventi da fare basandosi sulle distanze.

Overview porte

Selezionando il cabinet dalla lista, l'utente atterra sulla relativa overview dove gli elementi della griglia sono tappabili e rappresentano un sistema di filtraggio esclusivo, nel senso che permettono di visionare una sola categoria per volta.

Lista porte

Accedendo alla lista delle porte del cabinet si ha una restituzione visiva intuitiva e immediata del loro stato.

Inoltre si dispone di un sistema di filtri non esclusivo; nel senso che si possono più categorie contemporaneamente tramite le check boxes (presenti nella modale tappando su 'Filtra').

Inoltre si può cercare una porta anche per riga e/o colonna oltre che per settore (utenza/parcheggio).

Gestione porta

Da qui è possibile scegliere a quale porta del settore opposto abbinarla. Vedere a quale QR code è associata (se lo è) ed eventualmente associarla a un altro.

Rilevazione QR codes

Inquadrando l'interno del cabinet, la fotocamera rileva automaticamente tutti i QR code presenti, dando anche all'utente indicazioni (es. "avvicina il dispositivo"). Scattando la foto si ottiene la lista dei QR.

QR code rilevati

Qui come per la lista delle porte si ha una restituzione visiva dello stato dei QR immediata e intuitiva.

Gestione singolo QR code

Qui l'utente può associarlo alla porta su cui è posizionato fisicamente, associarlo ad un'altra porta oppure eliminarlo.

In conclusione

Sebbene alla fine, questa volta, la scelta non sia ricaduta su di me; questa prova tecnica è stata molto apprezzata e mi ha permesso di arrivare all'ultimo step di selezione insieme soltanto ad altri 2 candidati, per un ruolo in un'azienda in cui gli standard sono molto elevati. È stata un'occasione per cimentarmi in qualcosa di molto complesso e in tempi brevissimi e di avere conferma del mio livello di competenza. Voglio pertanto ringraziare Eagleprojects per questa opportunità.

© 2024 Luigi Andrea Cotini