Dietro le quinte

«Cuore e anima»: per questo motivo il nostro team di sviluppo e design UX ha creato un Design System

Coya Vallejo Hägi
23.12.2022
Traduzione: Leandra Amato

Pulsanti intuitivi, link utili e colori armoniosi. Insieme, designer UX e sviluppatori e sviluppatrici di software assicurano il buon funzionamento del nostro negozio online. La collaborazione è diventata più semplice grazie a un sistema di design.

In un'intervista, la sviluppatrice software Christina Heidt e il lead UX designer Leonardo Hauschild spiegano cos'è il sistema di progettazione e perché facilita il lavoro con team in crescita.

Leonardo, come posso immaginare il tuo lavoro?
Leonardo Hauschild, Lead UX Designer: I siti web sono costituiti da un front-end e da un back-end. Se digiti www.galaxus.ch come cliente, vedrai il nostro front-end. Noi UX designer lo progettiamo. Siamo responsabili dell'aspetto, della funzionalità e dell'usabilità del sito.

E cosa fai tu, Christina?
Christina Heidt, sviluppatrice software: Scrivo il codice che implementa gli elementi progettati e le funzionalità previste.

Come lavorate insieme?
Leonardo: Ogni UX designer lavora in un team interfunzionale con gli sviluppatori e un product owner. Quindi i nostri designer UX sono distribuiti in diversi team. Questo crea un grande sforzo di coordinamento. Anche se lavoriamo in team diversi, dobbiamo fare in modo che il negozio online sia «Digitec Galaxus» e non «Team Isotopes» oder «Team Endeavour». Con la nostra struttura, è facile cadere in questa trappola.

Christina: Il Design System ha lo scopo di contrastare questo fenomeno. Nel frattempo, siamo un team di 150 sviluppatori e sviluppatrici. Ad un certo punto ci siamo resi conto di aver bisogno di modi per comunicare tra noi in modo più efficace. Volevamo creare un luogo in cui le informazioni convergessero. Questo dovrebbe consentire di progettare un negozio che abbia un aspetto e una sensazione coerenti.

Questo posto è il Design System?
**Esattamente. È un'applicazione web che riunisce il nostro strumento di progettazione «Figma» e la base di codice. È possibile vedere come vengono progettati alcuni elementi nel Design Tool. Accanto ad esso si trovano i componenti di codice associati. Inoltre, l'applicazione dispone di una funzione di ricerca che ci fornisce un ulteriore supporto nel nostro lavoro.

Qual era il problema principale prima dell'introduzione del sistema di design?
Christina: Trovare le informazioni giuste, ad esempio per programmare una casella di controllo. Sebbene il componente «Checkbox» esistesse in Figma, mancava il relativo codice. Poi ci si chiede come sviluppatore: ma perché? Il codice per la casella di controllo non esiste ancora? In molti casi, la base di codice era archiviata con un nome diverso. Un altro problema era la coerenza della pagina.

Che cosa vuoi dire?

Christina: Come sviluppatrice, se non riesco a trovare il componente nel codice, lo implemento da sola. Ma poi abbiamo lo stesso elemento più volte. Il progetto non è stato sempre implementato nello stesso modo in queste molteplici implementazioni. Questo porta a delle incongruenze. Questo problema è aumentato da quando abbiamo più persone che lavorano per noi e la base di codice è cresciuta. Dobbiamo assolutamente filtrare le ridondanze e fare in modo di non fare le cose «quasi uguali».

Leonardo: «Quasi uguali» è quasi peggio di completamente diverso.

La sviluppatrice software Christina Heidt e l'UX designer Leonardo Hauschild parlano del Design System di Digitec Galaxus.
La sviluppatrice software Christina Heidt e l'UX designer Leonardo Hauschild parlano del Design System di Digitec Galaxus.
Fonte: Christian Walker

Come utente medio, mi accorgo di queste incongruenze?

Christina: Credo che la maggior parte delle persone non se ne accorga, a meno che non sia un designer. Ma inconsciamente accade qualcosa. Ci si rende conto che l'interazione con il negozio non è così positiva come potrebbe. Nel peggiore dei casi, la nostra clientela non riconosce più alcuni elementi perché hanno un aspetto diverso a seconda della pagina. A causa di questa confusione, potrebbe poi voltare le spalle al negozio. Quando tutto si comporta in modo diverso, non si sa come interagire.

Leonardo: Internamente, sentiamo il dolore non appena dobbiamo cambiare qualcosa nell'interfaccia utente.

Perché?

Leonardo: Diciamo che dobbiamo dare a una casella di controllo un nuovo design. Poi i team di sviluppo e di UX design cercano la casella di controllo e trovano un elemento da rivedere. Tuttavia, ci sono due caselle di controllo che sembrano uguali, ma sono programmate in modo diverso. Questa seconda casella di controllo non è stata ridipinta, per così dire, e quindi continua a infestare la pagina nella sua vecchia forma. Se le caselle di controllo non sono programmate in modo uniforme, regna il caos. Dobbiamo cercare e sostituire tutto manualmente. È proprio questo il problema della potenziale modalità scura.

Cosa c'entrano il sistema di design e la modalità scura?

Christina: Il sistema di design è una base importante per questo. Senza di esso, il Dark Mode sarebbe molto più complesso. Abbiamo apportato alcune modifiche al sistema di design in modo da poter supportare la modalità scura, facendo così un primo passo. Il modo in cui procedere deve essere deciso da tutti insieme.

Come percepisce la nostra clientela il Design System dall'esterno?

Christina: La nostra pagina sta diventando più consistente. O meglio, spariranno elementi che prima erano inconsistenti. Si tratta di un processo continuo. Per questo motivo il sistema di design non sarà mai finito, perché il nostro sito web è in continua crescita e cambiamento.

Leonardo: Soprattutto, speriamo che i cambiamenti radicali non siano più così dolorosi per noi. In altre parole: se coloriamo di rosa un checkbox, tutte le caselle di controllo delle varie pagine diventano rosa. In questo modo non dovremo più rincorrere le caselle di controllo programmate in modo alternativo per colorarle manualmente di rosa. Perché questo processo è laborioso.

Cosa vi è piaciuto di più di questo progetto?

Christina: Il sistema di design è stato sviluppato da noi e ci abbiamo messo molto cuore e anima. Ora stiamo raccogliendo ciò che abbiamo seminato, e questo è davvero appagante. Abbiamo creato una base per poter implementare più facilmente nuovi progetti e funzionalità. È un lavoro impegnativo, ma divertente.

Leonardo: È proprio questo che mi piace di Digitec Galaxus: non ci si annoia mai. Ci sono sempre nuove idee su come migliorare le cose. Chissà cosa affronteremo la prossima volta?

Vuoi vedere come vengono sviluppate e progettate le nostre caselle di controllo, i pulsanti o i colori? Allora dai un'occhiata al nostro Design System qui.

Vuoi lavorare da Digitec Galaxus? Consulta i nostri annunci di lavoro.

A 47 persone piace questo articolo


User Avatar
User Avatar

«Io voglio tutto: le discese ardite e le risalite stordite, la crema in mezzo!» – queste parole di un noto personaggio televisivo statunitense rispecchiano pienamente il mio pensiero. Vivo secondo questa filosofia di vita anche a lavoro. In altre parole: trovo che ogni storia, dalla più insignificante alla più incredibile, abbia il suo fascino. 


Tecnologia
Segui gli argomenti e ricevi gli aggiornamenti settimanali relativi ai tuoi interessi.

Potrebbero interessarti anche questi articoli

  • Dietro le quinte

    Con la nostra funzione di confronto dei prodotti lo shopping è più semplice

    di Coya Vallejo Hägi

  • Dietro le quinte

    Lego e iPhone: le ricerche più frequenti della clientela

    di Manuel Wenk

  • Dietro le quinte

    «Hackfest» da Digitec Galaxus: 54 ore di lavoro, 3 minuti di presentazione

    di Martin Jungfer

23 commenti

Avatar
later