Rola w projekcie
Brand/UI/UX
O projekcie
Portal o tematyce prefabrykacji drewnianej, stalowej i betonowej
W celu podkreślenia odmienności trzech głównych kategorii prefabrykacji – drewnianej, betonowej oraz stalowej – zdecydowałem się na zaprojektowanie trzech wersji kolorystycznych portalu, każdej dedykowanej jednej z tych kategorii. Kluczowym celem było stworzenie wizualnego rozróżnienia, które umożliwi użytkownikom intuicyjne poruszanie się po portalu i szybkie odnalezienie odpowiednich sekcji, bez konieczności głębszego zastanawiania się nad klasyfikacją.
Choć układ projektów pozostał jednolity, różnice w kolorystyce dla każdej z kategorii prefabrykacji pozwoliły na natychmiastowe zrozumienie, w jakiej strefie użytkownik się znajduje. Zastosowanie tej zmiany wizualnej miało na celu wspieranie łatwiejszej nawigacji, przy jednoczesnym zachowaniu estetyki i spójności designu.
Dodatkowo, w celu usprawnienia procesu orientacji i zwiększenia komfortu użytkowników, wprowadzono zakładki, które umożliwiają szybkie przejście do poszczególnych kategorii prefabrykacji. Zakładki te zostały zaprojektowane w sposób minimalistyczny, aby nie zaburzać ogólnej harmonii interfejsu, ale jednocześnie wyraźnie wskazywać na różnice pomiędzy kategoriami, co znacząco poprawiło doświadczenie użytkownika.
Job Board stanowi istotny element portalu, który nie tylko pozwala na szybkie dotarcie do ofert pracy w branży prefabrykacji, ale także zapewnia użytkownikom przyjazne i efektywne narzędzie do aplikowania na interesujące ich stanowiska. Dzięki odpowiednio zaprojektowanej strukturze i wygodnemu systemu filtrów, przyklejoną mapą w trybie "sticky" i wyboru kategorii użytkownicy mogą z łatwością znaleźć oferty odpowiadające ich umiejętnościom i potrzebom zawodowym, co przekłada się na lepszą efektywność procesu rekrutacji.
Możliwa jest też opcja bezpośredniego aplikowania na stanowisko pracy. Zakładki w portalu pozwalają na odfiltrowanie ofert które użytkownika nie interesują.
Jednym z kluczowych elementów poprawiających UX w procesie aplikowania na oferty pracy było wdrożenie sticky paska nawigacyjnego w formularzu aplikacyjnym. Celem tego rozwiązania było zapewnienie użytkownikom wygodnego dostępu do opcji „Aplikuj” oraz „Podgląd zgłoszenia” bez względu na to, w którym momencie procesu aplikacyjnego się znajdują.
W tej części portalu skupiliśmy się na zaprezentowaniu użytkownikom bogatej oferty projektów domów prefabrykowanych w sposób przejrzysty, intuicyjny i inspirujący. Głównym celem było umożliwienie łatwego przeglądania i porównywania różnych wariantów domów – zarówno pod kątem estetycznym, jak i funkcjonalnym.
Założenia UX:
Przejrzysta struktura: Użytkownik na pierwszy rzut oka widzi kluczowe informacje o projekcie – metraż, liczbę pokoi, typ zabudowy i orientacyjną cenę.
Możliwość filtrowania: Zastosowano zaawansowane filtry (m.in. metraż, liczba kondygnacji, styl architektoniczny, budżet), aby ułatwić użytkownikom szybkie zawężenie wyników do projektów odpowiadających ich potrzebom.
Intuicyjna nawigacja: Każdy projekt prowadzi do dedykowanej podstrony z pełnym opisem, wizualizacjami 3D, rzutami oraz opcją kontaktu z producentem lub architektem.
Założenia UI:
Minimalistyczny layout: Projekty prezentowane są w formie responsywnych kart z naciskiem na wizualizacje oraz najważniejsze dane techniczne.
Spójna estetyka: Design oparty na stonowanej palecie kolorystycznej i subtelnej typografii, która nie konkuruje z treścią wizualną.
Akcenty interaktywne: Dodano mikroanimacje oraz efekt hover, aby poprawić wrażenia użytkownika i zwiększyć zaangażowanie.
Makiety odzwierciedlają potrzebę połączenia inspiracyjnego charakteru katalogu z użytecznością typową dla narzędzia wspierającego proces decyzyjny. Dzięki temu użytkownik może nie tylko przeglądać projekty, ale aktywnie porównywać i analizować je pod kątem własnych oczekiwań.
Pracując nad makietami sekcji kursów online, wykorzystałem możliwości frameworka BuddyBoss, skupiając się na optymalizacji doświadczenia użytkownika oraz poprawie czytelności i zaangażowania w proces nauki.
Główne założenia UX:
Redefinicja ścieżki użytkownika: Przeanalizowałem zachowania uczestników kursów i uprościliśmy ścieżkę od momentu zapisania się na kurs po rozpoczęcie nauki. Kluczowe akcje (kontynuuj naukę, przegląd modułów, kontakt z mentorem) są dostępne natychmiast po wejściu na stronę kursu.
Mikrointerakcje zwiększające zaangażowanie: Zastosowaliśmy subtelne animacje i wskaźniki postępu, które wspierają użytkownika w utrzymaniu motywacji i poczuciu kontroli nad przebiegiem nauki.
Czytelna architektura informacji: Kursy zostały podzielone na moduły i lekcje z możliwością szybkiego podglądu treści, statusu ukończenia oraz ocen. Ułatwia to powrót do materiałów i zarządzanie czasem nauki.
Responsywność i dostępność: Wszystkie elementy makiet zaprojektowano z myślą o urządzeniach mobilnych, uwzględniając standardy dostępności WCAG, aby zapewnić komfortowy dostęp do kursów jak najszerszej grupie użytkowników.
Projektowanie w oparciu o BuddyBoss dało solidną podstawę funkcjonalną, ale skupiliśmy się na jej dalszym dostosowaniu – optymalizując interfejs pod kątem realnych potrzeb użytkownika, upraszczając złożone procesy i dbając o wysoką jakość interakcji.
W naszym projekcie platforma BuddyBoss została wykorzystana jako szkielet dla stworzenia przestrzeni edukacyjno-społecznościowej w obszarze prefabrykacji. Dzięki gotowym rozwiązaniom i elastycznemu interfejsowi mogliśmy skupić się na doświadczeniu użytkownika (UX), projektując:
przejrzystą strukturę kursów,
angażujące profile użytkowników,
strefę wiedzy z funkcją komentarzy i ocen,
forum dla specjalistów i inwestorów,
system powiadomień i postępów w nauce.
Efekt: BuddyBoss pozwolił znacząco skrócić czas wdrożenia MVP, zapewniając jednocześnie solidną podstawę technologiczną do dalszej personalizacji i rozwoju platformy.
7 etap
Sekcja „Porady Ekspertów” została zaprojektowana jako przestrzeń dialogu między użytkownikami a specjalistami z branży prefabrykacji. Głównym celem było zbudowanie wartościowego kanału wymiany wiedzy, który jednocześnie pełni funkcję miękkiego call-to-action prowadzącego do konsultacji indywidualnych.
Kluczowe założenia UX:
Minimalna bariera wejścia: Użytkownik może szybko zadać pytanie bez konieczności zakładania konta lub wypełniania skomplikowanych formularzy. Priorytetem było zmniejszenie tarcia i zachęcenie do interakcji.
Struktura pytań i odpowiedzi: Pytania użytkowników są prezentowane w formie kart z opcją sortowania (najnowsze, najpopularniejsze), a odpowiedzi ekspertów wyróżniają się wizualnie, co podkreśla ich autorytet.
Elementy zaufania: Obok każdego eksperta umieszczono podstawowe informacje (imię, zdjęcie, specjalizacja), co zwiększa wiarygodność odpowiedzi i buduje relację z użytkownikiem.
Mikro-konwersja przez CTA: W każdej odpowiedzi eksperta znajduje się dyskretny, ale wyraźny przycisk „Skorzystaj z konsultacji” – umieszczony w kontekście merytorycznej porady, co zwiększa szansę na kliknięcie. Dzięki temu użytkownik ma naturalną ścieżkę przejścia od pytania do pogłębionej współpracy.
Responsywność i dostępność: Całość została zaprojektowana z myślą o dostępności mobilnej i czytelności, nawet przy długich treściach.
Efekt: Funkcja „Porady Ekspertów” łączy funkcję społecznościową z narzędziem lead generation, bez nachalnego charakteru sprzedaży – dzięki temu użytkownik czuje, że najpierw otrzymuje realną wartość, a dopiero potem decyduje o dalszym kontakcie.
Cel projektu:
Stworzenie strony produktu prefabrykowanego elementu (np. ściany, stropu, modułu), która nie tylko informuje, ale także konwertuje – jako część katalogu producentów prefabrykacji.
Wyzwanie:
Produkty prefabrykowane są często techniczne i trudne do zrozumienia dla użytkowników bez doświadczenia w branży. Trzeba było połączyć techniczną dokładność z przejrzystym, przystępnym przekazem – jednocześnie wspierając decyzję zakupową lub kontakt.
Cel projektu:
Stworzenie strony produktu prefabrykowanego elementu (np. ściany, stropu, modułu), która nie tylko informuje, ale także konwertuje – jako część katalogu producentów prefabrykacji.
Wyzwanie:
Produkty prefabrykowane są często techniczne i trudne do zrozumienia dla użytkowników bez doświadczenia w branży. Trzeba było połączyć techniczną dokładność z przejrzystym, przystępnym przekazem – jednocześnie wspierając decyzję zakupową lub kontakt.
10 etap
Zaprojektowanie intuicyjnego i angażującego widoku pojedynczego artykułu, który nie tylko prezentuje treść w atrakcyjnej formie, ale również wspiera długoterminowe zaangażowanie użytkownika – m.in. przez komentarze, subskrypcję newslettera oraz elementy multimedialne. Doprojektowałem również dodatkowe propozycje z komponentami w stylu magazynowym.
10 etap
Listing artykułów
Stworzenie uporządkowanej, atrakcyjnej i łatwej w eksploracji podstrony z artykułami, poradami, nowinkami i inspiracjami. Kluczowym założeniem było zwiększenie czasu spędzanego na stronie oraz ułatwienie dostępu do eksperckiej wiedzy.
10 etap
Znajdź pomysł na kolejną realizację
Zaprojektowanie intuicyjnego i angażującego widoku pojedynczego artykułu, który nie tylko prezentuje treść w atrakcyjnej formie, ale również wspiera długoterminowe zaangażowanie użytkownika – m.in. przez komentarze, subskrypcję newslettera oraz elementy multimedialne. Doprojektowałem również dodatkowe propozycje z komponentami w stylu magazynowym.
Efekt? Makieta pozwala użytkownikowi wejść w świat prefabrykacji przez pryzmat estetyki i funkcjonalności, a nie samej technologii. Dzięki temu rozwiązaniu strona inspiracyjna nie tylko buduje zaangażowanie, ale również kieruje do konkretnych produktów i usług – wspierając lead generation.
10 etap
Panel zarządzania z pakietem elementów UI KIT
Stworzenie uporządkowanej, atrakcyjnej i łatwej w eksploracji podstrony z artykułami, poradami, nowinkami i inspiracjami. Kluczowym założeniem było zwiększenie czasu spędzanego na stronie oraz ułatwienie dostępu do eksperckiej wiedzy.
10 etap
Landing Page z Pakietem Korzyści
Zaprojektowanie landing page’a wspierającego kampanię marketingową skierowaną do nowych użytkowników (z odziałem na indywidualny/biznesowy/branżowy), z naciskiem na przedstawienie wartości portalu prefabrykacyjnego w prosty, przekonujący sposób i zachęcenie do rejestracji lub kontaktu.
