Come abbiamo creato un sito Web SaaS che le persone capiscono davvero

Un paio di mesi fa, io e il mio team abbiamo finalmente accettato il progetto che i dipartimenti di marketing di tutto il mondo (compreso il nostro) continuano a rimandare: abbiamo ricostruito il nostro sito web.

E poi, abbiamo visto un aumento del 93% nella generazione di lead.

Immediatamente, ci siamo resi conto di aver decifrato la formula per un sito SaaS che fa l'impossibile: in realtà fa capire alle persone cosa fa la nostra azienda.

Dato che ci sono voluti alcuni anni per arrivare qui, come collega di marketing, volevo risparmiarti il ​​problema e condividere il nostro processo.

1. Rimozione dei blocchi stradali: parti interessate limitate e un solido MVP

La più grande rovina di qualsiasi progetto ad alto rischio sono i troppi cuochi in cucina.

Per evitare questa trappola, ho nominato un singolo stakeholder per ogni aspetto del sito: uno per il design, uno per i contenuti e uno per il prodotto. Altre persone hanno avuto l'opportunità di fornire feedback, ma le decisioni finali sono state prese esclusivamente da questi tre proprietari. Ciò è stato vero anche quando il feedback è arrivato da persone in ruoli senior.

Inoltre, per combattere l'estremo perfezionismo che ho visto spesso nella pianificazione dei progetti di marketing, abbiamo preso in prestito dalla nostra esperienza di prodotto e spinto per un rilascio graduale con un MVP (prodotto minimo praticabile) e fasi per ogni pagina. Questo ci ha permesso di lavorare più velocemente, ma ha anche creato un'opportunità per migliorare continuamente.

• Lavora a ritroso: inizia con una data di rilascio (realistica) e lavora a ritroso, in modo che tutti i team si adattino alla sequenza temporale anziché fornire stime eccessive.
• Nomina singoli stakeholder: assicurati di avere uno stakeholder per ogni dominio, nel nostro caso, che significava design, contenuto e prodotto. Raccogli feedback in modo ampio, ma limita le decisioni a queste persone.
• Scegli un proprietario del progetto: dovrebbe esserci un unico proprietario per il progetto nel suo insieme. Questa persona sarà responsabile di prendere decisioni quando c'è conflitto (e ci sarà conflitto).
• Non aspettare il prodotto perfetto: crea un MVP per ogni pagina, controlla che sposti l'ago e conta su un rilascio graduale.
• Scendi nei dettagli e reagisci rapidamente: usa tutti i tuoi strumenti di analisi e UX per comprendere rapidamente la risposta alle pagine che rilasci e per scorrere su di esse.

2. Le metriche che contano: definizione di obiettivi e KPI

Una delle prime cose che abbiamo fatto è stata fare il punto sui problemi che volevamo risolvere e fissare obiettivi per il loro miglioramento. Stavamo affrontando molti problemi: basso tasso di conversione, informazioni obsolete, design obsoleto, spiegazione limitata della nostra offerta multi-prodotto, nessuna pagina dei clienti e una pagina dei prezzi poco chiara.

Abbiamo stabilito che l'unico modo per svolgere un lavoro completo in un lasso di tempo ragionevole sarebbe identificare le pagine chiave su cui lavorare. Per noi questo ha significato concentrarsi su:

• La homepage
• Seleziona le pagine dei prodotti
• La pagina dei prezzi
• Pagine di casi di studio
• Creazione di una pagina clienti

Questo ha significato anche rinunciare a diverse pagine che volevamo affrontare per garantire il lancio puntuale del progetto.

Per monitorare il successo, fissiamo i seguenti obiettivi e KPI:

• Aumentare il tasso di conversione in lead e migliorare la qualità dei lead
• Miglioramento della frequenza di rimbalzo e aumento del tempo sul sito e delle pagine per sessione
• Migliorare la percezione del marchio
• Creare una migliore navigazione del sito
• Garantire che i nostri vari prodotti ottengano una migliore esposizione
• Aumentare il traffico organico
• Configurazione di un'infrastruttura del sito facile da scalare

Ogni azienda avrà obiettivi diversi e dovrà tenere traccia di metriche diverse, ma il processo di selezione delle pagine chiave su cui lavorare per prime ti darà una visione rapida e chiara di cosa funziona e cosa no prima di rifare l'intero sito.

• Soddisfa le esigenze interaziendali : metriche come tasso di conversione, frequenza di rimbalzo, ecc. non sono tutto. Cerca un feedback qualitativo sul sito anche dal tuo team delle risorse umane, dal brand manager, dal team di vendita e dal CEO.
• Test A/B – Sì, sembra ovvio e probabilmente hai fretta di rilasciare il tuo nuovo sito, ma non vuoi eliminare tutto ciò che funziona bene. Quindi, assicurati di rilasciare tutto con un test A/B e guarda attentamente i risultati.
• Imposta un KPI primario: avere un'unica metrica principale ti aiuterà a prendere decisioni in caso di conflitto, nel nostro caso è stato il tasso di conversione a guidare.
• Rilascio in fasi – Ricostruire l'intero sito Web in una volta è un rischio. Inizia con pagine a basso sforzo e di alto valore, quindi impara e adatta il tuo piano.
• Crea un'infrastruttura di analisi: crea in anticipo un'infrastruttura di misurazione per assicurarti di poter monitorare l'impatto su ciascun KPI.

3. Lasciarsi ispirare: c'è qualcosa da imparare da tutti

Una volta identificate le aree problematiche, fissato gli obiettivi di miglioramento e identificato l'ambito del progetto, abbiamo iniziato a pensare al layout e al design.

Pensa a quanti siti SaaS hai visitato e lasciato senza avere una vera idea di cosa fa l'azienda. “Qualcosa a che fare con il servizio clienti? Forse e-mail marketing?" Questo è ciò che stavamo cercando di evitare. Quindi abbiamo iniziato identificando ciò di cui i visitatori avrebbero avuto bisogno per comprendere veramente Yotpo.

Abbiamo creato un foglio di calcolo, raccolto ispirazione da più di 150 altri siti Web, annotato cosa ci è piaciuto e cosa non ci è piaciuto di ciascuno e, cosa più importante, abbiamo notato se potevamo capire cosa fa l'azienda. Abbiamo esaminato elementi granulari come un pulsante CTA o ampi come layout generale, immagini o tono di voce.

Per la maggior parte, abbiamo esaminato i siti di aziende con cui non avevamo familiarità, quindi il nostro test di comprensione dell'azienda sarebbe stato autentico.

• Non perdere la tua prima impressione – Non dimenticare di prendere appunti la prima volta che visiti un sito web. Le prime impressioni sono critiche e, come si suol dire, non avrai una seconda possibilità.
• Crea una lista: puoi imparare da tutti. Crea un elenco di siti Web per l'ispirazione. Alcuni siti Web avranno un ottimo design, alcuni ottimi microcopie e altri una navigazione straordinaria.
• Abbraccia lo sconosciuto: guarda principalmente alle aziende che non conosci per vedere se il loro sito trasmette chiaramente ciò che fanno.

4. Cosa viene prima, il design o il contenuto?

Il nostro prodotto è super visivo, tanto che i visitatori dovrebbero essere in grado di capire il 70% del prodotto senza nemmeno leggere una parola. Non si trattava solo di trovare lo slogan giusto, si trattava di mostrare piuttosto che dire.

Comprendendo che le immagini presentate above the fold sarebbero state fondamentali per catturare l'attenzione dell'utente, abbiamo utilizzato questo spazio per mostrare i prototipi del nostro prodotto in azione. Invece di fare in modo che i contenuti guidassero il design, abbiamo adottato l'approccio opposto, guidando il design e facendo in modo che i contenuti fossero in linea con la visione del nostro studio.

Il nostro straordinario content marketer, Mel, ha utilizzato il framework design-first per perfezionare la strategia dei contenuti per il sito e arrivare a ciò che conta di più per i potenziali clienti: come Yotpo può aiutarli. Ha svolto la ricerca per comprendere appieno il settore dell'eCommerce e i tipici punti deboli. Quindi, ha inquadrato le soluzioni in un formato rapido e di facile lettura che integrava la struttura del design, invitando anche gli utenti a procedere con passaggi attuabili per saperne di più sui nostri prodotti.

Il risultato è un contenuto semplice e di valore che rimane fedele al carattere e alla missione di Yotpo di aiutare i marchi ad avere successo.

• Lascia che il contenuto segua il design: se il tuo team di contenuti è abbastanza forte da scrivere dritto al punto, inizia con il design e chiedi loro di scrivere in base al limite di caratteri. È una sfida, ma è anche un esercizio per snellire i tuoi messaggi.
• Comprendi il modo migliore per descrivere il tuo prodotto: se il tuo prodotto è visivamente accattivante, evidenzialo utilizzando molti modelli e mostrando il design.
• Mantienilo interessante above the fold – Può sembrare ovvio, ma le persone spesso dimenticano che questo è l'immobile più importante in ogni pagina. Investi ulteriore pensiero in ciò che mostri lì.

5. Dietro le quinte: pagina dei prezzi

Obiettivi della pagina:

Per noi era importante rendere i nostri prezzi facili da capire. Abbiamo deciso di raggruppare i nostri piani premium sotto un ombrello e il nostro piano gratuito sotto un altro. In questo modo, i visitatori interessati al nostro abbonamento a pagamento potrebbero facilmente parlare con le vendite per saperne di più e quelli interessati al piano gratuito potrebbero iniziare subito. Volevamo anche includere una FAQ dettagliata per rispondere a eventuali domande che i visitatori potrebbero avere.

Il nostro talentuoso studio di design, in particolare il nostro Art Director, Shiri, e il Senior Product Designer, Eliko, ha preso questi obiettivi e li ha seguiti. In questa sezione e nelle seguenti spiegheranno la strategia di design alla base di ciascuna delle pagine chiave del nuovo sito web.

Strategia di progettazione:

Poiché l'obiettivo era far capire alle persone e fare clic sui piani, li abbiamo resi la gerarchia più alta. Lo sfondo è stato volutamente creato per essere più morbido e leggero in modo da non distrarre dalle scatole del piano. Tuttavia, abbiamo utilizzato lo sfondo come un'opportunità per rappresentare il marchio Yotpo con sfumature sfumate e forme geometriche sottili. Questa struttura generale, sviluppata per soddisfare gli obiettivi della pagina dei prezzi, si è rivelata una base davvero efficace per altre pagine del sito.

6. Dietro le quinte: pagine dei prodotti

Obiettivi della pagina:

Ognuna delle pagine dei prodotti incluse nella riprogettazione, ad esempio Recensioni e valutazioni e Marketing visivo, doveva spiegare tutte le funzioni di un prodotto super complesso in un modo che le persone potessero capire in un paio di secondi. Non solo, volevamo mostrare i diversi casi d'uso per ogni prodotto. Ad esempio, nella pagina Recensioni e valutazioni, ciò significava spiegare tutti gli aspetti, dal funzionamento della generazione di contenuti alle integrazioni con Google e Facebook. Sebbene la pagina sia lunga e completa, è leggera sul testo e pesante sulla grafica.

Strategia di progettazione:

Abbiamo rapidamente stabilito che i prototipi dei nostri prodotti in azione sarebbero stati il ​​modo più semplice per far capire ai visitatori come funzionano. Anche se inizialmente volevamo usare i video, ci siamo attenuti all'MVP per ottenere le prime versioni delle pagine in tempo.

Sulla base di ciò che abbiamo appreso dalla progettazione della pagina dei prezzi, sapevamo di rendere lo sfondo più chiaro e silenzioso mantenendo l'enfasi sui modelli, in particolare quelli above the fold. I prototipi sono anche realizzati in un linguaggio di progettazione semplificato per renderli facili da digerire.

Il design mockup-first risponde a una serie di altre preoccupazioni pratiche. In primo luogo, i mockup sono per natura ottimizzati per i dispositivi mobili, sia per le loro dimensioni che per la loro capacità di trasmettere molte informazioni in un formato minimalista. In generale, progettare pensando ai dispositivi mobili ti costringe a considerare cosa è necessario e cosa non lo è, e questo era certamente vero per i mockup. Non solo, questo formato è anche facilmente scalabile per le future pagine dei prodotti man mano che la nostra offerta cresce.

7. Dietro le quinte: pagina Clienti

Obiettivi della pagina:

La pagina dei clienti è stata una nuova aggiunta al nostro sito. Stavamo cercando un modo efficace per mostrare i fantastici marchi che utilizzano Yotpo e per aggiornare e creare una nuova casa per i nostri casi di studio. Gli elementi più importanti in questa pagina sono i loghi del marchio e i nuovi case study video che abbiamo creato per il suo lancio.

Strategia di progettazione:

Volevamo raccontare la storia di come questi marchi sono cresciuti con Yotpo, ma anche quanto siano importanti i contenuti generati dagli utenti nel loro insieme. Il pezzo principale per raccontare queste storie sono i loghi dei clienti e i case study video, che occupano ciascuno spazio significativo sulla pagina. Inoltre, abbiamo creato il nuovo modello di case study, che è incorporato in questa pagina, per essere il più flessibile possibile, in modo che possa raccontare la storia unica di ogni marchio invece di includere solo domande e risposte con lo stampino.

8. Dietro le quinte: Homepage

Obiettivi della pagina:

Soprattutto, l'obiettivo della home page era che i visitatori capissero rapidamente e facilmente cosa fa Yotpo prima di scorrere verso il basso. Volevamo anche presentare la nostra offerta multiprodotto e mostrare la nostra più grande risorsa: i nostri clienti. Infine, la homepage doveva fungere da pagina gateway che rendesse i visitatori curiosi di saperne di più sui nostri prodotti.

Per assicurarci di aver raggiunto questi obiettivi, abbiamo messo i colleghi di fronte ad altre home page SaaS e, mentre navigavano nella pagina, abbiamo chiesto loro quale elemento volevano vedere dopo. Sulla base delle loro risposte, abbiamo capito che il flusso di cui la maggior parte delle persone ha bisogno da una home page è:

Strategia di progettazione:

La nostra più grande sfida per la homepage è stata catturare immediatamente l'attenzione dei visitatori. La nostra ricerca ci ha mostrato che molti siti SaaS oggi utilizzano belle illustrazioni per attirare i visitatori, ma volevamo qualcosa di più sostanziale per mantenere i visitatori coinvolti.

Abbiamo utilizzato il flusso descritto sopra e il linguaggio di progettazione che avevamo affinato nelle pagine dei prezzi e dei prodotti per attirare l'attenzione dei visitatori con prototipi minimalisti che danno una comprensione immediata di ciò che fa Yotpo. Segue una striscia con il logo del cliente above the fold e quindi una panoramica rapida e puntuale della nostra offerta di prodotti che conduce i visitatori alle pagine dei prodotti. Con la maggior parte dei modelli in alto, siamo stati in grado di utilizzare le illustrazioni per supportare il contenuto di seguito.

Il risultato complessivo è una pagina che offre una sorta di "powershot" o una panoramica del prodotto, incoraggiando i visitatori a continuare sulle pagine dei prodotti per saperne di più.

Il nostro stack tecnologico

Abbiamo utilizzato ogni strumento possibile per creare il nuovo sito e misurare i risultati. Ecco uno sguardo al nostro stack tecnologico:

• Prototipazione e design: Balsamiq, InVision, Sketch, Photoshop, Illustrator e After Effects
• Analisi e conversione - Drift, VWO, Mixpanel, Amplitude, Hotjar, FullStory
• Gestione del progetto – Smartsheet, Trello

Per quanto riguarda lo sviluppo, il nostro mago dello sviluppo David ha collaborato con il nostro team di progettazione per dare vita al sito. Ha utilizzato componenti riutilizzabili in tutto il sito e ha posto l'accento su immagini nitide includendo immagini retina per quasi tutte le immagini e optando per SVG (grafica vettoriale scalabile) su file PNG ove possibile. Ha anche lavorato in gran parte in SCSS per avere accesso a più opzioni durante lo sviluppo del sito.

Conclusione

Ricostruire un sito Web è un'impresa importante, ma quando si dispone di un solido processo in atto, è possibile realizzarlo in modo rapido ed efficace. Le cose più importanti che abbiamo imparato nella costruzione di quel processo sono state:

1. Nomina un unico proprietario del progetto e riduci al minimo le parti interessate.
2. Definire un ambito realistico per il progetto.
3. Valuta quali pagine dovrebbero essere rimosse anziché ridisegnate.
4. Stabilisci obiettivi e KPI chiari.
5. Scegli un singolo KPI primario.
6. Raccogli ispirazione da altri siti.
7. Comprendi il modo più semplice ed efficace per spiegare il tuo prodotto.
8. Guida con il design ove possibile. Il contenuto può seguire e sarà più forte per questo.
9. Scegli un rilascio graduale.
10. A/B prova tutto.

Se vuoi saperne di più sulla riprogettazione del nostro sito Web o se hai domande su ciò che ho scritto qui, non esitare a contattarci qui. Sarei felice di chattare. :)