Ideamotive: budowa marketplace'u specjalistów IT na HubSpot CMS

Na jakie potrzeby biznesowe chcieliśmy odpowiedzieć?

• Stworzenie szybkiego i niezawodnego systemu
• Strona, którą zespoły marketingu i biznesu mogą same aktualizować i rozwijać, bez angażowania zespołu technicznego (chcieliśmy, żeby każdy mógł stworzyć na niej, co zechce, bez zmiany kodu)
• Zapewnienie skalowalności
• Zbudowanie środowiska, które da się szeroko konfigurować i które spełni nasze wysokie oczekiwania co do funkcji, UX/UI i całej warstwy wizualnej
• Łatwa integracja z innymi narzędziami, z których zespół biznesowy i handlowy korzysta przy pozyskiwaniu klientów i sprzedaży

Strona 1.1: proces i development

Perspektywa biznesowa

Wdrożenie nowej strony zaplanowaliśmy tak, żeby zbiegło się z dużym zwrotem w naszym modelu biznesowym. Z klasycznego software house’u, który tworzył aplikacje webowe i mobilne, staliśmy się marketplace’em specjalistów IT: podstawiamy ich klientom bezpośrednio, w różnych modelach współpracy.

To postawiło przed nami pewne wyzwania. Musieliśmy od nowa napisać teksty i przebudować strukturę strony pod nowy model. Trzeba ją też było przygotować na szybki rozwój: z kilku landing page’y przeszliśmy od razu do setek, a w planach było ich jeszcze więcej.

Oprócz landing page’y potrzebowaliśmy formularzy do zbierania leadów i innych lead magnetów.

Perspektywa UX/UI

Budowa nowej strony była też idealną okazją, by odświeżyć markę Ideamotive. Zanim zabraliśmy się do projektowania, powstał nowy design system i nowe materiały marki: paleta kolorów, logotyp, kroje pisma i elementy graficzne.

Sporo czasu poświęciliśmy też na analizę konkurencji, poznawanie najlepszych praktyk UX/UI i możliwych rozwiązań, które chcieliśmy wdrożyć.

Przy nowej stronie zespół UX/UI od pierwszego dnia pracował ramię w ramię z zespołem marketingu i komunikacji. Dzięki temu już sam design przekazywał nasz komunikat.

Zespół marketingu przygotowywał specyfikacje stron, których potrzebował: listę podstron, wstępne teksty i sekcje dla każdej z nich, w formie makiet low-fidelity w Miro.

Na tej podstawie zespół UX/UI tworzył unikalne i dopracowane projekty w InVision, które wraz ze specyfikacją techniczną każdego modułu trafiały do zespołu developerskiego.

Perspektywa developerów

Pierwotnie strona powstała w Nunjucks i działała na dotychczasowym serwerze, a potem przenieśliśmy ją do HubSpota. Nie było to dobre rozwiązanie, bo każda zmiana na stronie wymagała sporo pracy zespołu technicznego.

Dlatego postanowiliśmy całkowicie porzucić starą stronę.

Część podstron trzeba było odtworzyć od zera, ale uznaliśmy, że warto. Postawiliśmy sobie nowy główny cel: każdy ma móc swobodnie rozwijać, zmieniać i aktualizować stronę bez dotykania kodu.

HubSpot CMS to narzędzie typu drag-and-drop oparte na modułach.

Ma bibliotekę gotowych modułów, ale od początku było jasne, że zdecydowaną większość z nich musimy zbudować sami, jeśli chcemy zrealizować wszystkie plany.

W trakcie developmentu kodowaliśmy kolejne moduły zaprojektowane przez nasz zespół UX/UI. Każdy moduł dawał się w pewnym zakresie łatwo dostosować.

Użyliśmy narzędzi JavaScriptowych, które pozwoliły nam korzystać z ES6 i bibliotek NPM. Dzięki temu pracowaliśmy tak, jak dziś pracuje się przy większości nowych projektów frontendowych.

Sięgnęliśmy też po Sass: pakiety open source, dzięki którym szybciej tworzyliśmy powtarzalne elementy. Sass to rozszerzenie CSS, które pozwala zagnieżdżać reguły, używać zmiennych, mixinów, dziedziczenia selektorów i nie tylko. Do dobrze sformatowanego, standardowego CSS kompiluje go narzędzie wiersza poleceń albo wtyczka do systemu budowania.

Każdy developer pisał kod lokalnie, na swoim komputerze. Gotowy kod wrzucał na GitLaba, więc zmiany i ich częstotliwość widzieliśmy na bieżąco. Wszystkie moduły i historia zmian są widoczne w GitLabie, co pozwala nam robić code review przed wdrożeniem. Dzięki temu mogliśmy wprowadzić narzędzia, które automatycznie sprawdzają kod.

Przy wdrożeniu nie musieliśmy stawiać nowej strony na serwerze demo. Jednym kliknięciem wrzucaliśmy ją prosto na serwer stagingowy.

Cały proces wyglądał tak:

Etap 1: „Lift & shift”, czyli przeniesienie istniejącej strony w całości na nowy hosting w HubSpocie, bez zmian w technologii i kodzie [1 miesiąc]

Etap 2: Przygotowania i projektowanie. Nasi CEO, CMO i Head of Design przeprowadzili szeroki research stylu graficznego i innych elementów, żeby na nowej stronie pokazać zupełnie nowy komunikat i model biznesowy [4-5 miesięcy]

Etap 3: Eksperymentalna budowa nowej strony od zera na HubSpocie, z naszym własnym pipeline’em. Chcieliśmy sprawdzić, czy takie rozwiązanie spełni nasze oczekiwania i wymagania [4 miesiące]

Etap 4: Produkcja i stały rozwój [w toku]

Perspektywa zarządzania projektem

Do zarządzania projektem wybraliśmy ClickUp, nasze podstawowe narzędzie operacyjne w całej firmie. Dokumentacja developerska powstawała w module wiki w ClickUpie, więc nie potrzebowaliśmy Confluence. Dzięki integracji GitLaba z ClickUpem mieliśmy łatwy dostęp do repozytorium kodu.

W ClickUpie powstawały też wszystkie zgłoszenia. Każdy, kto brał udział w projekcie (designerzy, marketing i biznes), mógł więc łatwo do niego zajrzeć, sprawdzić postępy i przekazać uwagi.

Do code review używaliśmy merge requestów na GitLabie. Pozwalało to dołączać nowy kod do całości, a developerzy mogli sprawdzić, czy wymaga on poprawek.

Perspektywa marketingu i komunikacji

Dla marketingu najważniejszy był system, którym może zarządzać i który może dalej rozwijać każdy członek zespołu komunikacji. Chcieliśmy, by wszystkie treści powstawały bez użycia kodu, a do tego potrzebowaliśmy jednolitości i spójności.

Dzięki modułowemu CMS-owi każdy w zespole marketingu może szybko tworzyć landing page’e do różnych celów: pozyskiwania leadów, rekrutacji, kampanii płatnych i tak dalej.

Przyjazny interfejs i kreator drag-and-drop sprawiają, że cały proces jest przyjemny i nie wymaga żadnego udziału zespołu technicznego.

Content, inbound i SEO to kluczowe elementy naszej strategii marketingowej. Potrzebowaliśmy środowiska pracy, w którym sprawnie powstają treści, w tym:

• Landing page’e przyjazne SEO, poświęcone różnym technologiom tworzenia oprogramowania i pisane pod frazy o wysokiej intencji zakupowej
• Rozbudowane wpisy blogowe (publikowane co najmniej 3 razy w tygodniu)
• Realizacje
• Treści premium: przewodniki i pillar page’e
• Materiały dla kandydatów i specjalistów

Stronę tworzyliśmy z myślą o SEO od samego początku. Musieliśmy przemyśleć rich snippety, obrazy OG i adresy URL oraz ustalić jasny schemat nazewnictwa dla każdego modułu.

Co ważne, zarówno nasz blog, jak i strona trafiły na jedną platformę. Przed wdrożeniem HubSpot CMS nasz blog działał na WordPressie, a strona była osobnym bytem, co utrudniało codzienną pracę.

Równolegle budowaliśmy sieć twórców treści: copywriterów i designerów. Ułożyliśmy skuteczne procesy, dzięki którym produkcję treści łatwo skalować.

Przez kolejne miesiące stale je dopracowywaliśmy i optymalizowaliśmy. Dziś w pełni zaspokajają nasze potrzeby, więc możemy wykorzystać je także na zewnątrz i zaoferować klientom nową mikrousługę: tworzenie treści przyjaznych SEO.

Perspektywa sprzedaży i pozyskiwania klientów

Nasz zespół biznesowy i sprzedażowy już wcześniej korzystał z HubSpota do zarządzania leadami i prospectingu. Dzięki HubSpot CMS łatwo stworzyliśmy jedno zintegrowane środowisko, w którym śledzimy każdą osobę odwiedzającą stronę i widzimy, jak staje się leadem.

HubSpot pozwala nam zachować pełną historię każdego kontaktu. Wiemy, jakie strony ktoś odwiedził przed konwersją (i po niej), więc w sprzedaży możemy do każdego podejść indywidualnie.

Po premierze: testy użyteczności i optymalizacja konwersji (strona 1.2)

Po wydaniu wersji 1.1 od razu przeszliśmy do testów z użytkownikami. 

Wdrożyliśmy Hotjar, żeby zobaczyć, jak użytkownicy korzystają ze strony, i wychwycić wzorce zachowań. 

Przeprowadziliśmy też serię testów A/B najważniejszych elementów serwisu, takich jak strona główna czy formularz kontaktowy.

Na koniec zaprojektowaliśmy jakościowe testy użyteczności. Dobraliśmy grupę testową z osób pasujących do naszej persony (C-level w startupach, założyciele, osoby pracujące w funduszach VC) i przeprowadziliśmy testy przez Zoom. Uczestnicy odpowiadali na nasze pytania i wykonywali zadania, a my nagrywaliśmy, jak poruszają się po stronie, i zbieraliśmy szczegółowy feedback.

Na podstawie zebranych danych mogliśmy przygotować drugą iterację strony.

Poprawiliśmy komunikat, zoptymalizowaliśmy ścieżkę klienta na stronie i pozbyliśmy się zbędnych elementów, które szkodziły konwersji.

Znów wszystkie zespoły ściśle ze sobą współpracowały. Marketing przygotował makiety w Miro, designerzy przełożyli je na projekty high-fidelity w InVision i przekazali zespołowi developerskiemu.

Każdy zespół odegrał swoją rolę.

Rezultat

Mamy teraz jeden zintegrowany system, którym mogą zarządzać różne zespoły: marketing, biznes oraz HR i rekrutacja.

Migracja na HubSpot CMS wyraźnie poprawiła nasze kluczowe wskaźniki:

• Ruch wzrósł o ponad 100% w porównaniu z poprzednim okresem
• Średni czas spędzony na stronie wydłużył się o 33%
• Współczynnik konwersji podwoił się
• Tygodniowa liczba generowanych leadów wzrosła czterokrotnie (!)

Dzięki HubSpot CMS przygotowaliśmy i opublikowaliśmy ponad 200 landing page’y. Stworzyliśmy też nowe, angażujące formy treści i dodaliśmy na stronie elementy do pozyskiwania i pielęgnowania leadów, takie jak własne popupy czy lead magnety.

Rok po premierze jesteśmy bardziej niż kiedykolwiek pewni, że HubSpot CMS był dla nas idealnym wyborem. 

HubSpot CMS pozwala nam szybciej iterować, testować na bieżąco nowe rozwiązania i pomysły marketingowe oraz łatwiej eksperymentować. 

Wyszliśmy z tym także do klientów. Od premiery przeprowadziliśmy kilka udanych wdrożeń HubSpot CMS: pomagaliśmy im stawiać infrastrukturę, tworzyć moduły na miarę i budować integracje. 

Zastanawiasz się, czy HubSpot CMS sprawdzi się w Twojej firmie? Skontaktuj się z nami. 

Nasz doświadczony zespół programistów HubSpot przeanalizuje Twoje wymagania biznesowe i oceni, czy to rozwiązanie odpowiada Twoim potrzebom.

Porozmawiajmy!