Research

Przeanalizowaliśmy strukturę starej strony,  przeprowadziliśmy research dotyczący branży i przejrzeliśmy strony polskich i zagranicznych firm zajmujących się usługami HR. Już od tego etapu angażowaliśmy klienta, wspólnie wypracowując kierunek w którym będziemy podążać, oceniliśmy jakie elementy obecnej strony i identyfikacji wizualnej chcielibyśmy zachować i omówiliśmy jak zamierzamy odświeżyć jej charakter.

Warsztaty

Przeprowadziliśmy warsztaty, na których między innymi omówiliśmy szczegółowo persony, do których firma chce kierować swoje usługi, ich potrzeby, problemy i obawy. Zdecydowaliśmy się podzielić podstrony z ofertę HR Hints dwutorowo - po pierwsze ze względu na pakiety współpracy: Rekrutacja i Zarządzanie Zespołem, a po drugie ze względu na grupy, do których są kierowane: Startup/Scaleup , Inwestor i Przedsiębiorca. Takie precyzyjne zaadresowanie potrzeb wynikających z różnej specyfiki firm klientów miało na celu poszerzenie w przyszłości grupy odbiorców - dotychczas firma HR Hints zdobywała nowych klientów w środowisku Startupów, w którym jest rozpoznawalna i ceniona.

Projektowanie w Figmie

Po warsztatach przeanalizowaliśmy potencjalne ścieżki użytkowników i na ich podstawie stworzyliśmy architekturę informacji nowej strony. Wiedzieliśmy już też dokładnie co jest dla nas najważniejsze w nowej wersji strony - chcieliśmy pokazać bardziej spersonalizowaną ofertę, ustrukturyzować i urozmaicić wizualnie treści - nadać im widoczny podział na sekcje, zadbać o to, żeby podstrony różniły się od siebie. Chcieliśmy też, żeby strona nabrała lekkości, podjęliśmy decyzję o rozjaśnieniu palety kolorystycznej, zrezygnowaniu z dużych połaci granatu i ponurego beżu na rzecz świetlistego jasnego tła oraz imitujących szkło przezroczystości (glassmorphism). Skorzystaliśmy ze stworzonych wcześniej dla marki ilustracji, ale pokazaliśmy je w nowej, świeżej, odsłonie.

Development w Webflow

Ze względu na brak skomplikowanych funkcjonalności podjęliśmy decyzję, że strona będzie budowana w technologii No Code w Webflow przez zespół naszych designerów.

Projektując elementy na stronę oparliśmy się o bibliotekę komponentów Relume, dla Webflow, do której dostępna jest także analogiczna biblioteka w Figmie - to pozwoliło nam później w sprawny sposób przenosić projekty wizualne oparte na komponentach Relume i przetworzone przez nas z Figmy do Webflow korzystając tam z gotowych responsywnych “szkieletów” pod które przygotowane były też już nasze designy.

Po zaakceptowaniu przez klienta pierwszych makiet najważniejszych stron takich jak strona główna oraz podstrona oferty dedykowana poszczególnym personom, zaczęliśmy przygotowywać środowisko pracy w Webflow.  Pierwszym krokiem było połączenie Relume z Webflow. Korzystanie z biblioteki sekcji znacznie usprawniło i przyspieszyło pracę.

Animowane mikrointerakcje

Zastosowaliśmy na stronie subtelnie animowane mikrointerakcje, które sprawiają, że strona jest bardziej angażująca dla użytkownika i które nadają jej lekkości i charakteru. Header strony głównej kołysze się po najechaniu go myszą, kafelki obok lekko powiększają i także delikatnie poruszają się po najechaniu, kursor myszy śledzi lekka pomarańczowa aura odbijająca się na headerze przypominającym szklaną płytkę. Buttony oczywiście mają też zaprojektowane swoje stany z lekką animacją na hover (najechanie myszą). Menu otwiera się w płynny sposób i po otwarciu delikatnie prześwituje spod niego zawartość strony. Nawigacja pojawia się też w każdym momencie na stronie kiedy scrollujemy w górę. Sekcje na stronie głównej płynnie animują się kiedy użytkownik pierwszy raz się przez nie scrolluje.  Dzięki zastosowaniu wielu takich drobnych zabiegów interakcja użytkownika ze stroną nabiera smaku i jest po prostu przyjemna. Wszystkie interakcje zostały zanimowane w Webflow.

Współpraca z klientem

Podczas pracy byliśmy w stałym kontakcie z klientem, aby na bieżąco konsultować wrażenia i uwagi związane ze stroną. Płynna komunikacja pozwoliła na ustalenie zmian dotyczących kolorystyki, która początkowo nie odzwierciedlała w pełni charakteru person.

Na tym etapie pracy skupiliśmy się jednocześnie na tworzeniu strony w webflow oraz kontynuowaniu pracy w Figmie nad kolejnymi podstronami. Schemat naszego działania wyglądał następująco:

• projektowanie podstron w figmie
• konsultacja makiet z klientem
• wprowadzanie ewentualnych poprawek i ponowna konsultacja
• przeniesienie ostatecznego widoku do Webflow
• konsultacja z klientem
• wprowadzanie poprawek.

Powyższy schemat nie był jednak wykonywany linearnie punkt po punkcie. Projektowanie w Figmie oraz Webflow, na tym etapie prac, odbywało się równolegle, co pozwoliło na większą efektywność.

Wyzwania w projekcie

Ważnym aspektem tworzenia strony była responsywność wszystkich widoków. Część sekcji, które były wykorzystane z biblioteki Relume były gotowe także pod tym względem. Pozostałe sekcje dopasowaliśmy sami odpowiednio do rozdzielczości tabletu oraz telefonu.

Istotną sprawą z punktu widzenia klienta była możliwość edycji treści oraz późniejsze samodzielne tworzenie podstron z gotowych sekcji. Sprawa ta została rozpatrzona i rozwiązana na kilka sposobów.

• CMS 

Część treści  (np.: rekomendacje klientów, case studies, logotypy klientów) została stworzona podstawie kolekcji CMS. W przypadku opinii klientów oraz logotypów musieliśmy odpowiednio dostosować filtry oraz użyć warunkowych wyświetleń, aby odpowiednie opinie wyświetlały się w odpowiednich miejscach. 

• Edycja kontentu i przenoszenie sekcji

Drugim sposobem edycji było po prostu zmienianie treści ręcznie w poszczególnych sekcjach. Niektóre czynności jednak wymagały od klienta używania pełnego panelu webflow jak np.: kopiowanie i przenoszenie sekcji w inne miejsce. 

Obydwa rozwiązania zostały przedstawione oraz wytłumaczone klientowi, tak aby sam mógł korzystać z tych funkcjonalności w przyszłości. Po zaprojektowaniu wszystkich podstron, ostatnim etapem było opublikowanie strony oraz dodanie angielskiej wersji językowej. 

Podsumowanie

Analizując przebieg całego projektu było to ciekawe wyzwanie, któremu należało sprostać zarówno pod względem designu jak i funkcjonalności strony. Dzięki lżejszemu wyglądowi zmieściło się więcej treści na stronie, w porównaniu do pierwotnej wersji. Treści zostały również bardziej uporządkowane. Zaangażowanie w projekt po obu stronach poskutkowało efektywnym i sprawnym procesem.