[ation] center - projekt platformy szkoleniowej dla produktowców
Naszym wyzwaniem było stworzenie strony internetowej dla nowego brandu szkoleniowego. Zobacz, jak dzięki odpowiedniej prezentacji oferty oraz uproszczeniu ścieżki zakupowej, ułatwiliśmy zakup szkolenia przez internet.
[ation] center to nowa marka szkoleniowa oferująca kursy i szkolenia dla projektantów, badaczy i osób zarządzajacych rozwojem produktów cyfrowych. Zostaliśmy zaproszeni do zaprojektowania strony internetowej, której celem była atrakcyjna prezentacja oferty firmy oraz sprzedaż szkoleń przez internet.
W ramach współpracy powstał projekt strony internetowej. Szczególny nacisk położyliśmy na prezentację produktów - szkoleń stacjonarnych i kursów online, które stanowią wyróżnik oferty [ation] center.
Zaprojektowaliśmy ścieżkę zakupu szkoleń i kursów typu masterclass. Wygodny i szybki proces zakupu został dopasowany zarówno do klientów indywidualnych, jak i firm.
Ścieżka zakupowa produktu
Wireframes
UX & UI
Design System
Kontekst projektu
[ation] center to nowa marka, mająca na celu edukację specjalistów zajmujących się rozwojem produktów cyfrowych m.in. managerów produktów, analityków, badaczy oraz projektantów UX i UI.
Idze Mościchowskiej i Michałowi Witkowskiemu, czyli założycielom marki, szczególnie zależało na wypracowaniu unikalnego stylu wizualnego strony, spójnego z wcześniej ustalonym brandingiem.
Usługi [ation] center skierowane są zarówno do indywidualnych klientów, jak i do firm. Dlatego naszym celem było dostosowanie sposobu prezentacji oferty oraz procesu zakupu w taki sposób, aby spełniały one oczekiwania obu grup klientów.
Zima z powodzeniem zaprojektowała nowy projekt naszej strony, który zarówno poprawia, jak i upraszcza UX naszej platformy.
Zespół Zimy jest wydajny i skoncentrowany na realizacji swoich zadań.
Wyzwanie projektowe
- Przedstawienie odbiorcom na stronie nowych formuł szkoleniowych w zrozumiały sposób.
- Ułożenie architektury informacji tak, aby użytkownicy bez problemów poruszali się po stronie oraz odnajdywali istotne informacje o produktach (szczególnie: miejsce, data, informacje o trenerze, formuła wydarzenia).
- Zaprojektowanie procesu zakupu online w taki sposób, aby był dopasowany zarówno do klientów B2B, jak i B2C.
- Stworzenie niezawodnego kanału sprzedaży, który będzie wspierał promocję produktów - w tym nowego konceptu firmy - kursów masterclass w formule online.
Proces projektowy
Projektowanie podzielone było na fazy:
- Ułożenie architektury informacji.
- Projektowanie makiet UX (wireframes): przedstawienia elementów oferty i ścieżki zakupowej.
- Wypracowanie Look & Feel: skojarzenia z produktem premium, ale jednocześnie dostępnego, w zasięgu ręki.
- Stworzenie Design systemu.
Projekt prowadziliśmy online, jednak współpraca z klientem była intensywna. Podczas cotygodniowych spotkań, na których omawialiśmy wypracowane materiały, otrzymywaliśmy feedback i poprawki do projektu. Dzięki temu współpraca przebiegała zgodnie z harmonogramem.
Architektura informacji i projekt UX
W pierwszym etapie wypracowaliśmy architekturę informacji oraz wstępny flow produktu. Wyzwaniem w tym obszarze było pokazanie dwóch najważniejszych produktów firmy: workshopów (szkoleń stacjonarnych) oraz kursów masterclass (szkoleń online). Pomimo podobnej tematyki, oferowane produkty różnią się od siebie nie tylko formułą prowadzenia. Te różnice musieliśmy czytelnie zaprezentować.
Kolejnym ważnym elementem był flow zakupu oraz promowanie zbliżających się edycji. Zazwyczaj [ation] center oferuje kilka terminów danego szkolenia, dlatego dla nas ważne było czytelne komunikowanie użytkownikowi, na jaki termin rezerwuje miejsce. Zadbaliśmy także o sytuację, w której użytkownik musi zapisać się na listę rezerwową z powodu braku dostępnych miejsc.
Wypracowaliśmy także wzorce informowania o cenie oraz promocjach. Nasz klient oferował kilka rodzajów zniżek, np. dla stałych klientów zniżkę early birds lub grupową. Klarowne informacje na temat pakietów oraz poprowadzenie przez cały proces były kluczowe, aby zakup zakończył się sukcesem dla klienta oraz nie generował błędów, które wymagają obsługi po stronie sprzedawcy.
Kierunek wizualny
Wspólnie z klientem, podczas krótkich warsztatów, wypracowaliśmy look & feel dla nowej strony. Stworzyliśmy moodbaord i 3 różne propozycje wychodzące od logotypu i brandingu marki [ation] center.
Produkt aspirujący do marki premiumProfesjonalny i poważny styl: przejrzysty, czytelny, z elegancką typografią.
Kolorystyka wywodząca się z id branduGłówny akcent bazuje na kolorze chabrowym, wywodzącym się z brandu klienta. Kolory dopełniające to niebieski, szary, oraz kolor czarny dla tekstów.
Monochromatyczne ilustracjeUnikamy stockowej grafiki, korzystamy z prawdziwych zdjęć dostarczonych przez klienta. Zdjęcia dodatkowo wyróżniamy monochromatyczną stylizacją.
Design System
Stworzyliśmy Design System, czyli zbiór komponentów wizualnych, z których zbudowana jest strona. Dzięki temu mieliśmy zebrane w jednym miejscu standardy i zasady komponowania kolejnych widoków. Pomogło to zadbać o spójny wygląd produktu i stało się podstawą dokumentacji technicznej dla deweloperów.
Finalny projekt UI
Edycje szkoleniowe
Z uwagi na cykliczny charakter produktu (szkolenia), prezentując konkretną edycję zadbaliśmy o prezentację daty, miejsca i trenera, a także umieściliśmy w opisie wszystkie szczegóły związane z produktem.
Nasz zespół pracował w modelu projektowym
![To musisz wiedzieć, żeby Twój biznes w medtech zadziałał [+przykłady UX]](https://cdn.prod.website-files.com/665f016b950e89499f580acc/671b831663a2597f47c963f3_Grafika-nr-1_-tytul_-Innowacja-termometra--scaled.webp)
