Codibly jest krakowską firmą z branży IT. Dla klientów z różnych branż (np. insurance, healthcare) tworzy dedykowane usługi software’owe, a największą wiedzę ekspercką oraz doświadczenie projektowe posiada w branży energy & utilities.
Dotychczasowa strona internetowa została wykonana na szablonie o bardzo niskich współczynnikach technicznych jak : optymalizacja, stan indeksowania w Google, czy performance (prędkość i budowa kodu html). Dodatkowym problemem był bardzo nie przyjaźnie wdrożony system CMS Wordpress sprawiający problemy w administracji stroną.
Podstawowym założeniem dla realizacji nowej strony było :
Postawione przed nami zadanie było proste : zbudować stronę od podstaw w opaciu o dane z obecnej strony, analizy i rozmowy z zespołem Codibly (poznaniem problemów i potrzeb).
Zwiększenie konwrsji strony, poprawa doświadczeń użytkownika.
Wykonanie researchu SEO i analiza stron z TOP10 Google.
Analizia konkurencji pod kątem budowy oferty i przyjętej stylistyki.
Opracowanie architektury informacji i nowej oferty.
Pytania o wiedzę
Aby móc zadawać pytania należy przynajmniej mniej więcej wiedzieć o co pytać. Dlatego udaliśmy się do lektury obecnej strony Codibly i stron z branży by jak najwięcej dowiedzieć się o tematyce energy&utilities. To pozwoliło zaproponować nam :
Mapy ciepła i Google Analitycs
Obecna strona podczas audytu i po analizach mapami ciepła (hotjar.com oraz mouseflow.com) oraz przepływu użytkownika w Google Analitycs nie wykorzystywała swojego potencjału. Większość użytkowników :
Aby osiągnąć cel pracowaliśmy nad budową nowej i analizą obecnej oferty oraz usług wraz z zespołem Codibly w formie zdalnych hanogutów. W ciągu kilku iteracji pytań i odpowiedzi oraz konsolidowania danych wypracowana została nowa struktura strony i reorganizacja oferty podstron industry i services.
Na podstawie Google Analytics oraz map ciepła udało nam się również ustalić że naczjęściej klikalną pozycją menu i budzącą zainteresowani była to pozycja Careers. Najmniej klikaną zaś ta która była dla firmy najważniejsza (Energy&Utilities). Poziom zagnieżdżenia podstrony w menu utrudniał dotarcie do niej użytkownikom. Po rozmowie z zespołem dowiedzieliśmy się że bardzo dużo firma w ostatnim czasie przeprowadza rekrutacji co tłumaczyło wyniki uzyskane przez nasze analizy.
Następnie przeszliśmy do analizy serpów (wyniki Google TOP10). Głównym zadaniem było ustalenie stron jakie premiuje Google i uśrednienie danych. Aby to zrobić należało przeanalizować strony pod kątem czynników onsite SEO tzn m. in :
Wykonana została również analizia konkurencji pod kątem budowy oferty i przyjętej stylistyki.
Opracowanie architektury informacji i wykonanie prezentacji flow użytkownika oraz zawartości podstron.
Architektura informacji została przygotowana w oparciu o :
Warto wspomnieć o realizacji prototypów UX oraz projektów UI w programie figma.com. Dzięki figma, wszystko nad czym pracowaliśmy znalazło się w jednym projekcie. Klient miał wgląd w postępy prac i w dowolnym momencie mógł pozostawić komentarze w figma do każdego elementu projektu.
Efektem prac nad nową architekturą strony było :
Dużym wyzwaniem było przygotowanie nowej oferty oraz podstron Industry i Services zawierające główne usługi firmy. Pozycje te zostały finalnie wyciągnięte jako główne pozycje menu rozwijające tylko jeden poziom. Poprzednia wersja strony zawierała submenu trzeciego poziomu z którego dopiero użytkownik mógł wybrać interesujące zagadnienie.
Po analizach wyodrębniliśmy dwie grupy użytkowników :
Po trzech iteracjach prototypowania UX oraz rozmowach z zespołem (na których zostały zaprezentowane nowe koncepcje struktury menu) mogliśmy przejść do budowy makiet UX.
Nadrzędnym celem tego etapu było :
Pasek nawigacyjny
Dla podstron Solutions oraz Services został zaprojektowany dodatkowy pasek nawigacyjny, który po przewinięciu zostaje poniżej menu głównego. Umożliwia on sprawne poruszanie użytkownikowi po sekcjach w obrębie danej podstrony.
Etap prototypowania UX pozwolił na :
UI
Projektowanie warstwy wizualnej oraz interakcji było bardzo twórcze. Opracowana stylistyka nawiązuje do brandu firmy. Została wykorzystana kolorystka z brandu firmy, indywidualne ikony oraz zdjęcia z dostępnej bazy Codibly.
Interakcja
Niektóre z podstron poszczególnych rozwiązań (solutions) wyposażone zostały w interaktywne sekcje reagujące na kliknięcie lub zmieniające swoją zawartość wraz z przewijaniem podstrony.
Style guide
Zagnieżdżona struktura oraz mnogość elementów nawigacji i interaktywnych spowodowała potrzebę wykonania zasad i usystematyzowania wszystkich elementów graficznych w formie dokumentu Style Guide. Style Guide to dokument opisujący elementy zastosowane w projekcie tzn : odpowiednio ich wielkości, odległości, stany elementów aktywnych (np kolor) każdego elementu na stronie jak np: nagłówek, button, akapit czy sekcje tekstowe oraz elementy formularza.
Dokument przydatny jest w większych projektach gdzie szczególne istotne jest zachowanie jednej stylistyki elementów w ramach przyjętych dla nich zasad.
Wdrożenie strony zostało wykonane :
Dodatkowo zostało wykonane wdrożenie skryptów Google Tag Manager, którego zaletą jest
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.