Riprogettazione del mio sito Web a basso costo che ha aumentato i tassi di conversione del 42% in 7 settimane

Fare una riprogettazione completa del sito Web del mio negozio online è stato nella mia lista di "cose ​​da fare" per molto tempo, ma non sono riuscito a premere il grilletto perché non è mai stata una priorità.

Ecco la cosa. Il mio tasso di conversione è sempre stato abbastanza buono (>3%). E il mio negozio online è cresciuto a doppia cifra ogni anno, quindi perché scuotere la barca?

Ma poi ho partecipato a una riunione di mente 3 mesi fa con un gruppo di altri veterani dell'e-commerce e ho deciso di parlarne durante il mio turno sul "seat caldo".

Ciao a tutti. Sto pensando di riprogettare il sito, ma il mio attuale tasso di conversione è ancora abbastanza buono. Devo aggiornarlo subito? E pensi che sia abbastanza grave che io debba aggiustarlo oggi? Posso rimandare di un altro anno?

Le risposte che ho ricevuto sono state terribilmente dolorose da ascoltare.

• Questo sito sembra essere stato progettato negli anni '90. Se facessi una riprogettazione, scommetto che potresti ottenere un aumento del 50% nel tasso di conversione. – Mike Jackness
• Gestisci un corso? Non seguirei il tuo corso se lo vedessi. – Kevin Stecko
• Questi sono i tipi di siti che mi piace acquistare , sistemare e poi rivendere con profitto. – Dana Jaunzemis

Ascoltare questi commenti ha davvero ferito il mio orgoglio e ho fatto del mio meglio per non essere sulla difensiva.

Ma non appena sono tornato dalla mente ho immediatamente contattato il mio designer, ho creato un rapido mockup in Photoshop e ho iniziato a lavorarci sopra .

Il mio processo per l'implementazione è stato piuttosto semplice. Ho esaminato e sfogliato personalmente ogni singola pagina, l'ho stesa "approssimativamente" come volevo che fosse e ho chiesto al mio designer di raccogliere i pezzi per farla "sembrare migliore".

Ho messo in preventivo circa 6 settimane per portare a termine la riprogettazione con il mio contributo di circa 40 ore del mio tempo. Ogni singola pagina del sito è stata completamente rifatta.

Nel complesso, il progetto ha impiegato 7 settimane a causa di circostanze impreviste con la compatibilità del browser (ti odio IE!) e mi è costato $ 1840 .

Nota dell'editore: ecco un collegamento al mio nuovo sito e puoi utilizzare la macchina di ritorno per vedere la vecchia versione.

Ottieni il mio mini corso gratuito su come avviare un negozio di e-commerce di successo

Se sei interessato ad avviare un'attività di e-commerce, ho messo insieme un pacchetto completo di risorse che ti aiuteranno a lanciare il tuo negozio online da zero. Assicurati di prenderlo prima di partire!

Clicca qui per scaricare

Risultati del restyling del mio sito web

I seguenti risultati di conversione sono per dispositivi mobili, desktop e tablet solo per il traffico CPC di Google .

Poiché il mio sito riceve un sacco di traffico da pagine di contenuti che non si convertono necessariamente in vendite, l'esecuzione dei numeri per il traffico pubblicitario ppc mirato ha avuto più senso a scopo di confronto.

• Tassi di conversione desktop aumentati del 46% Aggiornato!
• Tassi di conversione mobile aumentati del 21% Aggiornato!
• Tassi di conversione tablet aumentati del 25% Aggiornato!

Nota: i miei dati sul tasso di conversione sono stati confrontati con lo stesso periodo dell'anno precedente per eliminare variabili come la stagionalità e le fluttuazioni della domanda.

Detto questo, l'unico vero modo per misurare le differenze di tasso di conversione è quello di testare in modo diviso i progetti che non ho fatto nell'interesse del tempo.

Prima di tutto, l'aumento del tasso di conversione del desktop mi ha davvero scioccato perché non mi aspettavo un salto così grande. Sapevo che il mio vecchio sito aveva bisogno di lavoro ma non così tanto!

( Aggiornamento: dopo alcuni mesi di più dati, l'aumento del tasso di conversione per desktop è del 46%)

Per i clienti di tablet, l'aumento del tasso di conversione è stato in realtà superiore al 15% perché ho riscontrato un grosso bug nell'implementazione del tablet poche settimane dopo il lancio che si è mescolato ai risultati.

( Aggiornamento: dopo alcuni mesi di più dati, l'aumento del tasso di conversione per tablet è del 25%.)

E per i dispositivi mobili, avevo già implementato un sito mobile abbastanza decente nel 2013, quindi non mi aspettavo grandi salti, ma il 12% è ancora abbastanza buono.

( Aggiornamento: dopo alcuni mesi di più dati, l'aumento del tasso di conversione per i dispositivi mobili è del 21%.)

In ogni caso, nonostante l'aumento del tasso di conversione, non tutti i dati sono stati rosei. Per qualche ragione, le mie metriche in loco come la frequenza di rimbalzo sono aumentate di circa il 10% su tutta la linea.

Nota dell'editore: in questo momento, sospetto che sia perché ho rimosso la navigazione a sinistra dal sito, ma dovrò setacciare i dati per scoprire esattamente perché sta succedendo. Aggiornare! Ho interrotto il supporto per diverse versioni del browser in questa riprogettazione che ha contribuito a questo problema.

Quale carrello sto utilizzando?

La domanda più comune che mi viene sempre posta ad ogni riprogettazione è...

Steve che carrello è questo? È Shopify? O è Bigcommerce?

E quando dico a tutti che sto ancora usando il mio carrello della spesa open source della vecchia scuola pesantemente modificato , di solito sono scioccati.

Ecco la cosa...

Il carrello degli acquisti che scegli non ha nulla a che fare con l'aspetto del tuo carrello o con l' aspetto del tuo sito web. Lo scopo principale del tuo carrello è gestire ed elaborare le transazioni.

Se il tuo carrello ha tutte le funzionalità di backend di cui hai bisogno, non devi necessariamente cambiare . L'estetica del tuo sito web ha ben poco a che fare con il motore del carrello.

Quindi, anche se hai un carrello della spesa vecchio come il mio, purché abbia tutte le funzionalità di cui hai bisogno, non dovresti giudicarlo dall'aspetto, perché puoi sempre cambiare l'aspetto.

La parte migliore è che se sei su una piattaforma open source, puoi aggiungere le tue funzionalità ogni volta che vuoi perché hai il pieno controllo.

Ad esempio, per la riprogettazione di questo sito, ho implementato questa piccola funzionalità di prova sociale per il mio negozio. Fondamentalmente ogni 5-15 secondi, nell'angolo in basso a sinistra si apre una finestrella che mostra un acquisto precedente effettuato sul sito.

Su Shopify, puoi acquistare un plug-in per fare esattamente la stessa cosa e pagare $ 15 al mese. Ma mi ci sono volute circa 5 ore (avrebbero dovuto impiegare davvero 2 ore ma la mia codifica era arrugginita) per pompare la stessa cosa senza costi ricorrenti .

Comunque, questi sono solo alcuni dei vantaggi di possedere il codice sorgente. Se sei tecnicamente incline, ti consiglio di provare l'open source.

Ma se non hai idea di web design e non vuoi avere a che fare con nulla di tecnico, allora vai con un Shopify o un BigCommerce.

Modificare la combinazione di colori

Una delle maggiori lamentele sul mio sito dal punto di vista estetico è stata la combinazione di colori. Il vecchio sito era viola e giallo e la tavolozza dei colori che ho scelto ha fatto sembrare il sito vecchio stile .

Nota dell'editore: ecco un collegamento al mio nuovo sito e puoi utilizzare la macchina di ritorno per vedere la vecchia versione.

La cosa ironica è che nel mio corso Crea un negozio online redditizio, in realtà insegno lezioni sulla teoria del colore ma non avevo questa conoscenza nel 2013, quindi non ho mai avuto la possibilità di metterla in pratica .

Comunque, in poche parole, ho usato un sito chiamato color.adobe.com per scegliere i colori complementari per il mio nuovo design. E per rinfrescare l'aspetto, ho scelto il verde acqua, il rosa shocking e il giallo.

Perché 3 colori? È perché volevo un colore specifico associato all'"azione". Volevo un colore specifico per "attirare l'attenzione". E infine, volevo un colore generale brillante per far sembrare il sito "giovane e alla moda".

L'alzavola è il mio colore di sfondo. Il giallo è il mio colore di "attenzione" se ho offerte speciali e il rosa acceso viene utilizzato per ogni singolo pulsante di azione sul sito perché si distingue e si apre.

Ogni singola pagina del mio sito è progettata per avere un obiettivo unico.

Per la prima pagina, voglio che le persone esplorino la nostra collezione personalizzata perché è la sezione con i margini più alti. Nelle pagine delle categorie, voglio che le persone facciano clic su un prodotto. E sulla pagina di un prodotto, voglio che le persone facciano clic su "Aggiungi al carrello".

I 3 pilastri della conversione

Un grosso errore che vedo fare alle persone quando progettano i propri siti Web è che cercano di copiare Amazon.com . Amazon è la più grande piattaforma di e-commerce del pianeta, quindi perché non dovrei modellare il mio sito sul loro?

Innanzitutto, il design del sito web di Amazon è brutto, generico e non adatto alla maggior parte dei negozi online di nicchia . Il motivo per cui Amazon può farla franca con un brutto sito Web è perché tutti sanno chi sono, sono abituati all'interfaccia e si fidano già di Amazon.

Ma quando hai il tuo sito web, devi stabilire quella fiducia da zero perché nessuno sa chi sei.

Nel complesso, ci sono tre cose principali che sono cruciali per chiunque atterri sul tuo sito per la prima volta.

Primo, devi far sapere alle persone che offri la spedizione gratuita. Una sorta di offerta di spedizione gratuita ora è normale grazie ad Amazon e agli altri grandi negozi di e-commerce.

Due, poiché sei un'entità sconosciuta, vuoi rassicurare i clienti che possono restituire la loro merce se non sono soddisfatti.

E infine, la terza cosa che devi stabilire con un nuovo cliente è la fiducia che è forse il fattore più importante di tutti.

Se un cliente arriva sul tuo sito e non si fida del tuo negozio perché non ha mai sentito parlare di te, prenderà e se ne andrà.

Per la mia riprogettazione, impongo la fiducia in molti modi diversi.

Nell'intestazione di ogni singola pagina, sottolineo la spedizione gratuita, i resi senza problemi e il mio numero di telefono. Avere un numero di telefono in bella vista è MOLTO IMPORTANTE!

Ogni volta che faccio acquisti online in una nuova boutique, la prima cosa che faccio sempre è cliccare sulla pagina dei contatti e cercare un numero di telefono e un indirizzo . E se nessuno di questi articoli viene visualizzato o se è presente solo uno dei due, non farò acquisti lì.

I clienti vogliono la possibilità di contattare un negozio se qualcosa va storto con il loro acquisto. E di conseguenza, vuoi che queste informazioni siano il più visibili possibile su ogni singola pagina, inclusi gli orari del negozio.

Avere "orario ufficiale del negozio" rende anche il tuo negozio più professionale perché ti imbatti in un'attività consolidata con orari d'ufficio "reali".

Prova sociale e fiducia

Nella parte inferiore di ogni singola pagina, ho una sezione dedicata alla riprova sociale che conferisce credibilità al mio sito.

Dopotutto, siamo apparsi su un sacco di riviste diverse e siamo stati nel Today Show, quindi che senso ha se non ce ne vantiamo?

La nostra sezione di prove sociali/menzioni stampa è su ogni singola pagina del sito, quindi anche se non la vedi la prima volta, alla fine te ne accorgerai.

Ho anche chiesto a un gruppo di nostri clienti la loro foto e una testimonianza che viene visualizzata appena sotto la sezione stampa.

Questi sono clienti reali che hanno fatto acquisti sul nostro sito, sono stati molto contenti del loro acquisto e sono stati disposti a lasciarci una bella testimonianza.

Una cliente in particolare, Sherri, ha acquistato più di centocinquanta volte dal nostro sito perché le piacciono molto i nostri fazzoletti.

E infine, ho incluso un po' di verbosità che rassicura il cliente che la sua soddisfazione è la nostra principale preoccupazione. Non lasciamo mai che un cliente se ne vada infelice. E se qualcosa va storto, forniamo rimborsi completi.

Cambiare la navigazione

Ridisegnare la navigazione per il mio nuovo sito è stata un'area in cui ho faticato. Prima di tutto, sono un GRANDE fan della navigazione sul lato sinistro . Il mio vecchio design lo aveva e i miei clienti lo adoravano perché il menu era sempre visibile e accessibile.

Il lato sinistro di una pagina web è anche il punto in cui gravita naturalmente l'occhio ed è il punto più ovvio da cui iniziare a fare acquisti.

Ma ecco il mio dilemma...

Se dovessi includere una colonna di sinistra dedicata per la navigazione, tutto il resto del sito dovrebbe ridursi.

Ad esempio, tutte le immagini dei miei prodotti dovrebbero essere ridotte in modo significativo, il che avrebbe un impatto negativo sulle conversioni .

Le immagini della mia categoria sarebbero più piccole, il che abbasserebbe il CTR .

La verbosità su ogni pagina occuperebbe più spazio sullo schermo che spingerebbe i prodotti più in basso nella pagina .

Quindi, alla fine, sono andato con un menu a discesa di livello superiore, in stile hover . La bellezza di una barra di navigazione di livello superiore è che si comporta in modo simile a una barra di navigazione di sinistra, ma non occupa la stessa quantità di spazio sullo schermo.

E spostando la navigazione in alto, sono stato in grado di far esplodere la mia categoria e le immagini dei prodotti del 300%, il che le ha rese davvero pop.

L'altro vantaggio dell'utilizzo della navigazione di primo livello era la capacità di separare categorie distinte in modo molto pulito.

Ad esempio, ora ho una distinta categoria "Acquista per occasione" a discesa, mentre nel mio vecchio design, questa sezione era mescolata con il resto del menu a sinistra, quindi non risaltava.

Ho anche aggiunto una sezione speciale dedicata ai prodotti personalizzati, best seller, nuovi arrivi, una pagina FAQ, una pagina contatti, la pagina about, visualizza carrello e check out.

Fondamentalmente, tutti gli elementi di navigazione più importanti sono ora nella barra principale e tutti possono vederli.

Enfatizzare la mia proposta di valore unica

Un principio importante che insegno nel mio corso di e-commerce è che ogni singola pagina di destinazione del tuo sito deve avere una proposta di valore unica e forte .

Perché qualcuno dovrebbe acquistare dal tuo negozio? Perché dovrei acquistare qui invece di un concorrente? La risposta dovrebbe essere subito chiara.

Quindi, per questo design, ho scelto di enfatizzare i nostri punti di forza in primo piano e al centro di ogni pagina del nostro sito.

Ad esempio, in prima pagina, la nostra proposta di valore è proprio all'interno dell'immagine splash.

Nelle pagine delle nostre categorie, ho implementato una casella di testo speciale per trasmettere il motivo per cui il nostro negozio è speciale.

L'obiettivo finale è convincere un cliente entro i primi 5 secondi perché dovrebbe acquistare da te e non da un concorrente.

Abbellire le pagine dei prodotti

Uno dei maggiori vantaggi della mia critica al sito è che le pagine dei miei prodotti non erano all'altezza .

Ecco una pagina del prodotto dal vecchio design.

Ecco che la stessa pagina appare sul mio nuovo sito.

Noti differenze? Innanzitutto, poiché ho rimosso la barra laterale sinistra, sono stato in grado di aumentare le dimensioni dell'immagine del prodotto del 266% .

Non solo l'immagine principale è molto più grande, ma ho anche riorganizzato gli elementi della pagina del prodotto per incoraggiare più clic su "Aggiungi al carrello".

Ad esempio, proprio accanto al pulsante "Aggiungi al carrello" ci sono caselle di testo che rassicurano il cliente della spedizione gratuita e senza problemi di restituzione.

C'è anche un collegamento in alto che dice dinamicamente al cliente quando riceverà il suo ordine a seconda che scelga standard o espresso e tutte le relative spese di spedizione coinvolte.

Ho anche sovrapposto i pulsanti Pinterest e Facebook direttamente all'immagine stessa per incoraggiare la condivisione dopo aver notato che la maggior parte dei visitatori non ha nemmeno guardato i pulsanti di condivisione dedicati sul mio vecchio sito.

Una cosa interessante da notare è che originariamente avevo due enormi pulsanti blu e rossi da condividere su Facebook e Pinterest proprio sotto l'immagine, come mostrato di seguito.

Ma alla fine ho deciso di rimuoverli perché risaltavano più del pulsante rosa acceso "Aggiungi al carrello". Alla fine, apprezzo un'azione "Aggiungi al carrello" molto più di una condivisione sui social media.

Infine, ho anche aumentato le dimensioni della sezione di vendita incrociata per invogliare il cliente ad acquistare articoli simili.

Miglioramento del checkout

Migliorare il processo di checkout non era una priorità per me perché non c'erano grossi problemi con il vecchio sito. Ma dal momento che avevo già aperto il cofano, ho deciso di risolvere alcuni problemi in sospeso che persistevano sul mio sito da un po' di tempo.

Prima di tutto, ogni tanto ricevevamo chiamate da persone che erano confuse e si chiedevano se avessero bisogno di un account per fare acquisti sul nostro sito. Ecco come appariva la prima pagina di pagamento sul nostro vecchio sito.

La soluzione a questo problema era nascondere l'accesso per impostazione predefinita e visualizzare solo due pulsanti rosa acceso per il check-out.

Ho anche messo in risalto i loghi di fiducia per rassicurare il cliente che il pagamento è sicuro e che la sua soddisfazione è garantita.

L'altro grande cambiamento è stato che ho reso il checkout completamente reattivo .

Nota: se sei su Shopify, probabilmente hai già visto che aspetto ha un processo di pagamento reattivo di bell'aspetto.

Quindi, invece di reinventare la ruota, ho praticamente emulato il design del checkout di Shopify perché è davvero fantastico.

In poche parole, ecco come appare ora il mio checkout su schermi di diverse dimensioni.

Per desktop...

Per tablet e cellulare

Qualche parola sul cellulare

Durante la mia ultima riprogettazione del sito nel 2013, ho implementato un sito Web mobile completamente separato dal sito desktop che viveva in un sottodominio diverso.

E mentre credo ancora che sia stata la decisione giusta in quel momento, non è sicuramente così oggi. Oggi ci sono molti framework come BootStrap che rendono il design reattivo molto più semplice.

Negli ultimi anni, è stata una grande seccatura mantenere sincronizzati i miei siti mobili e desktop, quindi sono felice di avere ora un unico sito unificato su tutte le piattaforme.

Il principale svantaggio di diventare reattivo era che dovevo testare a fondo il sito su 3 piattaforme completamente diverse , desktop, tablet e dispositivi mobili. E all'interno di ogni piattaforma c'erano più versioni del browser e risoluzioni dello schermo da gestire.

Ad esempio, ho dovuto testare IE 8, 9, 10 e 11 per macchine Windows. Ho dovuto testare Safari 6,7 e 8 per Mac.

Alla fine, ho esaminato il mio account Google Analytics per eseguire test di usabilità per ogni singolo browser che è stato utilizzato sul mio sito nell'ultimo anno utilizzando uno strumento chiamato Browser Stack.

Inutile dire che questo processo ha fatto schifo ed è stata la parte che mi è piaciuta meno della riprogettazione:(

Ad ogni modo, ecco alcuni punti salienti del nuovo design mobile. La maggior parte di questi elementi pubblicitari sono piuttosto standard, quindi non ti annoierò con troppi dettagli.

Su tablet e dispositivi mobili, ho modificato il menu per comprimerlo in un unico menu a discesa.

Sulla base del mio precedente sito per dispositivi mobili, ho scoperto che tutti tendono ad andare direttamente alla barra di ricerca, quindi mi sono assicurato di includere la barra di ricerca in primo piano e al centro di ogni singola pagina del sito per dispositivi mobili.

Poiché lo spazio sullo schermo è molto più piccolo su un telefono, ho rimosso alcuni elementi "non essenziali" della pagina per schermi di dimensioni inferiori.

Modifiche Pinterest

L'ultima modifica che ho apportato è stata che ho completamente rinnovato le mie pagine di contenuto. Come ho già detto molte volte in passato, utilizzo le nostre pagine di arti e mestieri per incanalare le persone nel nostro negozio online. E Pinterest è una grande fonte di traffico per queste pagine.

Di conseguenza, ho completamente rifatto la maggior parte delle immagini artigianali e realizzato versioni speciali alte e magre solo per Pinterest . Ho anche realizzato immagini nuove di zecca anche per le foto dei nostri prodotti.

Ad esempio, invece di utilizzare un'immagine rettangolare per Pinterest quando fai clic sul pulsante "pin", ora ottieni una versione alta e magra ad alta risoluzione.

Conclusione

Tutto sommato, 7 settimane e $ 1840 sono un investimento abbastanza buono per i guadagni che sto sperimentando ora. Il mio problema principale in questo momento è che ho troppi progetti in corso contemporaneamente e non abbastanza tempo per lavorare su ciascuno di essi.

Ma ecco la cosa...

Anche se il mio tasso di conversione era buono prima, l'aumento netto delle vendite dovuto a un tasso di conversione ancora migliore probabilmente supererà gli altri sforzi di costruzione del traffico che avevo pianificato di implementare quest'anno.

E se c'è una lezione da imparare qui, è che l'aumento del tasso di conversione per il tuo sito aumenterà le vendite su tutte le altre sorgenti di traffico .

Le basi per la tua attività di e-commerce iniziano con la tua piattaforma ed è importante avere tutte le tue anatre a posto PRIMA di concentrarti sulla creazione di traffico.