Le forze trainanti del design: un case study sulla riprogettazione del sito Web

Qual è il momento più appropriato per fare un restyling di un sito web?

Chi non si è imbattuto in un sito Web che sembra obsoleto e abbandonato? Come il guscio di un camion in panne abbandonato nel deserto, chiaramente intatto da molti anni.

I siti Web vengono rinnovati per ogni sorta di motivi. Purtroppo, molte aziende non si rendono conto che il loro sito web ha bisogno di una riprogettazione e rimangono indietro quando i rivali ottengono un vantaggio competitivo migliorando il loro, aumentando di conseguenza le loro conversioni.

Un errore frequente che le aziende commettono è non considerare in anticipo cosa potrebbe accadere se le esigenze del loro sito Web diventassero più complesse e, di conseguenza, si trovano in una situazione difficile e potenzialmente costosa quando devono espanderlo. Inoltre, fattori importanti come l'ottimizzazione dei motori di ricerca (SEO), SSL (che influisce sul ranking e la sicurezza) e l'ottimizzazione dei dispositivi mobili (che influisce sul ranking e la conversione) possono spesso finire per essere trascurati.

I nuovi progetti di siti Web spesso si verificano a causa di un cambio di leadership nella parte superiore in cui viene istituita una nuova direzione del marchio e nuove persone di marketing del marchio entrano a bordo. Valutando il sito Web dell'azienda, sono inorriditi nell'apprendere che ha un'esperienza utente terribile e scoprono che manca una notevole quantità di contenuti desiderabili. Arrivando alla conclusione che è semplicemente un "sito web di brochure" mal messo insieme che non fornisce la "voce del marchio" o le conversioni che l'azienda sta cercando, il consenso è che è maturo per il cambiamento. È tempo di rinnovare il sito web.

Un rinnovamento del sito web per un'azienda automobilistica

È importante ricordare che questo case study sulla riprogettazione del sito Web automobilistico non è una riprogettazione ufficiale e commissionata. Non ho informazioni privilegiate sull'azienda, sulla loro strategia digitale o sull'industria automobilistica nel suo insieme. Sto semplicemente usando l'industria automobilistica come banco di prova per un case study sulla riprogettazione di un sito web.

In questo caso di studio esaminiamo il processo di riprogettazione del sito web per il marchio automobilistico croato, Rimac Automobili. Rimac è un marchio che è iniziato con un semplice concetto di auto e da allora si è espanso fino a diventare una grande azienda produttrice di componenti. Come molte startup, l'azienda è iniziata con un'idea che alla fine si è evoluta in qualcosa di diverso; questa espansione ha influito sulla struttura del sito Web e l'intero focus sull'utente è cambiato. La domanda del mercato ha portato l'azienda in un'altra direzione, quindi anche l'attenzione del sito Web doveva cambiare.

Ci sono molti aspetti e punti di vista diversi da considerare per ottenere un'ottima soluzione di progettazione di siti Web. Nonostante il fatto che il precedente web designer potrebbe non aver avuto le risorse o il tempo sufficiente per la ricerca UX, il wireframing, la prototipazione e i test degli utenti, quando si tratta della qualità complessiva di un progetto, anche le più piccole decisioni iniziali di progettazione possono avere un significato significativo ripercussioni negative e una qualità del sito Web non ottimale alla fine porterà a una riprogettazione del sito Web in due o tre anni. Il risultato è che, a lungo termine, i clienti pagano di più per un sito Web di quanto non si rendano conto. Una strategia di contenuto ben definita e un'architettura dell'informazione sono fondamentali quando si tratta di un nuovo design del sito web.

Quando progetto grandi siti Web aziendali, portali di notizie e altri siti ricchi di contenuti, sono un grande fan del design atomico, un sistema di progettazione flessibile che consiste nel creare tutti i componenti dell'interfaccia utente che funzioneranno per più schermi e situazioni impreviste all'inizio di un progetto. Anche se questo caso di studio particolare non è per un grande portale di notizie, renderà comunque il processo molto più semplice se viene configurata una libreria di progettazione di elementi di progettazione atomica (un insieme di componenti di progettazione attentamente considerati e ben definiti) per funzionare con dopo.

Solo dopo che il sito Web ha implementato la strategia di contenuto e l'architettura dell'informazione appropriate, l'attenzione dovrebbe spostarsi sull'esperienza dell'utente. Senza un'adeguata struttura del sito Web, il design dell'esperienza utente non ha potenza. Forse a prima vista il sito web ha un bell'aspetto e funziona bene, ma se non è integrata abbastanza flessibilità, è inevitabile che a un certo punto l'azienda dovrà prendere in considerazione una riprogettazione del sito web.

Perché riprogettare il sito web di questa azienda automobilistica?

Rimac Automobili si sta espandendo e, secondo i post ufficiali, è già in produzione una nuova concept car chiamata "Concept_One" . Al momento di questa riprogettazione del sito Web non commissionata, il loro sito Web mostrava solo un'auto, la "C_Two". Non c'era varietà visiva: il sito Web è stato creato da due modelli, quindi ogni pagina sembrava molto simile. Il design si è concentrato su immagini grandi e accattivanti dell'auto senza molto altro per illustrare la qualità dell'auto C_Two : informazioni essenziali necessarie per guidare i visitatori del sito Web verso la decisione di acquistare l'auto.

Come dice il proverbio, "Non hai mai una seconda possibilità per fare una prima impressione". È fondamentale sfruttare l'impatto di un ottimo design per convincere efficacemente i visitatori (che, in questo caso, sarebbero per lo più appassionati di auto ad alte prestazioni) ad acquistare un'auto che costa quasi un milione (USD). Tali siti Web di fascia alta devono soddisfare uno standard incredibilmente elevato. Devono trasmettere un senso di qualità e carisma e offrire un alto livello di capacità di vendita e uno stile avvincente.

Un ottimo design del sito Web deve distinguersi in un mare di siti Web simili

Un grosso problema nell'industria automobilistica è che la maggior parte dei siti Web in quello spazio tendono ad avere lo stesso aspetto. A parte diverse combinazioni di colori e immagini dell'eroe, sembra quasi che stiano utilizzando lo stesso modello di sito Web.

Ci sono molti fattori dietro le decisioni di progettazione del sito web di un'azienda automobilistica, ma è necessario fare una chiara distinzione tra un'auto da $ 1 milione e un'auto da $ 25.000 e nel modo in cui vengono presentate.

Nello spazio automobilistico di fascia alta, Ferrari, Lamborghini e Aston Martin hanno siti Web eccessivamente semplici, tipicamente aziendali che (secondo me) non offrono davvero un'esperienza utente eccezionale.

La fascia di consumo media (Volkswagen, Toyota, Peugeot e così via) ha una struttura del contenuto del sito Web molto simile agli esempi di fascia più alta menzionati sopra. La più grande differenza tra i marchi di auto di fascia alta e di fascia media è il prezzo, quindi ci si aspetterebbe che Rimac con le loro auto di fascia alta abbia un sito Web eccezionale per riflettere questa differenza e mostrare il loro costoso marchio.

Le aspettative dei clienti sono alte quando visitano questi siti Web di marchi automobilistici ultra costosi; è un grande impegno finanziario e, in modo del tutto naturale, vogliono essere sicuri di avere la macchina migliore che i loro soldi possano comprare.

Perché una Rimac è meglio di una Toyota? Guardando i loro siti web non c'è molta differenziazione tra questi due marchi molto diversi. Non dovrebbe essere evidente dalla qualità del loro sito web?

Targeting per acquirenti di auto di fascia alta con un ottimo design del sito web

Qualsiasi sito web deve considerare i suoi utenti. Chi è il target di riferimento per questo tipo di auto? Cosa stanno cercando?

Le auto di Rimac costano circa $ 850.000 e solo alcune saranno prodotte, qualificandole per un'etichetta di "edizione limitata". Sebbene non siamo in grado di identificare con precisione il tipo di cliente che sarebbe interessato all'acquisto di queste auto, possiamo presumere che la maggior parte dei clienti provenga dall'élite benestante. Il sito Web di Rimac si rivolge a questi clienti in modo efficace?

Analisi dell'architettura dell'informazione

Sul nostro sito Web di esempio, abbiamo potuto vedere che il primo elemento di navigazione era "Concept_One" (all'epoca era l'unico prodotto dell'azienda). Da allora il vero sito web è stato aggiornato. Il secondo elemento di navigazione è l'evoluzione dell'azienda, come è stata prodotta l'auto, mentre il terzo elemento sono i prodotti ei servizi dell'azienda. La quarta voce di navigazione è un altro prodotto aziendale (biciclette elettriche Greyp). Le ultime due voci sono la "stampa", che contiene i comunicati stampa, e il "blog", nessuno dei quali è particolarmente utile poiché la maggior parte delle loro notizie è stata pubblicata sui social network.

Un altro problema era che il legame di carriera era nascosto come elemento di navigazione secondario, meno importante e, vista l'enorme espansione dell'azienda, rappresentava una questione importante. Se consideriamo l'utente al centro delle preoccupazioni aziendali, vedremo che nella maggior parte dei siti Web aziendali (le eccezioni tipiche sono i siti Web aziendali/estremamente grandi) è molto importante avere un collegamento "carriera" o CTA prominente.

Il processo di riprogettazione del sito web

Immagine dell'eroe della home page prima e dopo

In origine, l'intento era quello di creare una versione più scura e più potente dell'auto. Ho trovato alcune immagini dell'auto Concept_One online e con un po' di "magia di Photoshop", ho creato la prima immagine dell'eroe per la home page. L'idea successiva era che un'animazione rivelasse lentamente l'auto, prima lo sfondo, poi un contorno dell'auto, seguito da un'immagine completamente renderizzata.

Il design della home page

Per la homepage, il concetto era quello di definire due aree visive principali: la navigazione in alto e l'immagine dell'eroe dell'auto. Questo è tutto. Per renderlo minimalista ma sorprendente, tutto ciò che non era necessario è stato rimosso. Con una rapida occhiata, tutte le cose importanti sono visibili: tutto il resto è stato spostato in pagine secondarie all'interno del sito.

Strategia dei contenuti e design

Per tali progetti di rinnovamento del sito Web, è importante anche progettare il contenuto, non solo la struttura del sito e l'estetica visiva. Poiché si tratta di una riprogettazione del sito Web senza commissione, offre più libertà di sperimentare, oltre a una flessibilità estetica in cui c'è la piena opportunità di prendere le nostre decisioni di progettazione.

Il processo è semplice:

1. Prepara il corpo del testo che apparirà sul sito web.
2. Comunica alcuni elementi di progettazione, ad esempio dettagli accattivanti su accelerazione, potenza e velocità massima, tramite icone o animazioni interattive.

In questo modo, non sono necessarie parole ausiliarie nell'interfaccia utente e si attira l'attenzione sulle aree che sono più importanti per i visitatori del sito web.

Riprogettazione della navigazione del sito web

La struttura di navigazione del sito è ora riorganizzata in base a una gerarchia di importanza. Abbiamo Veicoli come primo menu a discesa nella navigazione, che offre flessibilità di progettazione perché consente all'azienda di aggiungere più modelli di auto in futuro.

Per fornire un accesso immediato alla pagina Prodotti secondaria dalla home page, è stato deciso che per motivi di efficienza invece di creare un'altra pagina di elenchi di prodotti (su un'altra pagina web) i prodotti e le sue sottocategorie potrebbero essere incorporati nella home page come area a discesa e resi parte di la navigazione. Il design seguente mostra vari prodotti visualizzati come icone sulla home page quando i visitatori fanno clic su Prodotti nella navigazione. Per i rendering di prodotti 3D che indicano i secondi livelli in Prodotti , consiglierei Three.js, WebGL, Canvas e Greensock poiché sono strumenti standardizzati ben noti.

Pagine secondarie all'interno della riprogettazione del sito web

A differenza della Homepage , le pagine secondarie come le pagine Informazioni e Servizio utilizzano una griglia diversa, più con motivo a Z. L'intento del diverso layout della griglia è quello di fornire ai visitatori un ambiente più interessante e dinamico durante la scansione di queste pagine.

L'idea centrale è ancora il minimalismo visivo con meno testo possibile. Le persone non visitano questi tipi di siti Web automobilistici per leggere molto testo, ma per ottenere informazioni in modo rapido e visivo. Questo era il pensiero alla base di caratteri grandi e in grassetto sui titoli delle pagine e l'impiego di stili di carattere diversi.

È importante notare che questo tipo di riprogettazione del sito Web "opuscolo aziendale" è diversa da una riprogettazione del servizio. Un sito Web "opuscolo aziendale" riguarda maggiormente i prodotti di marketing. Le riprogettazioni di siti Web orientate ai servizi sono maggiormente orientate alla conversione dei clic in conversioni e all'eventuale profitto.

Conclusione

Ci sono molti altri articoli di blog di design là fuori che raccomandano perché è una buona idea per i designer impegnarsi in progetti di design non commissionati sul lato. Se vuoi progettare un progetto davvero interessante, scegli un'idea (può essere un sito Web, un'app, un prodotto SaaS aziendale) e risolvi un problema di progettazione.

Dribbble è pieno di progetti di riprogettazione concettuale non richiesti in cui i designer digitali hanno l'opportunità di mostrare le loro capacità di design. Oltre a darti un design accattivante che presenta una soluzione creativa al mondo, lavorare su un problema di prodotto "reale" mostrerà alle potenziali aziende e clienti come pensi, il tuo processo e la tua esperienza.

Nel mio caso, è stato un ottimo esercizio affrontare un sito Web automobilistico di fascia alta perché è particolarmente importante che la progettazione di siti Web in questo settore soddisfi uno standard eccezionalmente elevato.

Tuttavia, una parola di cautela: prima di tuffarsi e iniziare a progettare, è una buona idea guardare al futuro e considerare come dovrà apparire un determinato sito Web tra tre anni, non solo dal punto di vista dell'estetica del design ma anche dei contenuti, funzione e struttura. È fondamentale che la flessibilità incorporata sia una seria considerazione di progettazione. È più facile, più efficiente e molto meno doloroso apportare piccole modifiche per soddisfare le esigenze future quando il sito Web o le sottopagine funzionano e sono scalabili.

A volte, è davvero difficile convincere un potenziale cliente a fare un rinnovamento del sito web. Spesso i clienti sono riluttanti a impegnarsi per mancanza di risorse, fondi o tempo. Tuttavia, una riprogettazione del sito Web non richiesta è un ottimo modo per mostrare al mondo il processo di riprogettazione del tuo sito Web. E chi lo sa? È del tutto possibile che la riprogettazione del tuo sito Web possa impressionare un cliente riluttante abbastanza da permettergli di dare il via libera a un progetto "reale", in cui, come bonus aggiuntivo, il designer viene pagato!

• • •

Ulteriori letture sul blog di Toptal Design:

• I fondamenti della riprogettazione del sito Web: un caso di studio
• Il vero ROI di UX: casi di studio di riprogettazione B2B
• Portare IKEA fuori dagli schemi e riprogettarlo per 1,6 miliardi di utenti
• Ridisegniamo Facebook: 10 ispirazioni per iniziare
• Come deve essere progettato CrunchBase