powrot do case studies
Codibly

Codibly

zaawansowane technologie w służbie środowisku
Stworzenie nowej, intuicyjnej architektury serwisu ułatwiło znalezienie poszukiwanych informacji o usługach i produktach firmy.

Cele i założenia realizacji

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 :

  • wykonanie strony dającej możliwość intuicyjnej i sprawnej obsługi z poziomu panelu administratora,
  • zoptymalizowanej pod kątem technicznym oraz SEO
  • odzwierciedlającej w pełni usługi firmy i jej ofertę, czego niestety stara strona nie zapewniała

Nasza rola

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.

Etapy realizacji

Dlaczego, co i jak ?

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 :

  • zadawać pytania do zespołu oraz formować myśli na temat nowej prezentacji oferty i usług
  • zaproponować nowe rozwiązania z zakresu przeorganizowania struktury menu w tym oferty i usług.

Audyt obecnej strony

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 :

  • nie docierała do podstron dalej niż główne podstrony oferty,
  • skorzystanie z olbrzymiego formularza na stronie głównej było na poziomie bardzo niskim poziomie ok: 0-2%,
  • około 50% osob przewijało strone jedynie do połowy na urządzeniach mobilnych,
  • wchodzi do podstrony kariera,
  • guzik formularza mimo że wyróżniony również nie spełniał swojej funkcji (bardzo niska klikalność)

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.

mapa ciepla mouseflow dla strony glownej
mapa ciepła mouseflow dla strony głównej

mapa ciepła dla sekcji hero podstrony energy
mapa ciepła dla podstrony energy, sekcja baneru

Wykonanie researchu SEO i analiza stron TOP10 Google

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 :

  • objętość treści - długość paragrafów i łączna dla treści,
  • nasycenie frazami kluczowymi głównymi i pobocznymi oraz wykorzystaniem słów zależnych i pytań,
  • linkowania wewnętrznego,
  • zastosowania nagłówków h1-h4, znaczników alt,
  • procent umieszczenia fraz kluczowych głównych i pobocznych z bezokolicznikach oraz ich miejsce umieszczenia,

Wykonana została również analizia konkurencji pod kątem budowy oferty i przyjętej stylistyki.

Arcihtektura informacji

Opracowanie architektury informacji i wykonanie prezentacji flow użytkownika oraz zawartości podstron.

Architektura informacji została przygotowana w oparciu o :

  • wszystkie dotychczas zebrane dane z programów analityczny, audytu oraz od zespołu,
  • przeprowadzoną analizę konkurencji,

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 :

  • zmniejszenie ilości podstron, ich redukcja oraz konsolidacja,
  • wyeliminowanie podstron typu thincontent tzn dających małą wartość lub bardzo krótkich,
  • uszczuplenie pozycji submenu oferty Industries tylko do głównych branż tj: Energy&Utilities / Insurance / Healthcare,
  • zmniejszenie liczby podstron z menu services oraz skonsolidowanie ich treści do nowej struktury,
  • wyodrębnienie podstrony 'technology expertise' w formie osobnej nowej pozycji w głównym menu (poprzednia wersja strony zawierała te informacje w różnych podstronach i osobnej podstronie technology stack)

Nowa oferta

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.

codibly krakow struktura menu
Reorganizacja menu. Wyciągnięcie podstron services i industries do głównego menu

Analiza użytkowników

Po analizach wyodrębniliśmy dwie grupy użytkowników :

  • świadomy użytkownik wchodząc na stronę w poszukiwaniu konkretnych grup produktowych,
  • użytkownika szukającego usługi wg. branż który zainsteresowany będzie pozycją menu industries i tam znajdzie miejsce dla siebie do wyszukania informacji,

Projektowanie UX / UI

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 :

  • przedstawienie koncepcji i widoków podstron Services oraz Industries, połęczenie ich z case studies, stroną główną oraz pomiędzy sobą. Poszczególne usługi (solutions) zawierały się w odpowiednich kategoriach podstrony Industries. Pozycja Energy&Utitlities dostępna z menu Industries zawiera w drugiej sekcji rozwiązania (solutions) powiązane tematycznie z branżą Energy&Utilities,
  • strukturyzowanie widoków na podstronach i uzupełnienie ich w treści.

architektura menu strony codibly
budowa struktury podstrony energy&utilities dostępnej z nowego menu industry

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.

pasek menu ux podstron solutions
podstrony solutions i services zostały wzbogacone o dodatkowy pasek nawigacyjny (w formie sticki) przewijający do wybranego miejsca na podstronie

Etap prototypowania UX pozwolił na :

  • Zaprojektowanie przestrzeni i treści na makietach
  • Ocenę interpretacji treści przez użytkowników ( przestrzeń zaplanowana pod etap tworzenia tekstów )
  • Uporządkować kluczowe informacje oraz ustalić priorytety i sekcje dla podstron
  • Pokazanie elementów z nawigacji, interaktywnych dla użytkownika

Projektowanie UI

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.

elementy interaktywne podstron solutions

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.

Development

Wdrożenie strony zostało wykonane :

  • w warstwie Front-end : indywidualny kod html,css, js napisany przez nas w framework foundation kompilowanego poprzez gulp. Całość kodowania przechodziła poprzez platformę developerską gitlab,
  • w warstwie Back-end : wdrożenie i autorska integracja CMS Wordpress z wykorzystaniem dynamicznych pól ACFpro dając możliwość wykorzystania modułów predefiniowanych do samodzielniego tworzenia kolejnych sekcji przez administratora,

Dodatkowo zostało wykonane wdrożenie skryptów Google Tag Manager, którego zaletą jest

  • łagowanie tagów asynchronicznie czyli dzięki temu szybciej wczytujemy stronę
  • dowolna i samodzielna możliwość zarządzania i implementacji w prosty sposób różnych dodatkowych skryptów (np: wpięcie Google Ads, salesmanago, salesforce, map ciepła etc ), co było instotne dla działu marketingu firmy,

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.

Nie masz czasu przeczytać ?
Zakres prac
User Experience
Prototypowanie
Projektowanie UI
Kodowanie frontend
Integracja Wordpress
SEO

zaawansowane technologie w służbie środowisku

Jak możemy pomóc Ci osiągnąć cele i uczynić Twoją markę lepszą ?