Codibly

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ą.

‍

Nasza rola

‍

W ramach projektu dla Codibly naszym zadaniem było stworzenie strony internetowej, która odzwierciedla dynamiczny charakter firmy technologicznej, specjalizującej się w rozwiązaniach IT dla branży energetycznej. Pracę rozpoczęliśmy od dogłębnej analizy celów biznesowych i użytkowników docelowych, aby zrozumieć, jak najlepiej zaprezentować ofertę i wartości firmy.

‍

Grupa docelowa i persony dla Codibly

‍

Strona internetowa Codibly została zaprojektowana z myślą o dwóch głównych grupach docelowych: firmach z sektora energetycznego szukających zaawansowanych rozwiązań IT oraz potencjalnych partnerach i inwestorach, którzy są zainteresowani współpracą w zakresie nowoczesnych technologii. Każda z tych grup ma swoje unikalne potrzeby, które uwzględniliśmy w procesie projektowania strony.

‍

Persona 1: Menedżer IT w firmie energetycznej

• Profil: Menedżerowie IT lub CTO (Chief Technology Officer) w średnich i dużych firmach z branży energetycznej, poszukujący nowoczesnych rozwiązań technologicznych, które pomogą zautomatyzować i zoptymalizować procesy w firmie.
• Motywacje: Innowacje, cyfryzacja procesów, optymalizacja kosztów, rozwiązania dostosowane do specyficznych wymagań branży.
• Problemy: Poszukiwanie partnerów technologicznych, którzy oferują skalowalne i nowoczesne rozwiązania IT, przy jednoczesnym braku jasnej wizji współpracy z firmami technologicznymi.
• Oczekiwania: Jasno zaprezentowana oferta usług i realizacji projektów, prosty dostęp do case studies i technologii wykorzystywanych przez Codibly, które pokazują konkretne korzyści dla branży energetycznej.

Persona 2: Potencjalny partner technologiczny

• Profil: Dyrektorzy operacyjni lub decyzyjni w firmach technologicznych, które szukają współpracy z doświadczonymi partnerami IT specjalizującymi się w tworzeniu rozwiązań dla sektora energetycznego i odnawialnych źródeł energii.
• Motywacje: Wspólne projekty, rozwój nowych rozwiązań technologicznych w obszarze energii, współpraca na dużą skalę.
• Problemy: Trudność w znalezieniu zaufanego partnera, który posiada doświadczenie i wiedzę na temat specyficznych wymagań branży.
• Oczekiwania: Prezentacja kompetencji Codibly, technologii, z którymi firma pracuje, oraz dotychczasowych projektów, które mogą świadczyć o możliwości współpracy na wysokim poziomie.

Persona 3: Inwestor

• Profil: Inwestorzy prywatni i instytucjonalni zainteresowani wspieraniem firm technologicznych z sektora energetycznego.
• Motywacje: Zainwestowanie w innowacyjne projekty i technologie, które mogą przynieść długoterminowy zysk, szczególnie w obszarze energii odnawialnej i cyfryzacji.
• Problemy: Poszukiwanie zaufanych firm o ugruntowanej pozycji, które mogą zagwarantować innowacyjne rozwiązania z potencjałem na sukces.
• Oczekiwania: Strona musi jasno przedstawiać potencjał technologiczny Codibly oraz wyraźnie komunikować dotychczasowe osiągnięcia i plany rozwoju, które mogą zainteresować inwestorów.

‍

Projektowanie UI

‍

W fazie projektowania interfejsu (UI) skupiliśmy się na stworzeniu nowoczesnego, a zarazem czytelnego layoutu, który przemawia do profesjonalistów z branży technologicznej. Naszym celem było połączenie nowatorskiego wyglądu z użytecznością, aby użytkownicy mogli łatwo odnaleźć kluczowe informacje.

1. Minimalistyczny design – Strona opiera się na czystych liniach i dużych przestrzeniach między elementami, co sprawia, że każda sekcja jest czytelna i przyjemna dla oka. Wyraźna hierarchia treści pomaga użytkownikom szybko zlokalizować najważniejsze informacje.
2. Dynamiczne efekty wizualne – Delikatne animacje i interakcje wizualne nadają stronie nowoczesny charakter, bez nadmiernego rozpraszania użytkowników. Te subtelne efekty, takie jak przyciski zmieniające kolor czy animacje na scrollu, dodają stronie dynamiki, tworząc wrażenie innowacyjności i technologicznego zaawansowania.
3. Kontrasty i typografia – Zastosowaliśmy kontrastowe zestawienia kolorów, które pomagają wyróżnić kluczowe treści. Wyraźna, nowoczesna typografia sprawia, że wszystkie informacje są łatwe do odczytania, a jednocześnie wspiera estetykę profesjonalizmu.
4. Przejrzyste menu i łatwa nawigacja – Kluczowe elementy nawigacyjne zostały zaprojektowane w sposób intuicyjny, dzięki czemu użytkownicy mogą szybko odnaleźć interesujące ich sekcje. Strona zapewnia prosty dostęp do najważniejszych informacji o usługach, projektach oraz case studies, co sprzyja szybkiemu podejmowaniu decyzji przez potencjalnych klientów i partnerów.

Efekt końcowy to strona internetowa, która nie tylko przyciąga uwagę dynamicznym designem, ale przede wszystkim ułatwia użytkownikom szybkie i intuicyjne poruszanie się po stronie, wspierając prezentację zaawansowanych technologicznie usług Codibly.

‍

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.

‍

‍

‍

‍

‍

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.

‍

‍

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.

‍

‍

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 :

• 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.

‍

‍

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,