Proiectarea site-ului meu web low cost care a crescut ratele de conversie cu 42% în 7 săptămâni

Realizarea unei reproiectări complete a site-ului web a magazinului meu online a fost pe lista mea de „făcut” de foarte mult timp, dar nu m-am putut determina să apăs pe trăgaci, deoarece nu a fost niciodată o prioritate.

Iată chestia. Rata mea de conversie a fost întotdeauna destul de bună (> 3%). Și magazinul meu online a crescut în două cifre în fiecare an, așa că de ce să legănăm barca?

Dar apoi am participat la o reuniune a creierului în urmă cu 3 luni cu o grămadă de alți veterani în comerțul electronic și am decis să aduc acest lucru în discuție la rândul meu pe „hotseat”.

Buna tuturor. Mă gândesc să fac o reproiectare a site-ului, dar rata mea actuală de conversie este încă destul de bună. Trebuie să-l actualizez chiar acum? Și crezi că este destul de rău că trebuie să o rezolv astăzi? Îl pot amâna încă un an?

Răspunsurile pe care le-am primit au fost extrem de dureroase de auzit.

• Acest site web pare că a fost proiectat în anii '90. Dacă ați făcut o reproiectare, pun pariu că ați putea obține o creștere de 50% a ratei de conversie. - Mike Jackness
• Doriți un curs? Nu aș lua cursul tău dacă aș vedea asta. - Kevin Stecko
• Acestea sunt tipurile de site-uri pe care îmi place să le cumpăr , să le repar și apoi să le revând la profit. - Dana Jaunzemis

Auzind aceste comentarii mi-a rănit cu adevărat mândria și am încercat din răsputeri să nu fiu defensivă.

Dar de îndată ce m-am întors de la mintea mea, am contactat imediat designerul meu, am bătut o machetă rapidă în Photoshop și am început să mă apuc.

Procesul meu de implementare a fost destul de simplu. Am parcurs și am arătat eu fiecare pagină, am prezentat „aproximativ” modul în care doream să arate și i-am pus designerului meu să ridice piesele pentru a „arăta mai bine”.

Am bugetat aproximativ 6 săptămâni pentru a finaliza reproiectarea, contribuind aproximativ 40 de ore din timpul meu. Fiecare pagină de pe site a fost refăcută complet.

Per total, proiectul a durat 7 săptămâni din cauza unor circumstanțe neprevăzute, cu compatibilitatea browserului (te urăsc IE!) Și m-a costat 1840 USD .

Nota editorului: Iată un link către noul meu site și puteți utiliza mașina wayback pentru a vedea vechea versiune.

Obțineți mini-cursul meu gratuit despre cum să începeți un magazin de comerț electronic de succes

Dacă sunteți interesat să începeți o afacere de comerț electronic, am creat un pachet cuprinzător de resurse care vă vor ajuta să vă lansați propriul magazin online de la zero. Asigurați-vă că îl apucați înainte de a pleca!

Click aici pentru a descarca

Rezultatele re-proiectării site-ului meu web

Următoarele rezultate ale conversiei sunt pentru dispozitive mobile, desktop și tabletă numai pentru traficul CPC Google .

Deoarece site-ul meu primește o mulțime de trafic din paginile de conținut care nu se convertesc neapărat în vânzări, rularea numerelor pentru traficul de anunțuri PPC vizat a avut cel mai mult sens pentru comparație.

• Ratele de conversie pentru desktop au crescut cu 46% Actualizat!
• Ratele de conversie mobile au crescut cu 21% Actualizat!
• Ratele de conversie ale tabletelor au crescut cu 25% Actualizat!

Notă: datele privind rata mea de conversie au fost comparate cu aceeași perioadă ca în anul precedent pentru a elimina variabile precum sezonalitatea și fluctuațiile cererii.

Acestea fiind spuse, singura modalitate adevărată de a măsura diferențele de rată de conversie este de a împărți testarea proiectelor pe care nu le-am făcut în interesul timpului.

În primul rând, creșterea ratei de conversie pe desktop m-a șocat cu adevărat, deoarece nu mă așteptam la un salt atât de mare. Știam că vechiul meu site avea nevoie de muncă, dar nu atât!

( Actualizare: după câteva luni de mai multe date, creșterea ratei de conversie pentru desktop este de 46%)

Pentru clienții tabletelor, creșterea ratei de conversie a fost de fapt mai mare de 15%, deoarece am găsit o eroare majoră în implementarea tabletei la câteva săptămâni după lansare, care au fost amestecate cu rezultatele.

( Actualizare: după câteva luni de mai multe date, creșterea ratei de conversie pentru tabletă este de 25%.)

Și pentru mobil, deja am implementat un site mobil destul de decent în 2013, așa că nu mă așteptam la salturi uriașe, dar 12% este încă destul de bun.

( Actualizare: după câteva luni de mai multe date, creșterea ratei de conversie pentru mobil este de 21%.)

În orice caz, în ciuda creșterii ratei de conversie, nu toate datele au fost roz. Din anumite motive, valorile mele la fața locului, cum ar fi rata de respingere, au crescut cu aproximativ 10% în general.

Nota editorului: În acest moment, bănuiesc că este pentru că am eliminat navigarea din stânga de pe site, dar va trebui să trec prin date pentru a afla exact de ce se întâmplă asta. Actualizați! Am oprit suportul pentru mai multe versiuni de browser în această reproiectare care a contribuit la această problemă.

Ce coș de cumpărături folosesc?

Cea mai obișnuită întrebare pe care mi se pune întotdeauna la fiecare reproiectare este ...

Steve, ce coș de cumpărături este acesta? Este Shopify? Sau este BigCommerce?

Și când le spun tuturor că încă mai folosesc coșul meu de cumpărături open source puternic modificat , de obicei sunt șocați.

Iată chestia ...

Coșul de cumpărături pe care îl alegeți nu are nimic de-a face cu aspectul coșului dvs. de cumpărături sau cu aspectul site-ului dvs. web. Scopul principal al coșului dvs. de cumpărături este de a gestiona și prelucra tranzacțiile.

Dacă coșul dvs. de cumpărături are toate funcțiile de backend de care aveți nevoie, atunci nu este necesar să comutați . Estetica site-ului dvs. web are foarte puțin de-a face cu motorul coșului de cumpărături.

Deci, chiar dacă aveți un coș de cumpărături vechi ca al meu, atâta timp cât are toate caracteristicile de care aveți nevoie, nu ar trebui să-l judecați după felul în care arată, deoarece puteți schimba întotdeauna modul în care arată.

Cea mai bună parte este că, dacă vă aflați pe o platformă open source, puteți adăuga propriile caracteristici ori de câte ori doriți, deoarece aveți control deplin.

De exemplu, pentru reproiectarea acestui site, am implementat această funcție de dovadă socială pentru magazinul meu. Practic, la fiecare 5-15 secunde, apare o mică fereastră în colțul din stânga jos, care afișează o achiziție anterioară efectuată pe site.

Pe Shopify, puteți cumpăra un plugin pentru a face exact același lucru și a plăti 15 USD / lună. Dar mi-au trebuit aproximativ 5 ore (într-adevăr ar fi trebuit să dureze 2 ore, dar codificarea mea era ruginită) să pompez același lucru fără taxe recurente .

Oricum, acestea sunt doar câteva dintre avantajele deținerii codului sursă. Dacă sunteți înclinat din punct de vedere tehnic, vă recomand să încercați open source.

Dar, dacă nu aveți idei de design web și nu doriți să aveți de-a face cu nimic tehnic, atunci mergeți cu un Shopify sau un BigCommerce.

Schimbarea schemei de culori

Una dintre cele mai mari reclamații legate de site-ul meu dintr-o perspectivă estetică a fost schema de culori. Vechiul site era violet și galben, iar paleta de culori pe care am ales-o a făcut ca site-ul să pară demodat .

Nota editorului: Iată un link către noul meu site și puteți utiliza mașina wayback pentru a vedea vechea versiune.

Ceea ce este ironic este că, în cadrul cursului Creați un magazin online profitabil, de fapt, predau lecții despre teoria culorilor, dar nu aveam aceste cunoștințe în 2013, așa că nu am avut niciodată șansa să le pun în practică .

Oricum, pe scurt, am folosit un site numit color.adobe.com pentru a alege culori complementare pentru noul meu design. Și pentru a împrospăta aspectul, am ales teal, roz aprins și galben.

De ce 3 culori? Este pentru că am vrut o culoare specifică asociată cu „a lua măsuri”. Am vrut o culoare specifică pentru a „atrage atenția”. Și, în sfârșit, am dorit o culoare generală strălucitoare pentru a face site-ul să se simtă „tânăr și șold”.

Teal este culoarea mea de fundal. Galbenul este culoarea mea de „atenție” dacă am oferte speciale, iar rozul fierbinte este folosit pentru fiecare buton de acțiune de pe site, deoarece iese în evidență și apare.

Fiecare pagină de pe site-ul meu este concepută pentru a avea un obiectiv singular.

Pentru prima pagină, vreau ca oamenii să răsfoiască colecția noastră personalizată, deoarece este secțiunea cu cele mai mari margini. În paginile categoriei, vreau ca oamenii să facă clic pe un produs. Și pe o pagină de produs, vreau ca oamenii să facă clic pe „Adaugă în coș”.

Cei 3 stâlpi ai conversiei

O mare greșeală pe care o văd făcând oamenii atunci când își proiectează propriile site-uri web este că încearcă să copieze Amazon.com . Amazon este cea mai mare platformă de comerț electronic de pe planetă, așa că de ce nu aș modela site-ul meu după al lor?

În primul rând, designul site-ului Amazon este urât, generic și nu este potrivit pentru majoritatea magazinelor online de nișă . Motivul pentru care Amazon poate scăpa de un site urât este că toată lumea știe cine sunt, sunt obișnuiți cu interfața și au deja încredere în Amazon.

Dar când aveți propriul dvs. site web, trebuie să stabiliți această încredere de la zero, deoarece nimeni nu știe cine sunteți.

În general, există trei lucruri principale care sunt cruciale pentru oricine aterizează pe site-ul dvs. pentru prima dată.

În primul rând, trebuie să informați oamenii că oferiți transport gratuit. Un fel de ofertă de expediere gratuită este acum parțială pentru curs datorită Amazon și celorlalte magazine de comerț electronic cu cutie mare.

În al doilea rând, deoarece sunteți o entitate necunoscută, doriți să-i asigurați pe clienți că își pot returna marfa dacă nu sunt mulțumiți.

Și, în sfârșit, al treilea lucru pe care trebuie să-l stabiliți cu un client nou este încrederea, care este probabil cel mai important factor dintre toți.

Dacă un client aterizează pe site-ul dvs. și nu are încredere în magazinul dvs. pentru că nu a auzit niciodată de dvs., va lua doar și va pleca.

Pentru reproiectarea mea, îmi asigur încrederea în mai multe moduri diferite.

În antetul fiecărei pagini, pun accentul pe transportul gratuit, fără returnări fără probleme și numărul meu de telefon. A avea un număr de telefon în vizualizare este FOARTE IMPORTANT!

Ori de câte ori fac cumpărături online la un nou magazin, primul lucru pe care îl fac întotdeauna este să fac clic pe pagina de contact și să caut un număr de telefon și o adresă . Și dacă niciunul dintre aceste articole nu este afișat sau dacă este prezent doar unul dintre cele două, nu voi face cumpărături acolo.

Clienții doresc posibilitatea de a contacta un magazin în cazul în care ceva nu merge bine la achiziționarea lor. Și, ca rezultat, doriți ca aceste informații să fie cât mai vizibile pe fiecare pagină, inclusiv în orele dvs. de magazin.

A avea „ore oficiale de magazin” face, de asemenea, magazinul dvs. să pară mai profesionist, deoarece întâlniți ca o afacere consacrată cu ore de birou „reale”.

Dovadă socială și încredere

Către partea de jos a fiecărei pagini, am o secțiune dedicată pentru dovezi sociale, care oferă credibilității site-ului meu.

La urma urmei, am apărut într-o grămadă de reviste diferite și am participat la emisiunea Today, deci ce rost are dacă nu ne lăudăm cu asta?

Secțiunea noastră de dovezi sociale / mențiuni de presă este pe fiecare pagină a site-ului, așa că, chiar dacă nu o vedeți prima dată, veți observa în cele din urmă.

De asemenea, am cerut o grămadă de clienți pentru fotografia lor și o mărturie care este afișată chiar sub secțiunea de presă.

Aceștia sunt clienți adevărați care au cumpărat pe site-ul nostru, au fost foarte mulțumiți de achiziția lor și au fost dispuși să ne lase o mărturie foarte frumoasă.

Un anumit client Sherri a cumpărat de peste o sută cincizeci de ori de pe site-ul nostru, deoarece îi plac foarte mult batistele noastre.

Și, în cele din urmă, am inclus o verbă care îl asigură pe client că satisfacția lor este principala noastră preocupare. Nu lăsăm niciodată un client să plece nefericit. Și dacă ceva nu merge vreodată, oferim rambursări complete.

Schimbarea navigării

Redesignarea navigării pentru noul meu site a fost o zonă în care m-am luptat. În primul rând, sunt un mare fan al navigării pe partea stângă . Vechiul meu design îl avea și clienții mei au adorat-o, deoarece meniul era întotdeauna vizibil și accesibil.

Partea stângă a unei pagini web este, de asemenea, spre care ochiul tău gravitează în mod natural și este cel mai evident loc pentru a începe cumpărăturile.

Dar iată dilema mea ...

Dacă aș include o coloană dedicată din stânga pentru navigare, orice altceva de pe site ar trebui să se micșoreze.

De exemplu, toate imaginile produsului meu ar trebui reduse semnificativ, ceea ce ar avea un impact negativ asupra conversiilor .

Imaginile din categoria mea ar fi mai mici, ceea ce ar reduce CTR .

Verbele de pe fiecare pagină ar ocupa mai multe proprietăți imobiliare pe ecran, care ar împinge produsele mai departe în josul paginii .

Deci, în cele din urmă, am mers cu un meniu derulant de nivel superior, în stil hover . Frumusețea unei bare de navigare de nivel superior este că se comportă similar cu o bară de navigare din stânga, dar nu ocupă aceeași cantitate de proprietăți imobiliare pe ecran.

Și deplasând navigarea în partea de sus, am reușit să arunc imagini de categorie și produse cu 300%, ceea ce le-a făcut să apară cu adevărat.

Celălalt avantaj al utilizării navigației de nivel superior a fost abilitatea de a separa categorii distincte într-un mod foarte curat.

De exemplu, acum am o categorie distinctă „Cumpărați după ocazie”, în timp ce în vechiul meu design, această secțiune era amestecată cu restul meniului din stânga, astfel încât să nu iasă în evidență.

Am adăugat, de asemenea, o secțiune specială dedicată bunurilor personalizate, best-sellers, nou-veniți, o pagină de întrebări frecvente, o pagină de contact, pagina despre informații, vizualizați coșul și verificați.

Practic, toate cele mai importante elemente de navigare se află acum în bara principală pentru ca toată lumea să le poată vedea.

Subliniind Propunerea mea de valoare unică

Un principiu important pe care îl predau la cursul meu de comerț electronic este că fiecare pagină de destinație de pe site-ul dvs. trebuie să aibă o propunere de valoare unică puternică .

De ce ar trebui să cumpere cineva din magazinul dvs.? De ce ar trebui să fac cumpărături aici, spre deosebire de un concurent? Răspunsul ar trebui să fie clar imediat.

Așadar, pentru acest design, am ales să subliniez punctele noastre forte din față și centru pe fiecare pagină de pe site-ul nostru.

De exemplu, pe prima pagină, propunerea noastră de valoare este o lovitură corectă în imaginea splash.

În paginile noastre de categorii, am implementat o casetă de text specială pentru a transmite de ce magazinul nostru este special.

Scopul final este de a convinge un client în primele 5 secunde de ce ar trebui să cumpere de la dvs. și nu de la un concurent.

Înfrumusețarea paginilor produsului

Una dintre cele mai mari oferte din critica site-ului meu a fost că paginile mele de produse nu erau la înălțime .

Iată o pagină de produs din designul vechi.

Iată că aceeași pagină arată ca pe noul meu site.

Observați vreo diferență? În primul rând, pentru că am eliminat bara din stânga, am putut crește dimensiunea imaginii produsului cu 266% .

Nu numai că imaginea principală este mult mai mare, dar am reamenajat și elementele din pagina produsului pentru a încuraja mai multe clicuri „Adăugați în coș”.

De exemplu, chiar lângă butonul „Adăugare la coș” sunt casete de text care liniștesc clientul de livrare gratuită și fără returnări.

Există, de asemenea, un link sus care indică în mod dinamic clientului când își va primi comanda, în funcție de alegerea standard sau expresă și de toate taxele de expediere aferente.

De asemenea, am suprapus butoanele Pinterest și Facebook direct pe imagine în sine pentru a încuraja partajarea după ce am observat că majoritatea vizitatorilor nici măcar nu s-au uitat la butoanele dedicate de partajare de pe vechiul meu site.

Un lucru interesant de remarcat este că inițial aveam două butoane uriașe albastre și roșii de distribuit pe Facebook și Pinterest chiar sub imagine așa cum se arată mai jos.

Dar, în cele din urmă, am decis să le îndepărtez, pentru că au ieșit în evidență mai mult decât butonul roz „Adăugare la coș”. În cele din urmă, apreciez o acțiune „Adăugare la coș” mult mai mult decât o acțiune de social media.

În cele din urmă, am mărit și dimensiunea secțiunii de vânzare încrucișată pentru a atrage clientul să cumpere articole similare.

Îmbunătățirea comenzii

Îmbunătățirea procesului de plată nu a fost o prioritate imensă pentru mine, deoarece nu au existat probleme grave cu vechiul site. Dar, de când am deschis deja capota, am decis să rezolv câteva probleme nerezolvate care persistă pe site-ul meu de ceva timp.

În primul rând, din când în când primeam apeluri de la persoane care erau confuze și se întrebau dacă au nevoie de un cont pentru a face cumpărături pe site-ul nostru. Iată cum arăta prima pagină de plată pe vechiul nostru site.

Soluția la această problemă a fost să ascundeți datele de conectare în mod implicit și să afișați doar două butoane roz aprinse pentru verificare.

De asemenea, am făcut logo-urile de încredere mai proeminente pentru a-l liniști pe client că plata este sigură și că satisfacția lor este garantată.

Cealaltă schimbare majoră a fost că am făcut ca plata să fie complet receptivă .

Notă: dacă sunteți pe Shopify, probabil că ați văzut deja cum arată un proces de checkout receptiv.

Așadar, în loc să reinventez roata, practic am imitat designul de achiziție al lui Shopify, deoarece este destul de minunat.

Pe scurt, iată cum arată checkout-ul meu acum pe diferite dimensiuni de ecran.

Pentru desktop ...

Pentru tabletă și mobil

Câteva cuvinte despre mobil

În timpul ultimei mele reproiectări a site-ului din 2013, am implementat un site mobil complet separat, în afară de site-ul desktop, care trăia într-un subdomeniu diferit.

Și, deși cred în continuare că a fost decizia corectă la momentul respectiv, cu siguranță nu este cazul astăzi. Astăzi, există multe cadre precum BootStrap care facilitează mult designul receptiv.

În ultimii câțiva ani, a fost o durere majoră în fund să-mi păstrez site-urile mobile și desktop sincronizate, așa că sunt fericit că am acum un singur site unificat pe toate platformele.

Principalul dezavantaj al reactivității a fost că a trebuit să testez temeinic site-ul pe 3 platforme complet diferite , desktop, tabletă și mobil. Și în cadrul fiecărei platforme se aflau mai multe versiuni de browser și rezoluții de ecran pentru a face față.

De exemplu, a trebuit să testez IE 8, 9, 10 și 11 pentru mașinile Windows. A trebuit să testez Safari 6,7 și 8 pentru Mac.

În cele din urmă, am trecut prin contul meu Google Analytics pentru a efectua teste de utilizare pentru fiecare browser care a fost folosit pe site-ul meu în ultimul an, folosind un instrument numit Browser Stack.

Inutil să spun că acest proces a fost o problemă și a fost partea mea cea mai puțin favorită a reproiectării :(

Oricum, iată câteva aspecte importante despre noul design mobil. Majoritatea acestor elemente rând sunt destul de standard, așa că nu vă voi plictisi cu prea multe detalii.

Pe tabletă și mobil, am schimbat meniul pentru a restrânge într-un singur meniu derulant.

Pe baza site-ului meu mobil anterior, am descoperit că toată lumea tinde să meargă direct către bara de căutare, așa că m-am asigurat că includ bara de căutare din față și centru pe fiecare pagină de pe site-ul mobil.

Deoarece proprietatea pe ecran este mult mai mică pe un telefon, am eliminat anumite elemente „neesențiale” ale paginii pentru dimensiuni mai mici de ecran.

Schimbări Pinterest

Ultima modificare pe care am făcut-o a fost că mi-am renovat complet paginile de conținut. După cum am menționat de mai multe ori în trecut, folosesc paginile noastre de artă și meserii pentru a direcționa oamenii către magazinul nostru online. Și Pinterest este o sursă mare de trafic pentru aceste pagini.

Drept urmare, am refăcut complet majoritatea imaginilor meșteșugărești și am făcut versiuni speciale înalte și slabe doar pentru Pinterest . De asemenea, am realizat imagini noi pentru fotografiile produselor noastre.

De exemplu, în loc să folosiți o imagine dreptunghiulară pentru Pinterest când faceți clic pe butonul „pin”, veți obține acum o versiune înaltă și slabă, care este de înaltă rezoluție.

Concluzie

Una peste alta, 7 săptămâni și 1840 USD reprezintă o investiție destul de bună pentru câștigurile pe care le experimentez acum. Principala mea problemă este că am prea multe proiecte în desfășurare simultan și nu am suficient timp pentru a lucra la fiecare.

Dar iată chestia ...

Chiar dacă rata mea de conversie a fost bună înainte, creșterea netă a vânzărilor datorită unei rate de conversie chiar mai bune va depăși probabil celelalte eforturi de construire a traficului pe care plănuisem să le implementez anul acesta.

Și dacă există o lecție de învățat aici, este că creșterea ratei de conversie pentru site-ul dvs. va crește vânzările în toate celelalte surse de trafic .

Fundația pentru afacerea dvs. de comerț electronic începe cu platforma dvs. și este important să aveți toate rațele la locul lor ÎNAINTE să vă concentrați asupra construirii traficului.