Case Studies

Projekt graficzny strony internetowej dla produktu SaaS – HCM Deck

Strona główna produktu SaaS jest niezwykle istotna, bo to na niej często użytkownik podejmuje decyzję zakupową. Jak zaprezentować wartość, jaką daje HCM Deck swoim klientom w jasny i czytelny sposób? Jak najlepiej pokazać “duszę” HCM Deck? Jakich informacji poszukuje grupa docelowa? Jak wyróżnić się na rynku alternatywnych rozwiązań? …czyli w skrócie: jak zbudować stronę, która zaprezentuje rozwiązanie HCM Deck i będzie wsparciem w procesie sprzedaży? Na te pytania odpowiadamy w poniższym case study – poznaj proces tworzenia projektu graficznego strony internetowej dla produktu SaaS firmy HCM Deck.

Klient
HCM Deck - SaaS
Cel
redesign w celu zwiększenia konwersji
Okres współpracy
grudzień 2019 - luty 2020
Liczba sprintów
6
Liczba osób w projekcie
2

Kontekst projektu

Końcem roku 2019 odezwał się do nas zespół HCM Deck w sprawie projektu graficznego strony internetowej ich produktu – platformy sprzedawanej w modelu Software as a Service. Platforma służy przede wszystkim do wspierania rozwoju pracownika i zarządzania procesami HR-owymi

W ramach współpracy naszymi zadaniami było:

  • odświeżenie wizerunku strony HCM Deck w zgodzie z linią kreatywną innych materiałów,
  •  odzwierciedlenie potrzeb użytkowników na stronie, aby wesprzeć proces sprzedaży, 
  • …i zbudowanie wyróżniającego się doświadczenia użytkowników, by ich pierwszą reakcją było „tego musimy spróbować!”

A dodatkowo sprawić, by strona nie była tylko witryną, a elementem całego doświadczenia, jakie dostają od HCM Deck przyszli i obecni użytkownicy.

Sprint 1: Define, czyli gdzie jesteśmy i gdzie leży nasze wyzwanie

Warsztat startowy

Każdy projekt graficzny strony internetowej zaczynamy od warsztatu, żeby zdiagnozować problemy, potrzeby i wyzwania, ustalić ważne dla zespołu wartości oraz zaplanować dalsze działania.  Podczas warsztatów korzystamy z kilku znanych i sprawdzonych narzędzi oraz autorskich modyfikacji i rozwiązań, takich jak… Team canvas, czy Lean Canvas. Brał w nich udział cały zespół HCM Deck odpowiedzialny za tworzenie strony internetowej oraz osoby zaangażowane w projekt po naszej stronie. 

Team Canvas wykorzystaliśmy do ustalenia celów indywidualnych i grupowych, poznania się oraz po to, aby określić wspólne rutyny i ważne cykliczne działania dla projektu. Ustaliliśmy m.in

Cel główny:

  • zwiększenie konwersji strony
  • stworzenie strony z dostosowanym nowym komunikatem Firmy

Cele dodatkowe:

  • zwiększenie konwersji witryny internetowej
  • dostosowanie komunikacji strony do aktualnego Product Guide’a 
  • zwrócenie uwagi klientów korporacyjnych (zatrudniających 1000+ pracowników)

Lean Canvas służył z kolei do strukturyzowania wiedzy o biznesie HCM Deck. Poruszyliśmy temat o aktualnej grupie docelowej oraz jej specyfice. Skupiliśmy się na konkurentach małych i dużych. Porozmawialiśmy o kanałach dotarcia, a w szczególności formie marketingu wykorzystywanego do promocji i pozyskania klienta. Co najważniejsze zrozumieliśmy, jak realnie HCM Deck rozwiązuje problemy w organizacji. 🙂

Analiza danych zastanych

Po warsztacie kick-offowym zaczynamy pracę od analizy obecnych klientów. Na pierwszy ogień poszła analiza ich stron www, w celu znalezienia wzorców znajomych dla danej grupy docelowej.

Klienci

Rozpoczęliśmy analizę od sprawdzenia stron klientów firmy. Okazało się, że segment, który najbardziej interesuje HCM Deck ma podobne wzorce.

Klienci z segmentu enterprise (korporacyjni) mieli strony o podobnej budowie. Bazowali na dużych obrazach, prostych, nieskomplikowanych stronach z jasnym CTA (głównym wezwaniem do działania na stronie).

  • Każda ze stron jest niezwykle prosta i bazuje na zdjęciach.
  • Co więcej, nawet schemat ich stron jest stosunkowo podobny, pierwsza sekcja CTA, następna podział na usługi 3 lub 4 kolumnowy.

Teraz także możesz skorzystać z Business Canvas i 30+ innych szablonów i narzędzi w swojej firmie. Za darmo

Dołącz do naszego newslettera i zyskaj dostęp do Biblioteczki Narzędzi Lean!



    Zgadzam się na przetwarzanie moich danych osobowych przez Project: People Sp. z o.o. w celu komunikacji marketingowej, a tym samym wysyłania mi newslettera, informacji o usługach, promocjach lub nowościach zgodnie z Polityką prywatności

    Konkurencja

    Następnie postanowiliśmy przeanalizować strony konkurencji HCM Deck, zwłaszcza tych dużych graczy, czyli narzędzia oferowane przez korporacyjnych gigantów. 

    • Strony dużej konkurencji są zbudowane na nieco modniejszych i bardziej atrakcyjnych trendach. 
    • Komunikat rozwiązań korporacyjnych to przede wszystkim “zmiana” i digitalizacja. 
    • Większość enterprisowych rozwiązań komunikuje się językiem “Jobs to be done”, główne CTA to rozmowa 1:1.
    • Każdy z dużych graczy ma use case, stories na stronie głównej, by lepiej zobrazować, do czego może przydać się narzędzie.

    Analiza raportów i danych z sieci

    W związku z tym, że nadrzędnym celem nowej strony jest konwersja, postanowiliśmy poszukać raportów branżowych dotyczących SaaS, aby wyeksplorować temat dodatkowo. Bazując na różnych źródła, artykułach blogowych i publikacjach, dowiedzieliśmy się z niego m.in., że kluczowe jest ograniczenie elementów w menu. Warto postawić na ciągle widoczne oraz interaktywne CTA, zmieniające się w stosunku do strony. Te informacje jedynie utwierdziły nas w hipotezach, które mieliśmy, natomiast szokująca daną był fakt, że blisko 73% stron dobrze konwertujących z segmentu enterprise, wykorzystywało zdjęcia ludzi.

    Na podstawie researchu dokonaliśmy następujących decyzji:

    • Odejście od ilustracji (częściowo) i dodanie koniecznie “twarzy” ludzi.
    • Dodanie żywych kolorów, aktualnie strona jest dość monotonna kolorystycznie.
    • Wprowadzenie interaktywnego i dynamicznego CTA dopasowującego się do sytuacji.

    Moodboard

    Na podstawie analizy stron konkurencji, klientów i raportów, stworzyliśmy moodboard, czyli przykłady kierunków, które byłyby adekwatne do powziętych decyzji. Dobrym przykładem były dla nas serwisy typu Typeform, Mailchimp, Grammarly czy Uber.

    Sprint 2: Wywiady z zespołem

    Celem drugiego sprintu było dostarczenie architektury informacji nowej witryny. Wypunktowaliśmy sobie szereg rzeczy do wykonania, aby dostarczyć oczekiwany rezultat:

    • Przeanalizowanie struktury strony internetowej.
    • Analiza Hotjara i Google Analytics.
    • Wywiady z działem UXowym, gdzie chcieliśmy poznać ścieżkę użytkownika w aplikacji.
    • Pogłębione wywiady wewnątrz organizacji, zwłaszcza z Growth Team i Customer Success.
    • Analiza wdrożeń HCM Decka.

    Warto tutaj podkreślić, że sprint drugi opierał się więc w głównej mierze na wywiadach z różnymi członkami zespołów oraz na uzupełnieniu danych analitycznych. 

    Google Analytics & Hotjar

    Na podstawie Google Analytics udało nam się doprecyzować grupę odbiorców.

    • Są to osoby pracujące w korporacji, głównie kobiety. 
    • Najczęstsza rozdzielczość to 1366×768 px, wskazuje to na typowo korporacyjne urządzenia.
    • Ich aktywność była głównie w godzinach pracy, czyli pomiędzy 9 a 17. 
    • Ruch mobilny był stosunkowo niski. 

    Oczywiście poprzednia wersja strony nie była dostosowana do ruchu mobilnego, nie odbywały się żadne aktywne kampanie kierujące na mobile. Pokazuje to jednak bardzo mocno wartości bazowe, na podstawie których musimy tworzyć ekrany. W późniejszych fazach przełożyło się to bezpośrednio na budowę siatki strony internetowej.

    Ciekawe wnioski udało nam się odkryć obserwując użytkowników poprzez narzędzie HotJar. Jest to narzędzie umożliwiające podejrzenia sesji użytkownika i jego interakcji na stronie. Na tej podstawie znaleźliśmy kilka błędów, których chcielibyśmy uniknąć.

    • W grupie odbiorczej ilustracja w topie zajmuje 90% ekranu “above the fold” (ATF), użytkownicy natychmiast scrollują, chowając przy tym CTA. Użytkownik po otworzeniu strony nie dostawał podstawowych informacji, gdzie jest i czym jest podstrona, na której się znajduje.
    • Notorycznie główne Call to Action znajdowało się poniżej pierwszego widoku po otworzeniu strony internetowej.
    • Informacja o ciasteczka zasłania CTA – z Analyticsa dowiedzieliśmy się, że jedynie 25% użytkowników zamyka ten komunikat. Oznacza to, że użytkownik nie widział głównego CTA.
    • Na podstronie produktowej opisującej funkcjonalność, użytkownicy nie widzieli wnętrza platformy i klikali “Wypróbuj narzędzie”, aby zobaczyć jak ono wygląda.
    • Jedną z najczęściej oglądanych sekcji było zdjęcie klientów z testimonialsami. Potwierdza to wystosowaną przez nas tezę, że warto postawić na zdjęcia w komunikacji.

    Wywiady z zespołem

    HCM Deck to firma zatrudniająca około 55 specjalistów w różnej formie. Jest to już na tyle skomplikowana struktura, że w obrębie firmy występują osobno funkcjonujące jednostki, które pracują nad konkretnymi elementami. Najważniejsze z nich:

    • Dział Produktu odpowiadający za rozwój platformy HCM Deck  
    • Dział Customer Success odpowiadający za obsługę aktualnych klientów
    • Dział Marketingu, z którym bezpośrednio współpracowaliśmy przy budowie strony internetowej 
    • Dział Growth odpowiadający za pozyskiwanie klientów 

    Zrozumienie działania poszczególnych działów było kluczowe ze względu na to, że strona internetowa ma wspierać działania każdego działu, w mniejszej lub większej istocie. W pierwszej kolejności chcieliśmy ustalić więc jakie są stosunki pomiędzy poszczególnymi działami i jak wygląda przepływ informacji czy ścieżka obsługi klienta. 

    W kolejnym kroku kontaktowaliśmy się z każdym z działów i staraliśmy się zrozumieć i wyciągnąć maksymalną liczbę informacji. W ten sposób dzięki bardzo skrupulatnym badaniom z Działu Produktu mieliśmy dostęp:

    • ogólnego profilu klienta, 
    • kolejna osoba udostępniła nam Product Guide firmowy, w którym spisała wszystkie elementy dotyczące komunikacji firmy, 
    • Product Owner pokazał całościowy pogląd na produkt i jego perspektywę klientów.

    Customer Success: 

    • przeprowadził nas przez kompletny schemat wdrożenia nowego projektu graficznego strony internetowej oraz podzielił się insightami z pracy,
    • przedstawił nam duży wyróżnik firmy, jakim jest stosunkowo szybkie wdrożenie klientów korporacyjnych.

    Z Działem Growth: 

    • ustaliliśmy jak wykorzystują stronę w codziennej pracy oraz co może być przydatne z ich perspektywy, 
    • poznaliśmy zarys procesu sprzedażowego i na bazie naszych notatek staraliśmy się go wykorzystać. 

    Najczęściej kontakt mieliśmy jednak z Działem Marketingu. Wynikało to z faktu, że koordynowali cały projekt. To z nimi przeanalizowaliśmy mocno sprecyzowany lejek marketingowy. 

    Aktualne user flow vs nowe user flow

    Wynikiem drugiego sprintu miała być kompletna architektura i przepływ informacji. Sprawdziliśmy więc jak wyglądało poprzednia struktura strony

    Widać tu prosty schemat: struktura strony była bardzo płaska. Poszczególne podstrony nie posiadały przekierowania na inne usługi. Odzwierciedlało to dane z Analyticsa, które mówiły, że pojedynczy użytkownik rzadko kiedy przechodził na osobną podstronę.

    Nowa struktura zaproponowana dla serwisu miała być odzwierciedleniem wszystkiego, co dowiedzieliśmy się do tej pory. Oparta została o metodologię “Job to be done”, gdzie produkty zostały podzielone w poszczególne kategorie według zadania, które realizuje (Learning, Communicate, Feedback, czyli odpowiednio nauka, komunikacja, informacja zwrotna). Dodatkowo dodana została zakładka “rozwiązania”, której zadaniem jest prezentowanie konkretnych use caseów, a więc sposobów zastosowania poszczególnych produktów w organizacji.

    W ten oto sposób mogliśmy przejść do 3 i 4 sprintu.

    Sprint 3 & 4: Makietowanie

    W momencie kiedy mieliśmy już zebraną wystarczająca liczbę informacji, mogliśmy przystąpić do fazy makietowania. Głównym celem tej fazy było strukturyzowanie widoków na stronie i uzupełnienie ich w treści. Nie skupiamy się tutaj jednak na designie. 

    Faza ta jest kluczowa ponieważ:

    • Odpowiednie odwzorowanie przestrzeni i treści na makietach pozwala sprawdzić, jak użytkownicy będą ją interpretować.
    • Pozwala zaplanować przestrzeń pod etap tworzenia tekstów.
    • Pozwala porządkować kluczowe informacje.
    • Uwypukla braki.
    • Pokazuje elementy klikane i interaktywne dla użytkownika. 

    Zaczęliśmy od tworzenia stron produktowych bazując na informacjach zebranych w Product Guide. Po zatwierdzeniu pierwszych podstron równolegle odbywał się etap pisania tekstów. Następnie teksty te nanieśliśmy na makiety. 

    Większe wyzwanie stanowiły podstrony use case’owe, na których mieliśmy wypracować dopiero treść i strukturę. W zależności od kontekstu spotykaliśmy się na małych warsztatach, gdzie przez kilka godzin, razem z poszczególnymi działami firmy pracowaliśmy nad strukturą strony internetowej. W ten sposób z działem produktowym omawialiśmy np. aspekt onboardingu, z działem marketingu strony poświęcone webinarom czy e-bookom, a z Customer Success podstronę dedykowaną ich usługom.

    Łącznie stworzyliśmy  ponad 50 ekranów. Etap ten jest bardzo ważny, ponieważ pozwala realnie zastanowić się nad tym, co ma się znaleźć na stronie oraz wyeliminować etap poprawek związany z redystrybucją treści, kiedy projektujemy od razu Design. Dodatkowo każdy zespół miał własną iterację, gdzie weryfikowaliśmy ich potrzeby.

    Na makietach dodatkowo zastosowaliśmy już rozkład treści, jaki docelowo znalazł się podczas wdrożenia. Dzięki temu mieliśmy faktyczną informację zwrotną, jak prezentuje się treść u docelowych użytkowników.

    Po skończeniu makiet mogliśmy przystąpić do ostatnich dwóch sprintów.

    Sprint 5 & 6: Design

    Ostatnia część naszych usług to oczywiście Design. Bazując na decyzjach z poprzednich etapów mieliśmy dostarczyć nowoczesny wygląd strony internetowej. Bazowaliśmy na moodboardzie stworzonym w Sprincie 1. Przystąpiliśmy do ustalania stylu, w którym rozwijany był projekt graficzny strony internetowej. Na tym skupiał się pierwszy sprint. 

    Styl graficzny był w miarę oczywisty i szybko znaleźliśmy wspólny kierunek. Największa dyskusja była na temat szczegółów i detali, które kształtują cały charakter finalnego projektu. W ramach pierwszej wersji wypracowaliśmy kilka wersji:

    Akceptacja odbyła się podczas spotkania, gdzie na żywo dokonywaliśmy zmian i podejmowaliśmy decyzję o końcowym kształcie. Finalny projekt został zatwierdzony z działem marketingu, osobami z zarządu oraz projektantami HCM Deck. Oczywiście w trakcie projektowania kolejnych podstron design uległ drobnym modyfikacjom.

    W kolejnych etapach przystąpiliśmy do projektowania pozostałych produktów i stron HCM Deck. Wraz z działem marketingu dobraliśmy kolory per konkretne kategorie, aby użytkownik łatwiej odnajdywał się w skomplikowanej strukturze projektu. Wszystko dobrane było jednak w podobnej tonacji.

    Po skończeniu widoków desktopowych oczywiście opracowaliśmy zasady funkcjonowania mobile:

    Styleguide

    Skomplikowana struktura spowodowała stworzenie zasad wdrożeniowych w formule Styleguide. Jest to plik który znacznie ułatwia i uwydatnia wdrożenie zgodnie z projektem.

    W pierwszej kolejności określiliśmy odstępy pomiędzy elementami i kolory zastosowane w projekcie:

    Spisaliśmy również zasady funkcjonowania najbardziej typowych form, które występują w projekcie.
    Istotnym elementem było uwzględnienie również różnych stanów przycisków i inputów oraz wszelkich interakcji w owym dokumencie.
    Przewidzieliśmy również działanie formularza, błędów w nim, a także uwzględniliśmy, jak zachowywać mają się elementy po najechaniu.

    Wdrożenie

    Tak przygotowane pliki przekazaliśmy do wdrożenia podczas spotkania z programistami. Omówiliśmy zasady wdrażania oraz formy współpracy. Wykorzystywaliśmy tutaj Zeplina. 1-2 razy dziennie w początkowym etapie mieliśmy szybkie statusy czy konsultacje, co sprawnie pozwalało wdrażać elementy. 

    Rezultat możecie zobaczyć pod linkiem: https://hcmdeck.com

    Podsumowanie naszej pracy – w liczbach i nie tylko

    55

    Niezależnych ekranów

    6

    Sprintów

    7

    Osobowy zespół razem z klientem

    Aktualnie strona jest w ciągłym wdrożeniu, za jakiś czas opublikujemy dodatkowe statystyki związane z ruchem na stronie. Na tę chwilę w 6 tygodni udało nam się stworzyć stronę reprezentującą światowy poziom pod względem designu. Jak przełoży się to na biznes? Dowiemy się w najbliższych 6-9 miesięcy :). Po tym czasie postaramy się zaktualizować case study o bardziej kompleksowe dane.

    A tak współpracę z nami ocenił klient:

    Project: People wykazało duże zaangażowanie w zlecony projekt redesignu strony. Jako firma oferują bardzo świeże podejście do zarządzania projektami, szczególny nacisk kładąc na dokładne poznanie i zrozumienie potrzeb i celów klienta. Bardzo miło wspominamy współpracę z Tomkiem Osowskim  – jego wsparcie, profesjonalne podejście i wiedza, jaką dysponuje o designie i aktualnych trendach, zasługuje na uznanie. Jesteśmy zadowoleni ze współpracy.

    Magdalena Wermińska, Head of Marketing, HCM Deck

    Narzędzia wykorzystane w projekcie

    Case study to za mało?

    Chcesz poznać cały proces i dowiedzieć się, jak mógłby wyglądać w Twojej organizacji?

    Umów się na bezpłatną konsultację

    Zespół projektowy, czyli kto za co odpowiadał

    Autor Case Study

    Tomasz Osowski Lean UX & Service Designer w Project: People
    Pomaga firmom stworzyć doskonałe doświadczenie użytkownika zapewniając jednocześnie odpowiednią rentowność biznesu. Jego zdanie to stworzyć produkt i usługi, które są potrzebne i przynoszą satysfakcję zarówno odbiorcom jak i właścicielom biznesu.Certyfikowany Trener Biznesu i rozwoju osobistego, Certyfikowany moderator Design Thinking. Przedsiębiorca od 6 lat szczerze zakochany w metodologii Lean. Zawsze stara się dostarczyć produkt jak najszybciej na rynek przy najmniejszym udziale kapitałowym.Współpracował z firmami: T-mobile, Ecard, inPost, ING, Nationale Nederlanden, Brainly, Publicis, Netguru. Organizator DesignWays Conf.