Jak powstała nowa strona Socjomanii?

Wraz z dynamicznym rozwojem naszej firmy - Socjomanii, zwiększała się potrzeba na nowoczesny serwis internetowy, będący wizytówką w branży. Strona, która powstała w 2014 roku, przestała spełniać oczekiwania pod wieloma względami, z celami biznesowymi na czele. Dowiedz się, z jakimi wyzwaniami zmierzyliśmy się projektując nową stronę.

Oto krótka historia transformacji starej strony na nową odsłonę

Socjomania to firma konsultingowo-szkoleniowa zajmująca się tematem digital marketingu. Na dzień dzisiejszy firma zajmuje się głównie digitalizacją biznesu oraz tworzeniem strategii digital dla większych marek. Strona, która powstała w 2014 roku, przestała spełniać oczekiwania pod wieloma względami, z celami biznesowymi na czele. Dlatego też podjęliśmy decyzję o rozpoczęciu projektu, który w całości nazdorowała Magdalena Ruta, nasz UX & Web Designer. To ona zaprojektowała cały proces i przygotowała poniższe case studies. 

⏰  Czas trwania projektu: 1 rok i 4 miesiące (od badań do wdrożenia)

✏️  Zakres projektu:
• Badania — analiza stanu istniejącego, konkurencji oraz rozwiązań,
• UX — wyznaczenie ścieżek użytkowników oraz sprecyzowanie celów biznesowych,
• Design — projekt nowego wyglądu strony oraz identyfikacji wizualnej,
• Product Owner — odpowiedzialność za produkt w momencie wdrożenia.

Punkt wyjścia

Strona Socjomanii 2014–2017

Aktualnie główne usługi Socjomanii to:

• 📣  Konsulting — usługi konsultingowe w zakresie digital marketingu, wliczające całe spektrum działań Socjomanii od audytów i monitoringu po rekrutacje w dziale marketingu i warsztaty zespołowe.
• 🎓  Szkolenia otwarte — szkolenia z zakresu digital marketingu, z tematów takich jak SEO, social media czy content marketing, posiadające sprecyzowaną cenę oraz program. Zaplanowane są z wielomiesięcznym wyprzedzeniem i odbywające się niemal codziennie.
• 📌  Szkolenia dedykowane — szkolenia „szyte na miarę” w zależności od potrzeb zespołu lub firmy.
• 🎯  Strategia digital — planowanie strategii efektywnego wykorzystania kanałów digital skupiające się na celach biznesowych marki. Wiąże się to z długofalową współpracą na wielu etapach.

Socjomania zaczynała w 2009 roku, jako blog o digital marketingu, który do dziś generuje ponad 70% ruchu na stronie. Następnie główną usługą firmy stały się szkolenia z social media.

Wcześniejsza strona miała pokazać, że Socjomania to nie tylko blog oraz pomóc w sprzedaży Szkoleń Otwartych. Cel osiągnięto, ale doprowadziło to do zaszufladkowania marki jako firmy zamkniętej na social media, kosztem pozostałych usług.

☠ Problemy

• Brak identyfikacji wizualnej i spójności z zewnętrznymi kanałami komunikacyjnymi.
• Mało atrakcyjny wygląd strony na tle branży szkoleniowej.
• Brak pełnego opisu usług firmy, zwłaszcza tych, których rozwój był wtedy najważniejszy i najbardziej dochodowy.
• Brak możliwości swobodnego kreowania nowych treści.
• Czasochłonny proces finalizacji zapisów uczestników na Szkolenia Otwarte (ręczne wypisywanie faktur, zakładanie karty klienta).
• Ograniczony sposób przeglądania Szkoleń Otwartych (przeglądanie po liście najbliższych szkoleń, bez rozróżnienia na ich temat lub lokalizację).

🔍 Badania wstępne

Pierwszym krokiem było przeprowadzenie badań, które pozwoliłyby na jasne określenie celów. Po pierwszych rozmowach z Bartkiem (CVO Socjomania) na temat przebudowy strony, przygotowałam i przedstawiłam zespołowi następujące analizy:

• Audyt rozwiązań e-commerce i ich zastosowanie w branży szkoleniowej.

Prześwietlenie najczęstszych zabiegów e-commercowych i potencjalnych korzyści wdrożenia ich na nowej stronie, głównie w zakresie automatyzacji sprzedaży Szkoleń Otwartych.

Zbadanie zastosowań e-commerce wśród konkurencji lub firm, do których modelu aspirujemy. Były to głównie uczelnie zagraniczne takie jak Hyper Island lub General Assembly. Poniżej zamieszczam fragment tego audytu.

• Analiza konkurencji w sektorze Szkoleń Dedykowanych, Strategii Digital oraz Konsultingu.

Badanie konkurencji w zakresie pozostałych usług Socjomanii. Obejmowało ono również analizę słów kluczowych oraz zestawienie ich z aktualną nomenklaturą firmy.

Fragment audytu rozwiązań e-commerce dla nowej strony socjomania.pl / 07.2016

Przedstawienie wyników i warsztaty z zespołem

Wyniki analiz zostały przedstawione zespołowi na wyjeździe firmowym, końcem lipca w 2016 roku, dzięki czemu w luźnej atmosferze mogliśmy wspólnie przedyskutować pierwsze pomysły i rozwiązania. 🍺

Zainspirowana ideą Design Sprintu zorganizowałam warsztaty dla całego zespołu, które pozwoliły wspólnie wyklarować wstępne cele.

🎯  Celem warsztatów było wypracowanie spójnych wymagań dla Szkoleń Otwartych, gdyż stanowiły one najbardziej wymagający element całego projektu.

💡  Zadanie polegało na zbudowaniu szkieletu strony Szkolenia Otwartegoi przedstawienie swoich rozwiązań na fizycznej makiecie.

⏳  Zespół dobrany w pary, miał na wykonanie zadania 45 minut.

Socjomaniacy do dyspozycji otrzymali zestaw karteczek z podstawowymi elementami strony (program szkolenia, opinie uczestników itp.), które mieli uzupełnić o brakujące, według nich, treści. Projektując mieli zwrócić uwagę również na hierarchię elementów oraz ścieżki użytkowników.

Warsztaty z projektowania strony
 

Warsztaty pozwoliły każdemu na przedstawienie swoich pomysłów dotyczących zarówno nowej strony, jak i rozwoju firmy.

Pozwoliło to również na uświadomienie zespołowi ich roli w całym procesie oraz głębsze zrozumienie celów projektu.

Warsztaty z projektowania strony

🔦 Badania potrzeb i zachowań

Zaplanowany przebieg badań obejmował:
• Zapoznanie się z procesem sprzedaży usług Socjomanii na podstawie wywiadu z zespołem.
 • Poznanie klientów z perspektywy zespołu.
 • Zapoznanie się z opiniami klientów na temat usług firmy (pozyskiwane po każdej współpracy).
 • Analiza zachowań użytkowników w Google Analytics (dzięki Maciek!) i Hotjar (poniżej mapy cieplne przedstawiające zachowanie użytkowników na starej stronie).

Mapy cieplne podstrony Szkolenia Otwarte wykonane za pomocą Hotjar

Do dyspozycji miałam również plik zawierający persony klientów Socjomanii, stworzony wcześniej na potrzeby sprzedażowe. Zaczęłam od wywiadów z zespołem, żeby jak najlepiej poznać procesy w firmie, klienta i obowiązki pracowników. Trenerzy, którzy spędzili wiele godzin z uczestnikami szkoleń, dostarczyli wiele informacji na temat problemów z jakimi borykają się zarówno klienci, jak i zespół.

Okazało się, że zespół poświęcał sporo czasu na tłumaczenie i przekazywanie podstawowych informacji ze względu na ich brak lub niewystarczającą widoczność na stronie. Na przykład te informacje zadecydowały o potrzebie stworzenia na stronie sekcji z odpowiedziami na najczęstsze pytania. Jednym z kluczowych wniosków był fakt, że pracować należy nie tylko nad doświadczeniami użytkownika końcowego, lecz także zespołu.

🎯 Wyznaczanie celów

Warsztaty, wywiady i stworzone analizy pozwoliły na wyklarowanie pełnych ścieżek użytkowników (user stories), nie tylko na stronie, ale zarówno przed, jak i po skorzystaniu z usług.

Strona miała przedstawiać usługi firmy jako usługi komplementarne wobec siebie. Miało to na celu pokazanie klientowi, że Socjomania może poprowadzić go przez wszystkie etapy digitalizacji. Począwszy od doradztwa i edukacji, po przygotowanie strategii oraz pomoc w jej wdrożeniu.

Wizualizacja etapów współpracy jako stały element strony

Główne cele, które miały towarzyszyć nowej stronie:

• Zwiększenie sprzedaży Szkoleń Dedykowanych — przedstawienie ich jako osobnej usługi (wcześniej była pod wspólną zakładką ze Szkoleniami Otwartymi).
• Zwiększenie sprzedaży Strategii Digital i nawiązywanie stałej, długofalowej współpracy.
• Automatyzacja sprzedaży Szkoleń Otwartych.
• Optymalizacja czasu pracy związanego z obsługą klientów (np. wystawianie faktur).
• Rozbudowanie i aktualizacja treści oferowanych usług.
• Aktualizacja wizerunku firmy i zespołu.
• Zbudowanie strony w idei „Component Based Design” pozwalającej na jej prostą implementację i rozbudowę.
• Stworzenie nowej identyfikacji wizualnej i uspójnienie treści we wszystkich kanałach komunikacji.

🛠 Czas na makiety

Po ustaleniu celów nadszedł czas na tworzenie makiet i pierwsze testy.

Początki makietowania

Za pomocą narzędzia do prototypowania oraz współpracy nad projektem, Invision, udostępniłam pierwsze interaktywne makiety dla zespołu oraz osób z zewnątrz, które testowały powstające rozwiązania.

Przeprowadziłam testy na osobach spoza Socjomanii, które przybrały rolę użytkowników. Badania obejmowały głównie zakres płynności procesu rejestracji w Szkoleniach Otwartych. Odbywały się one na żywo, dzięki temu mogłam zaobserwować reakcje i zachowania uczestników podczas pokonywania kolejnych kroków zadań testowych i nanieść niezbędne poprawki.

Makiety zostały skonsultowane z osobami i firmami z branży UX-owej: Dawida Tkocza, Edisondę i Artura Olszynę.

Blue Paprica, która była odpowiedzialna za implementację strony, również brała czyny udział w zmianach i poprawie wdrażanych rozwiązań.

Dyskusja z zespołem na temat pierwszych rozwiązań na Invision

Fragmenty makiet nowej strony

🎨 Nowa identyfikacja wizualna

Po mniej więcej czterech miesiącach badań, makietowania oraz testów nadszedł czas na część wizualną.

Potrzebowaliśmy wyznaczyć kolorystykę oraz klucz wizualny, który stanie się charakterystycznym elementem Socjomanii.

Podczas projektowania należało uwzględnić nie tylko stronę, ale również regularnie tworzone treści w mediach społecznościowych, reklamy oraz prezentacje szkoleniowe trenerów.

Razem z Mateusz Kosma z Edisondy stworzyliśmy zestaw kolorów, które razem komponują się dobrze — niezależnie od użytej kombinacji.

Było to kluczowe, ponieważ prezentacje dla klientów, które są tworzone samodzielnie przez zespół, musiały wyglądać estetycznie i spójnie.

Nowa kolorystyka

Kluczem wizualnym stały się latające kropki, które nawiązują do animacji reakcji w live wideo na Facebooku.

Latające kropki jako nowy klucz wizualny

Przed projektowaniem, poprosiłam zespół, by każdy wypisał skojarzenia i kluczowe słowa, którymi opisaliby Socjomanię oraz jej wartości. Podczas prezentacji pomysłu na nową identyfikację i klucz wizualny, zestawiłam ją z ich słowami. Dzięki temu, każdy zrozumiał decyzje projektowe oraz stojącą za nimi ideę.

Wartości Socjomanii

Logotyp zyskał delikatnie odświeżony. Zyskał delikatnie zaokrąglony kształt, w celu dostosowania go do nowej identyfikacji.

Nowe logo (po lewej), stare logo (po prawej)

Logo Socjomanii podkreśla, że firma stawia potrzeby człowieka w centrum uwagi. Powstała identyfikacja ma przedstawiać Socjomanię jako innowacyjną firmę zajmującą się digital marketingiem, zwróconą na potrzeby klienta.

🚀 Style guide

Głównym podejściem do stworzenie strony było zastosowanie „Component Based Design”. Metodyki, pozwalającej na wydzielenie powtarzalnych komponentów, zaczynając od prostych przycisków, kończąc na rozbudowanych widgetach typu karuzela.

Podczas projektowania utworzyłam styleguide, na którym mogli bazować developerzy podczas wdrożenia. Ponadto część z komponentów została udostępniona w systemie CMS, z których można budować kolejne treści (np. nowe podstrony).

Strona zbudowana jest z czterech głównych kolorów, które są przypisane do głównych usług Socjomanii:
• Konsulting—czerwony
• Szkolenia Otwarte — fioletowy
• Szkolenia dedykowane—zielony
• Strategia digital—żółty

Każda podstrona usługi głównej, składa się z dwóch kolorów: koloru głównego oraz koloru uzupełniającego.

Kolor uzupełniający wykorzystywany jest do elementów takich jak hover color czy kolor ikon na podstronie.

Kolorem głównym pozostałych podstron jest kolor czerwony.

Styleguide — kolory

Styleguide — przycisk

Widok CMSa i dostępnych widgetów, z których można budować nowe podstrony na nowej stronie.

👑 Design strony

Po ustaleniu głównych wytycznych identyfikacji, klucza wizualnego oraz rozwiązań uzyskanych podczas makietowania, nastąpił proces właściwego tworzenia designu strony. Omówię kilka głównych rozwiązań, które zostały zaimplementowane.

🗒️ Projektowanie opisów usług

Jednym z założonych celów była klarowna prezentacja oferty, wraz z uświadomieniem klienta o procesach, przebiegu i zakresie tworzonej oferty.

Podstrony te zawierały statyczne treści i głównym zadaniem od strony projektowania było jak najczytelniejsze przedstawienie rozbudowanych i czasem skomplikowanych informacji. Rozwiązania te miały zapewnić klienta o profesjonalizmie i doświadczeniu firmy w celu zdobycia jego zaufania.

Przedstawienie procesu powstawania Strategii Digital w Socjomanii

🎓 Szkolenia Otwarte

W przeciwieństwie do pozostałych usług, które są personalizowane pod klientów, Szkolenia Otwarte są dostępne dla wszystkich. Mają one ustalony program, cenę i odbywają się niemal codziennie.

Szkolenia odbywają się w Krakowie i Warszawie, skupiają się na jednym z kilkunastu tematów, kilku poziomów trudności oraz są zaplanowane z paromiesięcznym wyprzedzeniem.

Wyszukiwanie szkolenia na poprzedniej stronie było utrudnione, ponieważ pozwalało jedynie na przeglądanie chronologicznej listy terminów z pomieszanymi miastami.

Jednym z celów była automatyzacja sprzedaży szkoleń, inspirowana rozwiązaniami ze sklepów internetowych.

Szkolenia Otwarte i Szkolenia Dedykowane funkcjonowały pod jednym szyldem jako „Szkolenia”, mimo że ich grupa docelowa bardzo się różniła.

Aby zapewnić użytkownikowi szybkie i klarowne dopasowanie szkolenia do jego potrzeb, uwzględniłam między innymi filtrowanie oraz sortowanie na podstawie tematu, poziomu i lokalizacji. W celu łatwiejszego przeglądania listy, szkolenia mają dedykowane ikony, nawiązujące do ich tematu.

Poniżej głównej listy powstał alternatywny widok w formie harmonogramu, gdzie zostały wypisane wszystkie szkolenia w danym miesiącu.

Widok listy i harmonogramu Szkoleń Otwartych na nowej stronie

👩 „Strona matka”

Każdy temat szkolenia posiada „stronę matkę”, zawierającą wszystkie dotyczące go terminy szkoleń oraz program. Warto wspomnieć, że przekierowywane są do niej linki ze szkoleń, które już się odbyły.

Podstrona pojedynczego wydarzenia

Każdy termin szkolenia posiada także swoją podstronę (edytowalną niezależnie w CMS) zawierającą program oraz pozostałe informacje.

Nowościami względem starej odsłony były między innymi:

• Wyeksponowanie zdjęć sal szkoleniowych — podkreślenie wysokiego standardu warunków w jakich odbywa się szkolenie.
• Podstawowe FAQ — najczęstsze pytania i odniesie do pełnej podstrony.
• Cross-selling — odniesienia do innych szkoleń oraz pozostałych usług.
• Up-selling — pakiety szkoleń i usługi uzupełniające.
• „Przekonaj pracodawcę” — PDF z elementami wyróżniającymi Socjomanię na tle innych firm szkoleniowych.
• Wyeksponowanie opinii uczestników.
• Zawarcie wszystkich niezbędnych informacji „above the fold”.
• Możliwość rejestracji na szkolenie przez koszyk.

Podstrona wydarzenia w Szkoleniach Otwartych, na nowej stronie

🛒 Koszyk

Na poprzedniej stronie proces zapisu na szkolenie odbywał się przez formularz kontaktowy, który nie zawierał wielu potrzebnych informacji. Zaś próba ich uzyskania w tej formie, poprzez dodanie pól, znacząco wpłynęłaby na niechęć ich wypełnienia.

Jednym z celów było stworzenie zapisów przez koszyk, który został zaprojektowany stricte na potrzeby Socjomanii.

Między innymi pozwala to na:

• Rejestrację większej ilości uczestników.
• Rejestrację na więcej niż jedno szkolenie.
• Rozróżnienie osoby zamawiającej oraz uczestników w celu umożliwienia rejestracji osób trzecich (np. zapis pracownika przez szefa).
• Możliwość szybkiej zmiany terminu szkolenia, bez cofania się do poprzedniego kroku, które mogłoby spowodować potencjalne porzucenie koszyka.
• Dokupienie godzin indywidualnych konsultacji (cross-selling).
• Widoczna informacja na temat zniżek dla pakietów i dodatkowych uczestników oraz ich automatyczne naliczanie (up-selling).

Mini-koszyk zaprojektowany pod usługę Szkoleń Otwartych na nowej stronie

W przeciwieństwie do standardowego koszyka sklepu internetowego, Socjomania nie finalizuje procesu płatnością — jest to jedynie forma rejestracji, po której następuje kontakt ze strony firmy. Celem tego podejścia jest potwierdzenie, czy klient wybrał szkolenie najlepiej odpowiadające jego potrzebom.

Starannie skonstruowane formularze zarówno dobrze konwertują i nie odstraszają potencjalnego klienta, jak i pozyskane dane w pełni wystarczają do automatycznego generowania faktury.

Realizuje to cel związany z optymalizacją czasu działu sprzedaży.

Rejestracja przez koszyk - krok 1

Rejestracja przez koszyk - krok 2

Rejestracja przez koszyk - krok 3

📖 Przygotowywanie treści na stronę

Treści, które miały się znaleźć na stronie były przygotowywane około 2 miesiące przed planowanym wdrożeniem.

W tym celu zebraliśmy w Socjomanii zespół odpowiedzialny za nowy opis oferty i poszczególnych sekcji. Każdy dostał do opracowania fragment tekstów pod usługi, które były najbliższe jego obowiązkom.

W międzyczasie powstawały nowe zdjęcia zespołu oraz zapowiedzi wideo do Szkoleń Otwartych.

Takie rozdysponowanie zadań oraz praca na wspólnym pliku, udostępnionym online, pozwoliło na sprawne dogranie finalnego wyglądu treści. Dzięki temu przy pierwszej możliwości wgrania naszych tekstów i zdjęć na nową stronę, mogliśmy prowadzić testy bazując na docelowej zawartości.
Uniknęliśmy dzięki temu wielu niespodzianek.

❓Co dalej?

Mimo dużej ilości pracy, wciąż jest sporo pomysłów, które są w planach realizacji w niedalekiej przyszłości. Niektóre z nich to:

• Integracja z Podio — platformą do zarządzania klientami, której używa Socjomania, w celu automatycznego zapisywania klientów z koszyka do bazy.
• Zbudowanie platformy do spersonalizowanych szkoleń online.
• Moduł, który interaktywnie i w angażujący sposób poprowadzi klienta przez proces wyboru usługi bazując na jego potrzebach.

I dużo więcej… :)

🔥 Rozwiązania UI

Podgląd i opis wybranych rozwiązań UI na nowej stronie znajdziecie w osobnym artykule.

Rozwiązania UI na nowej stronie

Podsumowanie

Razem z zespołem wykonaliśmy kawał dobrej roboty. Wierzę, że strona pomoże spełnić większość celów, które postawiliśmy sobie przy jej tworzeniu.

Chętnie poznam Wasze wrażenia i opinie na temat nowej strony lub opisanego tutaj procesu.