Cum am construit un site web SaaS pe care oamenii să-l înțeleagă de fapt

În urmă cu câteva luni, echipa mea și cu mine ne-am asumat în sfârșit proiectul pe care departamentele de marketing din întreaga lume (inclusiv al nostru) continuă să-l amâne: ne-am reconstruit site-ul web.

Și apoi, am văzut o creștere cu 93% a generației de lead-uri.

Imediat, ne-am dat seama că am spart formula pentru un site SaaS care face imposibilul: de fapt îi face pe oameni să înțeleagă ce face compania noastră.

Deoarece ne-a luat câțiva ani să ajungem aici, în calitate de coleg de marketing, am vrut să vă scutesc de probleme și să vă împărtășesc procesul nostru.

1. Eliminarea blocajelor: părți interesate limitate și un MVP solid

Cel mai mare dezavantaj al oricărui proiect cu mize mari este prea mulți bucătari în bucătărie.

Pentru a evita această capcană, am desemnat o singură parte interesată pentru fiecare aspect al site-ului - una pentru design, una pentru conținut și una pentru produs. Alte persoane au avut ocazia să ofere feedback, dar deciziile finale au fost luate exclusiv de acești trei proprietari. Acest lucru a fost valabil chiar și atunci când feedback-ul a venit de la oameni cu roluri de conducere.

În plus, pentru a combate perfecționismul extrem pe care l-am văzut adesea în planificarea proiectelor de marketing, am împrumutat din experiența noastră de produs și am făcut eforturi pentru o lansare treptată cu un MVP (produs minim viabil) și faze pentru fiecare pagină. Acest lucru ne-a permis să lucrăm mai repede, dar a creat și o oportunitate de a ne îmbunătăți continuu.

• Lucrați invers – Începeți cu o dată de lansare (realistă) și lucrați înapoi, astfel încât toate echipele să se adapteze la cronologie, în loc să dea estimări prea precaute.
• Numiți părți interesate unice – Asigurați-vă că aveți o parte interesată pentru fiecare domeniu, în cazul nostru, ceea ce înseamnă design, conținut și produs. Colectați feedback pe scară largă, dar limitați deciziile la acești oameni.
• Alegeți un proprietar de proiect – Ar trebui să existe un singur proprietar pentru proiectul în ansamblu. Această persoană va fi responsabilă pentru luarea deciziilor atunci când există conflict (și va exista conflict).
• Nu rezistă pentru produsul perfect – Creați un MVP pentru fiecare pagină, asigurați-vă că mișcă acul și contați pe o eliberare în etape.
• Treceți la detalii și reacționați rapid – Folosiți toate instrumentele dvs. de analiză și UX pentru a înțelege rapid răspunsul la paginile pe care le lansați și pentru a le repeta.

2. Valorile care contează: stabilirea obiectivelor și KPI-urilor

Unul dintre primele lucruri pe care le-am făcut a fost să facem un bilanț al problemelor pe care am vrut să le rezolvăm și să stabilim obiective pentru îmbunătățirea lor. Am abordat o mulțime de probleme: rată de conversie scăzută, informații învechite, design învechit, explicație limitată a ofertei noastre cu mai multe produse, nicio pagină pentru clienți și o pagină de preț neclară.

Am stabilit că singura modalitate de a face o lucrare temeinică într-un timp rezonabil ar fi identificarea paginilor cheie la care să lucrați. Pentru noi, asta însemna să ne concentrăm pe:

• Pagina de pornire
• Selectați paginile produselor
• Pagina de prețuri
• Pagini de studii de caz
• Crearea unei pagini de clienți

Acest lucru a însemnat și renunțarea la câteva pagini pe care am vrut să le abordăm pentru a ne asigura că proiectul a fost lansat la timp.

Pentru a urmări succesul, am stabilit următoarele obiective și KPI:

• Creșterea ratei de conversie a clienților potențiali și îmbunătățirea calității clienților potențiali
• Îmbunătățirea ratei de respingere și creșterea timpului pe site și a paginilor pe sesiune
• Îmbunătățirea percepției mărcii
• Crearea unei navigări mai bune pe site
• Ne asigurăm că diferitele noastre produse beneficiază de o mai bună expunere
• Creșterea traficului organic
• Configurarea infrastructurii site-ului care este ușor de scalat

Fiecare companie va avea obiective diferite și va trebui să urmărească diferite valori, dar procesul de selectare a paginilor cheie pentru a lucra mai întâi vă va oferi o imagine rapidă și clară a ceea ce funcționează și ce nu, înainte de a vă reface întregul site.

• Satisfaceti nevoilor intre companii – valori precum rata de conversie, rata de respingere etc. nu sunt totul. Căutați feedback calitativ pe site de la echipa dvs. de resurse umane, managerul de brand, echipa de vânzări și CEO-ul.
• Test A/B – Da, pare evident și probabil că vă grăbiți să vă lansați noul site, dar nu doriți să scăpați de nimic care funcționează bine. Deci, asigurați-vă că eliberați totul cu un test A/B și priviți cu atenție rezultatele.
• Setați un KPI principal – Având o singură valoare principală, vă va ajuta să luați decizii atunci când există un conflict, în cazul nostru a fost rata de conversie la client potențial.
• Lansare în etape – Reconstruirea întregului site deodată este un risc. Începeți cu pagini cu efort redus, de mare valoare, apoi învățați și adaptați-vă planul.
• Construiți o infrastructură de analiză – Construiți în avans o infrastructură de măsurare pentru a vă asigura că puteți urmări impactul asupra fiecărui KPI.

3. Să te inspiri: există ceva de învățat de la toată lumea

Odată ce ne-am identificat zonele cu probleme, ne-am stabilit obiective de îmbunătățire și am identificat sfera proiectului, am început să ne gândim la aspect și design.

Gândiți-vă la câte site-uri SaaS ați vizitat și ați părăsit fără să aveți o idee reală despre ceea ce face compania. „Are ceva de-a face cu serviciul pentru clienți? Poate marketing prin e-mail?” Acesta este ceea ce încercam să evităm. Așa că am început prin a identifica de ce ar avea nevoie vizitatorii pentru a înțelege cu adevărat Yotpo.

Am creat o foaie de calcul, ne-am inspirat din alte peste 150 de site-uri web, am notat ce ne-a plăcut și ce nu ne-a plăcut la fiecare și, cel mai important, am observat dacă am putea înțelege ce face compania. Am analizat elemente la fel de granulare precum un buton CTA sau la fel de ample ca aspectul general, imaginile sau tonul vocii.

În cea mai mare parte, am căutat site-uri pentru companii cu care nu eram familiarizați, astfel încât testul nostru de înțelegere a companiei ar fi autentic.

• Nu ratați prima impresie – Nu uitați să luați notițe prima dată când vizitați un site web. Primele impresii sunt critice și, așa cum se spune, nu veți avea o a doua șansă.
• Faceți o listă – Puteți învăța de la toată lumea. Creați o listă de site-uri web pentru inspirație. Unele site-uri web vor avea un design grozav, unele microcopii grozave, iar altele o navigare uimitoare.
• Îmbrățișează necunoscutul – Privește în principal la companiile pe care nu le cunoști pentru a vedea dacă site-ul lor transmite clar ceea ce fac.

4. Ce este mai întâi, designul sau conținutul?

Produsul nostru este super vizual, atât de mult încât vizitatorii ar trebui să poată înțelege 70% din produs fără să citească măcar un cuvânt. Nu a fost vorba doar de găsirea sloganului potrivit, ci de a arăta mai degrabă decât de a spune.

Înțelegând că imaginile prezentate deasupra pliului ar fi esențiale pentru a atrage atenția utilizatorului, am folosit acest spațiu pentru a arăta machete ale produsului nostru în acțiune. În loc să stabilim conținutul în fruntea designului, am adoptat o abordare opusă, conducând cu designul și având conținutul aliniat cu viziunea studioului nostru.

Uimitorul nostru marketer de conținut, Mel, a folosit cadrul de design-first pentru a perfecționa strategia de conținut pentru site și pentru a ajunge la ceea ce contează cel mai mult pentru potențialii clienți: cum îi poate ajuta Yotpo. Ea a făcut cercetările pentru a înțelege pe deplin industria comerțului electronic și problemele tipice. Apoi, ea a încadrat soluțiile într-un format rapid și ușor de citit, care a completat structura de design, îndemnând în același timp utilizatorii să înainteze cu pași acționați pentru a afla mai multe despre produsele noastre.

Rezultatul este un conținut direct, cu valoare mai întâi, care rămâne fidel caracterului și misiunii Yotpo de a ajuta mărcile să reușească.

• Lăsați conținutul să urmeze designul – Dacă echipa dvs. de conținut este suficient de puternică pentru a scrie direct la obiect, începeți cu designul și puneți-le să scrie în conformitate cu limita de caractere. Este o provocare, dar este și un exercițiu de eficientizare a mesajelor.
• Înțelegeți cel mai bun mod de a vă descrie produsul - dacă produsul dvs. este atrăgător din punct de vedere vizual, evidențiați-l folosind o mulțime de machete și prezentarea designului.
• Păstrați-l interesant deasupra pliului – Poate părea evident, dar oamenii uită adesea că acesta este cel mai important imobil de pe fiecare pagină. Investiți o atenție suplimentară în ceea ce afișați acolo.

5. În culise: pagina de prețuri

Obiectivele paginii:

A fost important pentru noi să facem prețurile noastre ușor de înțeles. Am ales să grupăm planurile noastre premium sub o umbrelă și planul nostru gratuit sub alta. În acest fel, vizitatorii interesați de abonamentul nostru plătit ar putea vorbi cu ușurință cu vânzările pentru a afla mai multe, iar cei interesați de planul gratuit ar putea începe imediat. Am dorit, de asemenea, să includem un Întrebări frecvente detaliate pentru a răspunde întrebărilor pe care le-ar putea avea vizitatorii.

Studioul nostru de design talentat – în special directorul nostru de artă, Shiri și designerul principal de produse, Eliko – și-au luat acele obiective și a alergat cu ele. În această secțiune și în cele următoare, ei vor explica strategia de design din spatele fiecărei pagini cheie de pe noul site web.

Strategia de proiectare:

Deoarece scopul a fost ca oamenii să înțeleagă și să facă clic pe planuri, i-am transformat în ierarhia de sus. Fundalul a fost creat intenționat pentru a fi mai moale și mai deschis pentru a nu distrage atenția de la casetele de plan. Totuși, am folosit fundalul ca o oportunitate de a reprezenta brandul Yotpo cu umbrire în degrade și forme geometrice subtile. Această structură generală, dezvoltată pentru a se potrivi obiectivelor paginii de prețuri, s-a dovedit a fi o bază cu adevărat eficientă pentru alte pagini de pe site.

6. În culise: pagini de produse

Obiectivele paginii:

Fiecare dintre paginile de produs incluse în reproiectare, adică Recenzii și Evaluări și Marketing vizual, trebuia să explice toate funcțiile unui produs super complex într-un mod pe care oamenii le-ar putea înțelege în câteva secunde. Nu numai atât, am vrut să arătăm diferitele cazuri de utilizare pentru fiecare produs. De exemplu, pe pagina Recenzii și Evaluări, aceasta însemna explicarea tuturor aspectelor, de la modul în care funcționează generarea de conținut până la integrările cu Google și Facebook. Deși pagina este lungă și cuprinzătoare, este ușoară în ceea ce privește textul și grea în ceea ce privește elementele vizuale.

Strategia de proiectare:

Am stabilit rapid că machetele produselor noastre în acțiune ar fi cea mai simplă modalitate de a-i face pe vizitatori să înțeleagă cum funcționează. Deși inițial doream să folosim videoclipuri, ne-am ținut de MVP pentru a obține primele versiuni ale paginilor la timp.

Pe baza a ceea ce am învățat din proiectarea paginii de prețuri, am știut să facem fundalul mai ușor și mai silențios, păstrând în același timp accent pe machete, în special pe cele de deasupra pliului. Modelele sunt, de asemenea, realizate într-un limbaj de design simplificat pentru a le face ușor de digerat.

Design-ul pe machetă răspunde la o serie de alte preocupări practice. În primul rând, machetele sunt prietenoase cu dispozitivele mobile prin natura lor, atât datorită dimensiunii lor, cât și a capacității lor de a transmite o mulțime de informații într-un format minimalist. În general, proiectarea având în vedere mobilul te obligă să iei în considerare ce este necesar și ce nu, iar acest lucru a fost cu siguranță valabil pentru machete. Nu numai că, acest format este, de asemenea, ușor scalabil pentru paginile de produse viitoare, pe măsură ce oferta noastră crește.

7. În culise: Pagina clienților

Obiectivele paginii:

Pagina de clienți a fost o nouă adăugare la site-ul nostru. Căutăm o modalitate eficientă de a prezenta mărcile uimitoare care folosesc Yotpo și de a actualiza și de a crea o casă nouă pentru studiile noastre de caz. Cele mai importante elemente de pe această pagină sunt siglele mărcii și noile studii de caz video pe care le-am creat pentru lansarea acesteia.

Strategia de proiectare:

Am vrut să spunem povestea cum au crescut aceste mărci cu Yotpo, dar și cât de important este conținutul generat de utilizatori în ansamblu. Piesa principală pentru a spune aceste povești siglele clienților și studiile de caz video, care ocupă fiecare imobiliare semnificativă pe pagină. În plus, am creat noul șablon de studiu de caz, care este încorporat în această pagină, pentru a fi cât mai flexibil posibil, astfel încât să poată spune povestea unică a fiecărei mărci în loc să includă doar întrebări și răspunsuri de tip cookie-cutter.

8. În culise: Pagina de pornire

Obiectivele paginii:

Mai presus de toate, scopul paginii de pornire a fost ca vizitatorii să înțeleagă rapid și ușor ce face Yotpo înainte de a derula în jos. De asemenea, am vrut să prezentăm oferta noastră cu mai multe produse și să prezentăm cel mai mare atu al nostru - clienții noștri. În cele din urmă, pagina de pornire trebuia să servească drept o pagină de intrare care să-i facă pe vizitatori curioși să afle mai multe despre produsele noastre.

Pentru a ne asigura că am îndeplinit aceste obiective, am așezat colegii în fața altor pagini de pornire SaaS și, pe măsură ce navigau pe pagină, i-am întrebat ce element doreau să vadă în continuare. Pe baza răspunsurilor lor, am înțeles că fluxul de care majoritatea oamenilor au nevoie de la o pagină de pornire este:

Strategia de proiectare:

Cea mai mare provocare a noastră pentru pagina de pornire a fost să captăm imediat atenția vizitatorilor. Cercetarea noastră ne-a arătat că multe site-uri SaaS folosesc astăzi ilustrații frumoase pentru a atrage vizitatori, dar ne-am dorit ceva mai substanțial pentru a menține vizitatorii implicați.

Am folosit fluxul descris mai sus și limbajul de design pe care l-am perfecționat pe paginile de preț și de produse pentru a atrage atenția vizitatorilor cu machete minimaliste care oferă o înțelegere imediată a ceea ce face Yotpo. Aceasta este urmată de o bandă cu sigla clientului deasupra pliului, apoi de o prezentare rapidă, la obiect, a ofertei noastre de produse, care conduce vizitatorii către paginile de produse. Cu cea mai mare parte a machetelor sus, am putut folosi ilustrații pentru a susține conținutul de mai jos.

Rezultatul general este o pagină care oferă un fel de „powershot” sau vedere de pasăre a produsului, încurajând vizitatorii să continue să acceseze paginile de produse pentru a afla mai multe.

Stack-ul nostru de tehnologie

Am folosit fiecare instrument posibil pentru a crea noul site și a măsura rezultatele. Iată o privire în stiva noastră de tehnologie:

• Tastare de prototipuri și design – Balsamiq, InVision, Sketch, Photoshop, Illustrator și After Effects
• Analytics și conversie – Drift, VWO, Mixpanel, Amplitude, Hotjar, FullStory
• Management de proiect – Smartsheet, Trello

Când vine vorba de dezvoltare, expertul nostru David a lucrat cu echipa noastră de proiectare pentru a aduce site-ul la viață. A folosit componente reutilizabile pe tot site-ul și a pus accent pe imagini clare, incluzând imagini retină pentru aproape toate imaginile și optând pentru SVG (grafică vectorială scalabilă) în detrimentul fișierelor PNG ori de câte ori este posibil. De asemenea, a lucrat în mare măsură în SCSS pentru a avea acces la mai multe opțiuni atunci când a dezvoltat site-ul.

Concluzie

Reconstruirea unui site web este o întreprindere majoră, dar atunci când aveți un proces solid, îl puteți realiza rapid și eficient. Cele mai importante lucruri pe care le-am învățat în construirea acestui proces au fost următoarele:

1. Numiți un singur proprietar de proiect și mențineți părțile interesate la minimum.
2. Definiți un domeniu realist pentru proiect.
3. Evaluați ce pagini ar trebui eliminate în loc să fie reproiectate.
4. Stabiliți obiective și KPI-uri clare.
5. Alegeți un singur KPI principal.
6. Adunați inspirație de la alte site-uri.
7. Înțelegeți cel mai simplu și eficient mod de a vă explica produsul.
8. Conduceți cu design oriunde este posibil. Conținutul poate urma și va fi mai puternic pentru el.
9. Mergeți pentru o eliberare treptată.
10. A/B testează totul.

Dacă doriți să aflați mai multe despre reproiectarea site-ului nostru web sau dacă aveți întrebări despre ceea ce am scris aici, nu ezitați să luați legătura aici. Aș fi bucuros să discut. :)