Case Studies

Jedna firma, wiele marek – redesign strony internetowej heron.holding

Profesjonalna strona internetowa jest prawdziwą wizytówką firmy. Ponadto jest też niejednokrotnie trzonem jej działalności – wspiera sprzedaż, pomaga w pozyskiwaniu nowych klientów, przekazuje niezbędne informacje o marce. To jak zbudowana jest strona, jak wygląda, jaką ma dokładna zawartość – to wszystko elementy ważne, by mogła spełniać swoje zadanie. Przeczytaj o tym, jak w Project: People pracujemy nad redesignem stron internetowych oraz o tym jak sub-marki firmy heron. zostały przez nas ustrukturyzowane.

Klient
Heron Holding
Cel
Stworzenie nowej strony internetowej dla marki głównej i submarek wraz z copywritingiem oraz przygotowanie nowego brandingu
Okres współpracy
2019/2020
Liczba osób w projekcie
3
Liczba sprintów
6

Kontekst projektu

Z Heron Holding rozmowy rozpoczęliśmy w listopadzie 2019. Początkowym zamiarem właścicieli było przygotowanie nowego brandingu dla marki, redesign strony internetowej oraz przygotowanie pozostałych podstron na podstawie wszystkich aktualnie (lub też planowanych w przyszłości) gałęzi marki Heron. Podjęliśmy to wyzwanie! 🙂

Sprint 1: Warsztaty Kick-off & Research

Warsztat Kick-off

Nasz proces zazwyczaj rozpoczynamy od warsztatu kick-offowego. (więcej o naszych warsztatach kick-off możesz dowiedzieć się tutaj). Tym razem naszym  pierwszym zadaniem było zapoznanie się z aktualną stroną internetową, materiałami dostarczonymi przez klienta oraz wstępną analizą dostępnych danych. Kolejnym etapem była organizacja i przeprowadzenie warsztatu, w którym uczestniczyli członkowie zarządu firmy Heron oraz członkowie naszego zespołu. Ponadto na spotkanie zaprosiliśmy Kamila Kozieł ze studia graficznego Maise. W tym projekcie odpowiedzialny był za przygotowanie nowego brandingu – w oparciu o niego naszym celem było stworzenie designu dla strony internetowej.

Podczas organizacji takiego warsztatu zawsze określamy cele, które chcemy osiągnąć – nie tylko my, ale również nasz klient. Zależało nam więc na poznaniu celu biznesowego nowej witryny. Dodatkowo ważnym aspektem dla nas były oczekiwania właścicieli, co do projektu i naszej współpracy. Dzięki poznaniu budowy firmy, możemy lepiej zrozumieć sposób jej funkcjonowania, by móc wesprzeć właścicieli w procesie strukturyzacji całej marki oraz wszystkich usług.

Podczas warsztatu udało nam się ustrukturyzować wszystkie aktualnie oferowane oraz planowane w najbliższej przyszłości usługi do poszczególnych submarek.

30+ narzędzi i szablonów do pracy nad strategią Twojej firmy…

… czeka na Ciebie w naszej Biblioteczce Narzędzi Lean. Zyskaj do niej dostęp już teraz:



    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

    Od teraz pod szyldem firmy heron. znajdziemy pięć brandów:

    •  heron.custom,
    •  heron.steel,
    •  heron.cube,
    •  heron.smart,
    •  heron.harmony.

    Ponadto wstępnie określiliśmy też styl graficzny, w którego kierunku chce podążać marka. Było to punkt wyjścia dla Kamila podczas projektowania nowego brandingu.

    Po zakończonym warsztacie przygotowany został specjalny dokument, który prezentował całość projektu. Zawierał rzeczy, które wypracowaliśmy do tej pory oraz plany na kolejne sprinty.

    Research

    Następnym krokiem było przejście do fazy researchu. W tym etapie skupiliśmy się na skrupulatnej analizie konkurencji pod kątem stron internetowych i brandingu. Podczas pracy z klientem zmapowaliśmy gdzie w lejku sprzedażowym pojawia się ich strona internetowa. Głównym zadaniem jej zadaniem okazało się potwierdzenie wiarygodności marki już w momencie, gdy dana firma otrzymała ofertę firmy heron. i odwiedza stronę, aby dowiedzieć się więcej na jej temat. Było to istotne, ponieważ Heron praktykuje głównie sprzedaż poprzez własną sieć kontaktów oraz aktywny udział w targach i konferencjach branżowych, a sama strona powinna być przede wszystkim schludną i przejrzystą wizytówką firmy. Analizę konkurencji przeprowadziliśmy oddzielnie dla każdej określonej przez z nas submarki. Pozwoliło to nam w dość szczegółowy sposób zapoznać się z każdą branżą, w której Heron oferuje (bądź zamierza oferować) swoje usługi. Dodatkowo udało nam się dokładniej określić te elementy, które muszą znaleźć się na stronie, aby była ona wystarczająco wiarygodna i przedstawiała niezbędne informacje.

    Finalnym etapem w tym sprincie było przygotowanie moodboardu. Podczas warsztatu, wypracowaliśmy jedynie kierunek, natomiast teraz musieliśmy przełożyć to na konkretny styl, który będzie pasował do grupy docelowej oraz taki, który będzie równocześnie odpowiadał właścicielom. Ważne, by również odpowiednio korespondował z całkowicie nowym brandingiem.

    Sprint Drugi: UX Research & Architektura informacji

    Ze względu na fakt, że Heron dzieli się na kilka różnorodnych, choć komplementarnych marek, każda z nich posiada odrębną grupę docelową. Grupy te zostały przez nas zmapowane z zespołem heron. na podstawie danych o dotychczasowych klientach. Informację ich temat uzupełniliśmy o wnioski z naszego desk researchu.

    W tym momencie posiadaliśmy już wystarczająco dużo informacji, co pozwoliło nam na przygotowanie wstępnej architektury informacji. Aby zadbać o prawidłową strukturyzację danych, pierwszą stroną, którą wzięliśmy na warsztat, była strona główna całej marki. Jej zawartość miała skupiać się przede wszystkim na tym, aby zaprezentować herona. jako “one stop company”, czyli firmę, która jest w stanie zapewnić komplementarne usługi, dzięki czemu jest w stanie zagospodarować wszystkie niezbędne dla klientów aspekty związane z prowadzoną przez nich działalnością.

    Zanim przeszliśmy do pozostałych submarek, przygotowaną architekturę konsultowaliśmy z zespołem heron., aby potwierdzić czy sugerowana przez nas zawartość pokrywa się z ich oczekiwaniami. Po wprowadzeniu kilku otrzymanych uwag rozpoczęliśmy pracę nad architekturą dla heron.custom, czyli marki, która na ten moment stanowi trzon działalności firmy Heron. Miała ona też być punktem wyjścia dla pozostałych. Jednym z naszych celów podczas jej projektowania było zachowanie spójności między zawartością dla wszystkich stron, które miały opierać się na tych samych sekcjach z drobnymi modyfikacjami. W późniejszym etapie miało to wpłynąć pozytywnie na pracę deweloperów, przy wdrażaniu kolejnych stron.

    Finalnym efektem tego sprintu była rozbudowana, ale przede wszystkim spójna architektura informacji dla całej marki. W przygotowanym przez nas arkuszu, każda strona została rozbita na poszczególne sekcje, które muszą się na niej pojawić. Ponadto wszystko uzupełniliśmy o krótki opis, co dokładnie powinno się znaleźć w każdej z nich wraz z wytłumaczeniem.

    Sprint Trzeci: UX Design

    Kolejny sprint w całości przeznaczyliśmy na projekt makiet. W Project: People bardzo zależy nam na tym, aby doświadczenie użytkownika było jak najbardziej naturalne, dlatego już na etapie tworzenia makiet staramy się projektować je w ten sposób, aby wyglądały zdecydowanie bardziej, jak finalny projekt, aniżeli tylko szkic zawartości. Makiety hi-fi, dają pozytywny efekt podczas prezentacji naszej pracy, co wpływa na – odczucia użytkowników związane z redesignem strony internetowej.

    W oparciu o zaprojektowaną architekturę informacji oraz wskazane przez klienta designy z moodboardu powstała wstępna makieta strony głównej. Dzięki dostarczonym przez klienta materiałom mogliśmy uzupełnić ją również o zdjęcia, które pochodziły bezpośrednio z realizacji herona., co również miało wpływ na sposób postrzegania przygotowywanego przez nas redesignu.

    Sprinty Cztery i Pięć: UI Design i nadzorowanie wdrożenia

    Rozpoczynając ostatnią część projektu mogliśmy w pełni skupić się na przygotowaniu finalnego redesignu strony internetowej na możliwie najwyższym poziomie. Makiety hi-fi, rozbudowana architektura informacji oraz materiały dostarczone przez klienta, były wszystkim co niezbędne, aby przenieść naszą dotychczasową pracę na widoczne efekty.

    Wyjątkowo w tym projekcie użyliśmy do projektowania nowego narzędzia – Figmy. Jest to narzędzie do projektowania interfejsów użytkownika, które ze względu na swoją specyfikę pozwala pracować w szybszy i bardziej uporządkowany sposób.

    Dlaczego Figma?

    • Dostęp z każdej platformy niezależnie od systemu operacyjnego.
    • Możliwość korzystania w przeglądarce.
    • Praca “live” – wszystkie zmiany w pliku są widoczne na żywo, co daje wiele możliwości, podczas gdy w projekcie znajdzie się więcej, niż jeden designer.
    • Przyjemny system udostępniania i komentowania, dzięki czemu dawanie feedbacku staje się jeszcze prostsze, bo nie wymaga poznawania kolejnego narzędzia.
    • Pluginy – dość świeży feature, ale już na ten moment ich biblioteka jest naprawdę pokaźna.
    • Jest dostępna za darmo!

    Po zaprojektowaniu i doszlifowaniu designu strony głównej oraz podstron dla marek heron.steel oraz heron.custom zajęliśmy się przygotowaniem wersji mobilnej. I w tym wypadku również naszą pracę wsparła Figma i jej aplikacja mobilna, która na żywo pokazywała zmiany w wybranym przez nas artboardzie (czyli przestrzeni w programie, na której aktualnie pracujemy).

    W tym momencie mogliśmy już przekazać przygotowane przez nas materiały do developerów, by mogli rozpocząć implementację designu. Dbając o to, by nasz projekt był wdrożony tak, jak to zaplanowaliśmy, odbyliśmy kilka rozmów, aby możliwie najlepiej przystosować projekt do wymogów klienta, ale także do mocno ograniczonego czasu na wdrożenia. Po drobnych zmianach w zawartości i ustaleniu odpowiednich rozwiązań, projekt mógł przejść do fazy kodowania. Dalej pozostawaliśmy w stałym kontakcie z deweloperami i klientem, aby móc w razie potrzeby zareagować i wesprzeć projekt, jeśli zaistniałaby taka potrzeba.

    Dodatkowe Sprinty: Branding i copywriting

    Poza standardowymi sprintami naszego procesu redesignu strony internetowej tym razem w projekcie znalazło się miejsce na 3 dodatkowe sprinty. Dwa pierwsze odbyły się chwilę po rozpoczęciu współpracy. To wtedy, Kamil wypracował nowe logo dla marki oraz submarek heron., a ponadto stworzył cały brandbook. Dzięki temu tworząc design mieliśmy bardzo solidne fundamenty.

    Ponadto aby podnieść wiarygodność strony i jej zawartości, właściciele firmy Heron zdecydowali się na dodatkowy sprint, podczas, którego Katarzyna Golonka zajęła się przygotowaniem treści dla marki głównej oraz dla heron.custom oraz heron.steel. Powstały one w oparciu o dotychczasową zawartość strony oraz ofertę współpracy, która była wykorzystywana podczas kontaktu z potencjalnymi klientami, a także wywiady z osobami związanymi z marką.

    Podsumowanie naszej pracy w liczbach i nie tylko

    Wielu osobom wydaje się, że do przygotowania redesignu strony internetowej wystarczy prosty szablon WordPress, a nagle cały proces staje się dużo krótszy i przede wszystkim tańszy. Prawda jest jednak taka, że chcąc mieć stroną internetową, która jest dobrze dopasowana do potrzeb naszych klientów, nie można wybierać ścieżki na skróty.

    Dobre strony internetowe są niepowtarzalne i powstają w wyniku dłuższego i bardziej skomplikowanego procesu, niż wykorzystanie i dostosowanie gotowego szablonu.

    Co dalej z marką? Na ten moment programiści pracują, aby wprowadzić ostatnie funkcjonalności niezbędne dla klienta. W przyszłości strona będzie rozwijana o kolejne submarki, natomiast już teraz zapraszamy do obejrzenia wdrożenia, przygotowanego przez deweloperów z Kotorys Media.

    5

    Zmapowanych sub-marek

    15

    Przeanalizowanych stron innych firm z branży

    60

    Opisanych elementów architektury informacji

    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

    Paweł Nawara Product Designer w Project: People
    Od najmłodszych lat związany z szeroko pojętym designem. Pracował przy projektach graficznych różnego typu (strony WWW, aplikacje mobilne, social media, DTP). Od dwóch lat najlepiej odnajduje się w Lean UX & UI Design.

    Pracuje przy innowacyjnych projektach rozwiązując często złożone problemy. Jest na każdym etapie procesu. Od wstępnego pomysłu i rozmów z klientem, przez cały proces projektowania, aż do współpracy z deweloperami przy finalnym wdrożeniu produktu.

    Mocno zaangażowany w różnego typu działania społeczne i organizację wydarzeń (Juwenalia UEK, DesignWays Conf). Aktywny członek organizacji studenckiej - NZS UEK, gdzie pomaga rozwijać się młodym i nastawionym na rozwój studentom poprzez mentoring czy szkolenia.

    Pozostali członkowie zespołu

    Katarzyna Golonka Lean Marketing Consultant
    W biznesie od pięciu lat, podczas których zarządzała kilkunastoosobowym zespołem, kreowała cykle wydarzeń biznesowych, współtworzyła firmę i nią kierowała. Obecnie specjalizuje się w Content Marketingu oraz Personal Brandingu.

    Pomaga firmom w odnalezieniu własnego “ja” w biznesie i komunikacji tego na zewnątrz (strategia marketingowa & biznesowa).

    Zaangażowana w liczne działania społecznościowe. Jest certyfikowanym Trenerem Biznesu. Prowadzi warsztaty z pogranicza strategii & marketingu. Autorka tekstów dla portali branżowych, m.in. Nowy Marketing, Marketing w Praktyce, E-commerce & Digital Marketing.
    Joanna Ostafin Co-founder & Lean UX Strategist
    Współzałożycielka Project: People, współtwórczyni Krakowskiej Inicjatywy Designerskiej (KID), organizatorka DesignWays Conf.

    Jako Lean UX Strategist na co dzień zajmuje się... niezgadzaniem się ze swoimi klientami - wspiera ich w zakresie weryfikowania pomysłów na nowe produkty, usługi czy biznesy. Pomaga przejść od “innowacyjnego pomysłu” do “realnego produktu”, walidując założenia w oparciu o swoje kompetencje biznesowe, strategiczne, UX, UI, Service Design oraz Lean.

    Szczerze zakochana w podejściu Lean (Lean Startup & Lean UX & Lean UX Research). Wierzy w warsztaty i kolektywne budowanie projektów, rozwiązywanie problemów czy generowanie pomysłów.