In che modo tonik ha riprogettato il sito Web di Voucherify?

Crescere velocemente è una maledizione e una benedizione per ogni startup in rapida crescita. Quando le nuove funzionalità vengono lanciate regolarmente e il mercato di riferimento cambia, un sito Web rilasciato solo l'anno prima potrebbe essere già obsoleto.

È un ottimo segno, ma è ugualmente fastidioso quando i tuoi visitatori non possono vedere cosa stai facendo. Se non aggiorni il tuo sito Web, ti giudicheranno in base al passo obsoleto.

All'inizio del 2021, Voucherify stava affrontando problemi simili. Il sito Web non spiegava bene il prodotto, le animazioni erano molto astratte e non correlate al prodotto e lo stile e il marchio non piacevano al tipo di cliente aziendale esperto di tecnologia che stavano cercando di raggiungere. I colori pastello, le illustrazioni astratte e il carattere da cartone animato di un minatore non erano abbastanza per far ridere la gente con gli abiti.

In secondo luogo, il sito Web è sembrato violato insieme piuttosto che costruito con cura. Piccole incongruenze, interazioni discutibili e mancanza di flusso generale non sembravano un grosso problema se esaminate separatamente, ma insieme hanno creato una prima impressione scadente.

La sfida

Voucherify ci ha contattato per aiutarli a riprogettare il loro sito Web, in modo che parli al gruppo target, e creare un sistema di progettazione, per consentire al team di lanciare più landing page. Ma aspetta, chi siamo ?

Siamo tonik, uno studio di design digitale. La maggior parte delle volte, lavoriamo con startup in fase iniziale per aiutarle a lanciare i loro MVP, ma ciò non significa che non collaboriamo con aziende più affermate. Clienti come Segment, Auth0 o Chronosphere confermano la nostra capacità di integrarci in un team esistente.

Per questo progetto abbiamo unito le forze di due designer – Mikolaj Biernat & Mikolaj Szymkowiak – e Aga Kaczmarek, che ha gestito il lavoro come Project Manager. Con un sano affetto per Agile da entrambi i team, non abbiamo fissato scadenze rigide ma volevamo concludere il progetto in pochi mesi. Allora, da dove siamo partiti?

Il processo di progettazione

Prima di sporcarci le mani, abbiamo delineato il processo di progettazione per definire quali metodi di progettazione utilizzeremo per raggiungere l'obiettivo. Ci ha anche aiutato a stimare la sequenza temporale del progetto, il numero di iterazioni e la quantità di feedback di cui avremo bisogno dal cliente in ogni fase. Ecco cosa ci è venuto in mente.

Creazione dell'architettura dell'informazione

Abbiamo dato il via alle cose creando un'architettura dell'informazione (IA). È un diagramma che mostra la relazione tra tutte le sottopagine (e talvolta anche il loro contenuto), il che rende facile immaginare la navigazione. Quando lavoriamo alla riprogettazione di un sito Web, utilizziamo l'IA per comprenderne il contenuto e visualizzare l'ambito di un progetto.

Impostare l'atmosfera giusta

I clienti spesso hanno una visione di come vogliono che sia il loro nuovo sito web. Il momento perfetto per stenderlo è quando creiamo la moodboard del progetto. È una raccolta di riferimenti visivi che utilizziamo per allinearci all'aspetto grafico che stiamo cercando. La cosa migliore è che non perdiamo tempo a cercare gli aggettivi giusti: gli screenshot dei benchmark funzionano migliaia di volte meglio.

Il progetto

Oltre alla riprogettazione puramente visiva, il team di Voucherify ha voluto aggiornare il contenuto delle pagine chiave. Quello che dici sul tuo sito web è molto più importante del modo in cui viene presentato. Ecco perché abbiamo prima lavorato con i wireframe per trovare il layout giusto per il contenuto. Puoi considerarli il progetto del sito web. Non usano colori, grafica o altri effetti visivi, quindi è più facile concentrarsi sulle basi.

Un rapido concerto laterale: aggiornamento del logo

Quando abbiamo iniziato a eseguire l'iterazione sui wireframe con i colori e i caratteri giusti, abbiamo individuato un'opportunità per una rapida vittoria per Voucherify come marchio. Il loro logo – la sua tipografia, per essere precisi – sembrava sbilanciato. L'abbiamo leggermente modificata per migliorare la leggibilità senza reinventare l'intero marchio.

Il quadro completo: i progetti finali

Alla fine, grazie a tutte le valutazioni che abbiamo fatto in precedenza, tutto si è riunito. Il sito web di Voucherify è stato ridisegnato con il nuovo linguaggio visivo. Vale la pena ricordare che invece di lavorare sui progetti finali a porte chiuse, abbiamo collaborato a stretto contatto con lo sviluppatore Webflow di Voucherify, Piotr, che distribuiva ogni sottopagina in modo iterativo, mentre ne terminavamo la progettazione. In questo modo potremmo reagire a tutti i problemi che incontriamo lungo il percorso e avviare il progetto più velocemente, rispetto al lavoro in un silo.

Costruire i LEGO: preparare un sistema di progettazione

Parallelamente alla riprogettazione, stavamo lavorando al sistema di progettazione alla base del sito web. Il risultato conteneva una serie di elementi costitutivi e linee guida su come utilizzarli in modo che chiunque nel team di marketing di Voucherify potesse progettare (costruire da componenti pronti) una pagina di destinazione. In una realtà di start-up, le cose si muovono velocemente e hai bisogno di strumenti per eseguire i tuoi piani in modo rapido ed efficiente: il sistema di progettazione doveva assecondarlo.

Ogni elemento di design, da semplici token contenenti informazioni su colori, caratteri e ombre, a intere sezioni, è accuratamente progettato per essere scalabile per una varietà di contenuti. Grazie alla potenza di Figma, il nostro strumento di progettazione preferito (almeno al momento in cui scrivo), tutti gli elementi sono disponibili con un semplice trascinamento della selezione.

I risultati del progetto

Con cosa siamo finiti?

Sito web basato su Webflow

Ovviamente non abbiamo sviluppato il sito web da soli – è stato fatto da Piotr Gacek, lo sviluppatore front-end di Voucherify (ottimo lavoro!) – ma non sarebbe giusto elencare un file di progettazione come frutto della nostra collaborazione. Dopotutto, un sito Web è un pezzo interattivo su Internet, non un'immagine statica. Grazie a Webflow, il team di Voucherify ha potuto costruirlo in pochissimo tempo.

Sistema di progettazione

Il sistema di design che abbiamo creato non è solo una libreria di design che abbiamo utilizzato per accelerare il processo di ideazione. Per garantire la coerenza tra i team, Piotr ha replicato i componenti in Webflow. In questo modo Voucherify potrebbe semplificare la creazione di più pagine di destinazione in futuro. ‍

Risorse di marketing

Diamo maggiore enfasi agli elementi visivi come illustrazioni o icone in modo che possano funzionare in contesti diversi. In questo modo, il nuovo linguaggio visivo non vive esclusivamente sul sito web. Altre risorse di marketing, come gli ebook, traggono gli elementi chiave dalla stessa libreria di design.

"Sono stato il project manager per la parte Voucherify per questa riprogettazione. Mi è davvero piaciuto lavorare con tonik come nostra agenzia di design. Hanno lavorato in modo agile e iterativo, in cui abbiamo potuto intervenire in ogni fase del design, aumentando il efficienza della nostra collaborazione. Sono stati sempre aperti alle critiche e hanno preparato nuove versioni del design tutte le volte che glielo abbiamo chiesto. Di solito erano raggiungibili e hanno risposto rapidamente. Incontri settimanali e riepiloghi giornalieri inviati tramite Slack, nonché un grafico di monitoraggio mi ha dato un quadro molto chiaro dello stato di avanzamento del lavoro e prevedeva le tempistiche del progetto. Apprezzo molto la trasparenza, la chiarezza e l'apertura del loro team. Siamo molto contenti del design finale del sito web. Il sistema di progettazione ha già aiutato mettiamo insieme un paio di nuove landing page e creiamo quasi un centinaio di mock-up promozionali. È davvero facile da usare anche per i non sviluppatori". – Katarzyna Banasik, Product Marketing Manager di Voucherify.

Qual è il prossimo?

Un lancio di successo dopo, abbiamo avviato una partnership con Voucherify per aiutare loro e i loro clienti con tutto il design digitale, concentrandoci su prodotti e branding. Leggi l'annuncio completo per saperne di più.