Przeprojektowanie mojej taniej strony internetowej, które zwiększyło współczynniki konwersji o 42% w 7 tygodni
Opublikowany: 2021-08-19Całkowite przeprojektowanie strony internetowej mojego sklepu internetowego było na mojej liście „do zrobienia” od bardzo dawna, ale nie mogłem zmusić się do pociągnięcia za spust, ponieważ nigdy nie było to priorytetem.
To jest ta rzecz. Mój współczynnik konwersji zawsze był całkiem dobry (>3%). A mój sklep internetowy z każdym rokiem rośnie dwucyfrowo, więc po co kołysać łodzią?
Ale potem trzy miesiące temu uczestniczyłem w spotkaniu mistrzów z grupą innych weteranów e-commerce i postanowiłem o tym poruszyć podczas mojej tury.
Hej wszystkim. Zastanawiam się nad przeprojektowaniem witryny, ale mój obecny współczynnik konwersji jest nadal całkiem niezły. Czy muszę go teraz zaktualizować? Myślisz, że to wystarczająco złe, że muszę to naprawić dzisiaj? Czy mogę odłożyć to na kolejny rok?
Odpowiedzi, które otrzymałem, były nieznośnie bolesne.
- Ta strona wygląda tak, jakby została zaprojektowana w latach 90-tych. Jeśli dokonałeś przeprojektowania, założę się, że możesz uzyskać 50% wzrost współczynnika konwersji. – Mike Jackness
- Prowadzisz kurs? Nie poszedłbym na twoje zajęcia, gdybym to zobaczył. – Kevin Stecko
- Są to rodzaje stron, które lubię kupować , naprawiać, a następnie odsprzedawać z zyskiem. – Dana Jaunzemis
Słuchanie tych komentarzy naprawdę zraniło moją dumę i starałem się jak najlepiej nie bronić się.
Ale jak tylko wróciłem od mistrza, natychmiast skontaktowałem się z moim projektantem, przygotowałem szybką makietę w Photoshopie i zacząłem ją kręcić .
Mój proces implementacji był dość prosty. Sam przejrzałem i przebrnąłem przez każdą stronę, ułożyłem ją „z grubsza” tak, jak chciałem, aby wyglądała i poleciłem mojemu projektantowi zebrać elementy, aby „wyglądały lepiej”.
Przeznaczyłem około 6 tygodni na wykonanie przeprojektowania z udziałem około 40 godzin własnego czasu. Każda strona w witrynie została całkowicie przerobiona.
Ogólnie rzecz biorąc, projekt zajął 7 tygodni z powodu nieprzewidzianych okoliczności związanych z kompatybilnością przeglądarek (nienawidzę cię IE!) i kosztował mnie 1840 $ .
Uwaga redaktora: Oto link do mojej nowej strony i możesz użyć maszyny do powrotu, aby zobaczyć starą wersję.
Uzyskaj bezpłatny mini kurs na temat tego, jak założyć udany sklep e-commerce
Jeśli jesteś zainteresowany rozpoczęciem działalności e-commerce, przygotowałem kompleksowy pakiet zasobów , które pomogą Ci uruchomić własny sklep internetowy od zera. Koniecznie weź go przed wyjazdem!
Wyniki przeprojektowania mojej witryny
Poniższe wyniki konwersji dotyczą tylko telefonów komórkowych, komputerów stacjonarnych i tabletów dla ruchu CPC Google .
Ponieważ moja witryna generuje mnóstwo ruchu ze stron z treścią, które niekoniecznie prowadzą do sprzedaży, w celach porównawczych najbardziej sensowne było przeprowadzenie obliczeń dla ukierunkowanego ruchu reklamowego PPC.
- Współczynniki konwersji komputerów stacjonarnych wzrosły o 46% Zaktualizowano!
- Współczynniki konwersji mobilnych wzrosły o 21% Zaktualizowano!
- Współczynniki konwersji tabletów wzrosły o 25% Zaktualizowano!
Uwaga: moje dane dotyczące współczynnika konwersji zostały porównane z dokładnie tym samym okresem co rok wcześniej, aby wyeliminować zmienne, takie jak sezonowość i wahania popytu.
Biorąc to pod uwagę, jedynym prawdziwym sposobem mierzenia różnic współczynnika konwersji jest test dzielony na projekty, którego nie zrobiłem w interesie czasu.
Po pierwsze, wzrost współczynnika konwersji komputerów stacjonarnych naprawdę mnie zszokował, ponieważ nie spodziewałem się tak dużego skoku. Wiedziałem, że moja stara strona wymaga pracy, ale nie aż tak bardzo!
( Aktualizacja: po kilku miesiącach większej ilości danych wzrost współczynnika konwersji dla komputerów wynosi 46%)
W przypadku klientów korzystających z tabletów wzrost współczynnika konwersji był w rzeczywistości wyższy niż 15%, ponieważ kilka tygodni po uruchomieniu znalazłem poważny błąd we wdrażaniu tabletów, który został zmieszany z wynikami.
( Aktualizacja: po kilku miesiącach większej ilości danych wzrost współczynnika konwersji dla tabletów wynosi 25%).
A jeśli chodzi o urządzenia mobilne, zaimplementowałem już całkiem przyzwoitą witrynę mobilną w 2013 roku, więc nie spodziewałem się dużych skoków, ale 12% nadal jest całkiem niezłe.
( Aktualizacja: po kilku miesiącach większej ilości danych wzrost współczynnika konwersji dla urządzeń mobilnych wynosi 21%).
W każdym razie mimo wzrostu konwersji nie wszystkie dane były różowe. Z jakiegoś powodu moje wskaźniki na stronie, takie jak współczynnik odrzuceń, wzrosły o około 10% .
Uwaga redaktora: W tej chwili podejrzewam, że to dlatego, że usunąłem lewą nawigację ze strony, ale muszę przesiać dane, aby dowiedzieć się, dlaczego tak się dzieje. Aktualizacja! Zatrzymałem obsługę kilku wersji przeglądarek w tym przeprojektowaniu, co przyczyniło się do tego problemu.
Jakiego koszyka używam?
Najczęstsze pytanie, które zawsze zadaje mi się przy każdym przeprojektowaniu, to…
Steve, co to za koszyk? Czy to Shopify? A może to Bigcommerce?
A kiedy mówię wszystkim, że nadal używam mojego mocno zmodyfikowanego oldschoolowego koszyka na zakupy open source , zwykle są zszokowani.
To jest ta rzecz…
Wybrany koszyk na zakupy nie ma nic wspólnego z wyglądem koszyka na zakupy ani wyglądem witryny. Głównym celem Twojego koszyka jest obsługa i przetwarzanie transakcji.
Jeśli Twój koszyk ma wszystkie potrzebne funkcje zaplecza, nie musisz koniecznie przełączać . Estetyka Twojej witryny ma niewiele wspólnego z silnikiem koszyka.
Więc nawet jeśli masz wózek sklepowy, który jest tak stary jak mój, o ile ma wszystkie potrzebne funkcje, nie powinieneś oceniać go po tym, jak wygląda, ponieważ zawsze możesz zmienić jego wygląd.
Najlepsze jest to, że jeśli jesteś na platformie open source, możesz dodawać własne funkcje, kiedy tylko chcesz, ponieważ masz pełną kontrolę.
Na przykład w celu przeprojektowania tej witryny zaimplementowałem tę fajną, małą funkcję dowodu społecznego w moim sklepie. Zasadniczo co 5-15 sekund w lewym dolnym rogu pojawia się małe okienko, które wyświetla poprzedni zakup dokonany na stronie.
W Shopify możesz kupić wtyczkę, aby zrobić dokładnie to samo i zapłacić 15 USD miesięcznie. Ale zajęło mi to około 5 godzin (naprawdę powinno to zająć 2 godziny, ale moje kodowanie było zardzewiałe), aby wypompować to samo bez powtarzających się opłat .
W każdym razie to tylko niektóre z zalet posiadania kodu źródłowego. Jeśli masz techniczne inklinacje, polecam wypróbowanie open source.
Ale jeśli nie masz pojęcia o projektowaniu stron internetowych i nie chcesz mieć do czynienia z niczym technicznym, wybierz Shopify lub BigCommerce.
Zmiana schematu kolorów
Jedną z największych skarg na moją stronę z estetycznego punktu widzenia była kolorystyka. Stara strona była fioletowo-żółta, a paleta kolorów, którą wybrałem, sprawiła, że strona wyglądała na staromodną .
Uwaga redaktora: Oto link do mojej nowej strony i możesz użyć maszyny do powrotu, aby zobaczyć starą wersję.
Ironiczne jest to, że w moim kursie tworzenia zyskownego sklepu internetowego prowadzę lekcje z teorii kolorów, ale nie miałem tej wiedzy w 2013 roku, więc nigdy nie miałem okazji zastosować jej w praktyce .
W każdym razie, w skrócie, skorzystałem ze strony o nazwie color.adobe.com, aby wybrać kolory uzupełniające dla mojego nowego projektu. Aby odświeżyć wygląd i styl, wybrałem turkusowy, gorący róż i żółty.
Dlaczego 3 kolory? To dlatego, że zależało mi na konkretnym kolorze związanym z „podejmowaniem działania”. Zależało mi na konkretnym kolorze, który „zwróci uwagę”. I wreszcie, chciałem mieć jasny ogólny kolor, aby strona wydawała się „młoda i modna”.
Turkusowy to mój kolor tła. Żółty to mój kolor „uwagi”, jeśli mam jakieś specjalne oferty, a gorący różowy jest używany dla każdego przycisku akcji na stronie, ponieważ wyróżnia się i wyskakuje.
Każda strona w mojej witrynie ma jeden cel.
Na pierwszej stronie chcę, aby ludzie przeglądali naszą spersonalizowaną kolekcję, ponieważ jest to sekcja z najwyższymi marżami. Na stronach kategorii chcę, aby ludzie klikali produkt. A na stronie produktu chcę, aby ludzie kliknęli „Dodaj do koszyka”.
3 filary nawrócenia
Jednym wielkim błędem, który widzę, że ludzie popełniają podczas projektowania własnych stron internetowych, jest to, że próbują kopiować Amazon.com . Amazon to największa platforma e-commerce na świecie, więc dlaczego nie miałbym wzorować się na ich witrynie?
Przede wszystkim projekt strony Amazon jest brzydki, ogólny i nieodpowiedni dla większości niszowych sklepów internetowych . Powodem, dla którego Amazon może ujść na sucho z brzydką stroną internetową, jest to, że wszyscy wiedzą, kim są, są przyzwyczajeni do interfejsu i już ufają Amazonowi.
Ale kiedy masz własną stronę internetową, musisz zbudować to zaufanie od podstaw, ponieważ nikt nie wie, kim jesteś.
Ogólnie rzecz biorąc, istnieją trzy główne rzeczy, które są kluczowe dla każdego, kto wchodzi na Twoją witrynę po raz pierwszy.
Po pierwsze, musisz poinformować ludzi, że oferujesz bezpłatną wysyłkę. Pewna oferta bezpłatnej wysyłki jest teraz na równi z kursem dzięki Amazonowi i innym dużym sklepom e-commerce.
Po drugie, ponieważ jesteś nieznanym podmiotem, chcesz zapewnić klientów, że mogą zwrócić towar, jeśli nie będą zadowoleni.
I wreszcie trzecią rzeczą, którą musisz nawiązać z nowym klientem, jest zaufanie, które jest chyba najważniejszym czynnikiem z nich wszystkich.
Jeśli klient trafi na Twoją stronę i nie ufa Twojemu sklepowi, ponieważ nigdy o Tobie nie słyszał, po prostu odbierze i wyjdzie.
W przypadku mojego przeprojektowania wymuszam zaufanie na wiele różnych sposobów.
W nagłówku każdej strony podkreślam bezpłatną wysyłkę, bezproblemowe zwroty i mój numer telefonu. Posiadanie numeru telefonu na widoku jest BARDZO WAŻNE!
Ilekroć robię zakupy online w nowym butiku, pierwszą rzeczą, którą zawsze robię, jest kliknięcie na stronę kontaktową i wyszukanie numeru telefonu i adresu . A jeśli żaden z tych przedmiotów nie jest wystawiony lub jeśli jest tylko jeden z dwóch, nie będę tam robił zakupów.
Klienci chcą mieć możliwość skontaktowania się ze sklepem, jeśli coś pójdzie nie tak z ich zakupem. W rezultacie chcesz, aby te informacje były jak najbardziej widoczne na każdej stronie, w tym w godzinach otwarcia sklepu.
Posiadanie „oficjalnych godzin pracy” sprawia również, że Twój sklep wydaje się bardziej profesjonalny, ponieważ wyglądasz jak firma o ustalonej pozycji z „prawdziwymi” godzinami pracy.
Dowód społeczny i zaufanie
Na dole każdej strony mam dedykowaną sekcję dla dowodów społecznych, które zwiększają wiarygodność mojej witryny.
W końcu byliśmy opisywani w wielu różnych magazynach i byliśmy w programie Today, więc jaki jest sens, jeśli się tym nie chwalimy?
Nasza sekcja z dowodami społecznościowymi/wzmiankami prasowymi znajduje się na każdej stronie witryny, więc nawet jeśli nie zobaczysz jej za pierwszym razem, w końcu ją zauważysz.
Poprosiłem również grupę naszych klientów o ich zdjęcie i referencję, która znajduje się tuż pod sekcją prasową.
To są prawdziwi klienci, którzy robili zakupy na naszej stronie, byli bardzo zadowoleni z zakupu i byli gotowi zostawić nam bardzo miłą opinię.
Jeden konkretny klient, Sherri, kupił ponad sto pięćdziesiąt razy na naszej stronie, ponieważ bardzo lubi nasze chusteczki.
I na koniec dodałem kilka słów, które zapewniają klienta, że jego satysfakcja jest naszą główną troską. Nigdy nie pozwalamy klientowi odejść niezadowolony. A jeśli coś pójdzie nie tak, zapewniamy pełny zwrot pieniędzy.
Zmiana nawigacji
Przeprojektowanie nawigacji dla mojej nowej witryny było obszarem, w którym miałem trudności. Po pierwsze, jestem OGROMNYM fanem nawigacji po lewej stronie . Mój stary projekt miał to i moi klienci to pokochali, ponieważ menu było zawsze widoczne i dostępne.
Lewa strona strony internetowej to również miejsce, w którym naturalnie przyciąga wzrok i jest to najbardziej oczywiste miejsce, w którym można rozpocząć zakupy.
Ale oto mój dylemat…
Gdybym miał dołączyć do nawigacji dedykowaną kolumnę po lewej stronie, wszystko inne na stronie musiałoby się skurczyć.
Na przykład wszystkie moje zdjęcia produktów musiałyby zostać znacznie zmniejszone, co miałoby negatywny wpływ na konwersje .
Moje obrazy w kategorii byłyby mniejsze, co obniżyłoby CTR .
Słownictwo na każdej stronie zajmowałoby więcej miejsca na ekranie, co spychałoby produkty dalej w dół strony .
Ostatecznie zdecydowałem się więc na rozwijane menu najwyższego poziomu w stylu najechania kursorem . Piękno paska nawigacyjnego najwyższego poziomu polega na tym, że zachowuje się on podobnie do paska nawigacyjnego po lewej stronie, ale nie zajmuje takiej samej powierzchni ekranu.
Przenosząc nawigację na górę, udało mi się powiększyć zdjęcia kategorii i produktów o 300%, co sprawiło, że były naprawdę popularne.
Inną zaletą korzystania z nawigacji najwyższego poziomu była możliwość oddzielenia odrębnych kategorii w bardzo przejrzysty sposób.
Na przykład mam teraz odrębną rozwijaną kategorię „Sklep przy okazji”, podczas gdy w moim starym projekcie ta sekcja była pomieszana z resztą menu po lewej stronie, aby się nie wyróżniała.
Dodałem również specjalną sekcję poświęconą spersonalizowanym towarom, bestsellerom, nowościom, stronę FAQ, stronę kontaktową, stronę z informacjami, przeglądanie koszyka i kasę.
Zasadniczo wszystkie najważniejsze elementy nawigacji znajdują się teraz na głównym pasku, aby wszyscy mogli je zobaczyć.
Podkreślanie mojej wyjątkowej propozycji wartości
Ważną zasadą, której uczę na moim kursie e-commerce, jest to, że każda strona docelowa w Twojej witrynie musi mieć silną, unikalną propozycję wartości .
Dlaczego ktoś miałby kupować w Twoim sklepie? Dlaczego powinienem robić zakupy tutaj, a nie u konkurencji? Odpowiedź powinna być jasna od razu.
Dlatego w przypadku tego projektu postanowiłem podkreślić nasze mocne strony z przodu i na środku każdej strony w naszej witrynie.
Na przykład na pierwszej stronie nasza propozycja wartości znajduje się bezpośrednio w obrazie powitalnym.
Na naszych stronach kategorii zaimplementowałem specjalne pole tekstowe, aby przekazać, dlaczego nasz sklep jest wyjątkowy.
Ostatecznym celem jest przekonanie klienta w ciągu pierwszych 5 sekund, dlaczego powinien kupować od Ciebie, a nie od konkurencji.
Upiększanie stron produktów
Jednym z największych wniosków z mojej krytyki witryny było to, że moje strony produktów nie były na równi .
Oto strona produktu ze starego projektu.
Oto ta sama strona, która wygląda jak w mojej nowej witrynie.
Czy zauważasz jakieś różnice? Po pierwsze, ponieważ usunąłem lewy pasek boczny, mogłem zwiększyć rozmiar obrazu produktu o 266% .
Nie tylko główny obraz jest znacznie większy, ale także przearanżowałem elementy strony produktu, aby zachęcić do większej liczby kliknięć „Dodaj do koszyka”.
Na przykład tuż obok przycisku „Dodaj do koszyka” znajdują się pola tekstowe, które zapewniają klienta o bezpłatnej wysyłce i bezproblemowych zwrotach.
Istnieje również górny link, który dynamicznie informuje klienta, kiedy otrzyma zamówienie, w zależności od tego, czy wybierze standardowe, czy ekspresowe, oraz wszystkie związane z tym opłaty za wysyłkę.
Nałożyłem również przyciski Pinteresta i Facebooka bezpośrednio na sam obraz , aby zachęcić do udostępniania po zauważeniu, że większość odwiedzających nawet nie spojrzała na dedykowane przyciski udostępniania na mojej starej witrynie.
Warto zauważyć, że pierwotnie miałem dwa ogromne niebieskie i czerwone przyciski do udostępniania na Facebooku i Pintereście tuż pod obrazem, jak pokazano poniżej.
Ale ostatecznie zdecydowałem się je usunąć, ponieważ wyróżniały się bardziej niż gorący różowy przycisk „Dodaj do koszyka”. Ostatecznie cenię sobie akcję „Dodaj do koszyka” znacznie bardziej niż udostępnienie w mediach społecznościowych.
Na koniec zwiększyłem również rozmiar sekcji sprzedaży krzyżowej, aby zachęcić klienta do zakupu podobnych przedmiotów.
Poprawa realizacji transakcji
Poprawa procesu kasowania nie była dla mnie priorytetem, ponieważ nie było żadnych poważnych problemów ze starą witryną. Ale ponieważ miałem już otwartą maskę, postanowiłem naprawić kilka nierozstrzygniętych problemów, które od dłuższego czasu pojawiały się na mojej stronie.
Po pierwsze, od czasu do czasu otrzymywaliśmy telefony od ludzi, którzy byli zdezorientowani i zastanawiali się, czy potrzebują konta, aby robić zakupy na naszej stronie. Oto jak wyglądała pierwsza strona kasy w naszej starej witrynie.
Rozwiązaniem tego problemu było domyślne ukrycie logowania i wyświetlenie tylko dwóch gorących różowych przycisków do kasy.
Uczyniłem również logo zaufania bardziej widocznym, aby upewnić klienta, że płatność jest bezpieczna i że jego satysfakcja jest gwarantowana.
Inną ważną zmianą było to , że kasa była całkowicie responsywna .
Uwaga: Jeśli korzystasz z Shopify, prawdopodobnie już wiesz, jak wygląda dobrze wyglądający, responsywny proces realizacji transakcji.
Więc zamiast wymyślać koło na nowo, w zasadzie naśladowałem projekt kasy Shopify, ponieważ jest całkiem niesamowity.
Krótko mówiąc, oto jak teraz wygląda moja kasa na różnych rozmiarach ekranu.
Na komputerze…
Na tablet i telefon
Kilka słów o telefonie komórkowym
Podczas mojego ostatniego przeprojektowania witryny w 2013 roku zaimplementowałem całkowicie oddzielną witrynę mobilną, poza witryną na komputery, która znajdowała się w innej subdomenie.
I chociaż nadal wierzę, że była to wtedy słuszna decyzja, dziś zdecydowanie tak nie jest. Obecnie istnieje wiele frameworków, takich jak BootStrap, które znacznie ułatwiają projektowanie responsywne.
W ciągu ostatnich kilku lat synchronizacja witryn mobilnych i stacjonarnych była bardzo uciążliwa, więc cieszę się, że mam teraz jedną, ujednoliconą witrynę na wszystkich platformach.
Główną wadą responsywności było to, że musiałem dokładnie przetestować witrynę na 3 zupełnie różnych platformach : komputer stacjonarny, tablet i telefon komórkowy. Każda platforma zawierała wiele wersji przeglądarek i rozdzielczości ekranu.
Na przykład musiałem przetestować IE 8, 9, 10 i 11 na komputerach z systemem Windows. Musiałem przetestować Safari 6,7 i 8 dla komputerów Mac.
W końcu przeszedłem przez moje konto Google Analytics, aby przeprowadzić testy użyteczności dla każdej przeglądarki , która była używana w mojej witrynie w ciągu ostatniego roku, za pomocą narzędzia o nazwie Browser Stack.
Nie trzeba dodawać, że ten proces był do niczego i był moją najmniej ulubioną częścią przeprojektowania:(
W każdym razie, oto kilka najważniejszych informacji dotyczących nowego projektu mobilnego. Większość z tych elementów zamówienia jest dość standardowa, więc nie będę Cię nudził zbyt wieloma szczegółami.
Na tablecie i telefonie komórkowym zmieniłem menu, aby zwinąć się do jednego menu rozwijanego.
W oparciu o moją poprzednią witrynę mobilną odkryłem, że wszyscy mają tendencję do przechodzenia bezpośrednio do paska wyszukiwania, więc upewniłem się, że pasek wyszukiwania jest umieszczony z przodu i na środku każdej strony w witrynie mobilnej.
Ponieważ ekran telefonu jest znacznie mniejszy, usunąłem pewne „nieistotne” elementy strony dla mniejszych rozmiarów ekranu.
Zmiany na Pintereście
Ostatnią zmianą, jaką wprowadziłem, było całkowite odnowienie moich stron z treścią. Jak już wielokrotnie wspominałem w przeszłości, korzystam z naszych stron poświęconych sztuce i rzemiośle, aby kierować ludzi do naszego sklepu internetowego. A Pinterest jest dużym źródłem ruchu dla tych stron.
W rezultacie całkowicie przerobiłem większość obrazów rzemieślniczych i stworzyłem specjalne wysokie i chude wersje tylko na Pinterest . Zrobiłem również zupełnie nowe obrazy do zdjęć naszych produktów.
Na przykład, zamiast używać prostokątnego obrazu dla Pinteresta, gdy klikniesz przycisk „przypnij”, otrzymasz teraz wysoką i szczupłą wersję, która jest w wysokiej rozdzielczości.
Wniosek
Podsumowując, 7 tygodni i 1840 dolarów to całkiem niezła inwestycja dla zysków, których teraz doświadczam. Moim głównym problemem w tej chwili jest to, że mam zbyt wiele projektów realizowanych jednocześnie i za mało czasu na pracę nad każdym z nich.
Ale o to chodzi…
Mimo że mój współczynnik konwersji był wcześniej dobry, wzrost sprzedaży netto dzięki jeszcze lepszemu współczynnikowi konwersji prawdopodobnie przebije inne działania na rzecz budowania ruchu, które planowałem wdrożyć w tym roku.
A jeśli z tego można wyciągnąć wnioski, to fakt, że zwiększenie współczynnika konwersji w witrynie zwiększy sprzedaż we wszystkich innych źródłach odwiedzin .
Podstawa Twojego biznesu e-commerce zaczyna się od Twojej platformy i ważne jest, aby mieć wszystkie swoje kaczki na miejscu, ZANIM skupisz się na budowaniu ruchu.