projekt komercyjny

Intuicyjny konfigurator produktów dla firmy produkującej oświetlenie przemysłowe

Role:

UX Designer

UI Designer

UX Researcher

Low-code Developer

Zakres:

Badanie Rynku

Projektowanie UX

Prototypowanie

Audyt UX

Projektowanie UI

Testy użyteczności

Team:

Ja (designer + low-code developer)

Blue-Mint Agency (developer)

Czas trwania:

6 miesięcy

Problem:

Dotychczasowa strona internetowa firmy była przestarzała i niedostosowana do dynamicznego rozwoju przedsiębiorstwa. Nie oddawała aspiracji firmy, która dąży do budowania globalnej rozpoznawalności i ekspansji na rynki międzynarodowe. Dodatkowym problemem był system zamówień, oparty wyłącznie na kontaktach telefonicznych i e-mailowych. Takie rozwiązanie generowało liczne utrudnienia zarówno dla klientów, jak i zespołu sprzedaży — powodując tarcia w procesie zakupowym i znacząco ograniczając skuteczność lejka sprzedażowego.

Rozwiązanie:

Nowoczesna strona internetowa powinna pełnić podwójną funkcję: być intuicyjną platformą do zapytań produktowych oraz wiarygodnym źródłem wiedzy branżowej. Dzięki bogatej bibliotece materiałów technicznych, skierowanej do inżynierów oświetlenia, witryna będzie nie tylko wspierać zaangażowanie użytkowników, ale również podkreślać eksperckość i doświadczenie firmy w sektorze.

Rezultat:

Nowa strona internetowa została uruchomiona i wyposażona w zaawansowane funkcje, takie jak konfigurator produktów, formularz zapytań oraz strefa projektanta. Dzięki tym rozwiązaniom, użytkownicy mają teraz łatwiejszy dostęp do potrzebnych informacji, a proces zamówień stał się bardziej płynny i efektywny.

after

kontekst

Oświetlenie przeciwwybuchowe - specjalistyczny produkt

Oświetlenie przeciwwybuchowe
- specjalistyczny produkt

Firma została założona w 2011 roku, rozpoczynając działalność od podstaw. W pierwszych latach skoncentrowała swoje zasoby na budowie know-how oraz umacnianiu pozycji na rynku. Spółka specjalizuje się w produkcji oświetlenia przemysłowego, a jej kluczową linię produktów stanowią oprawy przeciwwybuchowe – przeznaczone do pracy w środowiskach o podwyższonym ryzyku wybuchu, takich jak rafinerie, platformy wiertnicze czy zakłady destylacyjne. Ze względu na wysoki stopień specjalizacji oraz ograniczoną grupę odbiorców końcowych, sprzedaż tego typu produktów wymaga odpowiednio ukierunkowanego podejścia.

kontekst

Niewykorzystany potencjał

Podstawowym i zarazem kluczowym elementem walki o rynek opraw przeciwwybuchowych jest odpowiednia certyfikacja produktów – przede wszystkim zgodność z normą ATEX, która warunkuje dopuszczenie ich do obrotu. W naturalny sposób generuje to popyt na tego typu rozwiązania, zwłaszcza na rynkach Bliskiego Wschodu, związanych z wydobyciem i przetwórstwem ropy naftowej. W celu zwiększenia obrotów, spółka podjęła działania zmierzające do dywersyfikacji rynków zbytu, poszukując nowych klientów w Europie, Azji oraz Ameryce Południowej. Niestety, działania te napotykają na szereg trudności. Po przeprowadzeniu szczegółowej analizy okazało się, że:

▪️Produkty firmy są postrzegane jako solidne, ale jednocześnie droższe niż konkurencyjne zamienniki np. z Chin, co utrudnia konkurowanie na rynkach wrażliwych cenowo,

▪️Marka nie jest rozpoznawalna globalnie – firma nie zbudowała jeszcze silnej obecności w świadomości klientów zagranicznych, przez co budzi mniejsze zaufanie niż znani globalni producenci,

▪️Brakuje wyraźnego przekazu wartości – nie są wystarczająco eksponowane kluczowe atuty, takie jak jakość wykonania, trwałość czy zgodność z wymagającymi normami bezpieczeństwa,

▪️Proces kontaktu i składania zapytań jest skomplikowany i nieintuicyjny.

audyt ux

Strona internetowa ze słabymi wynikami

before

Rezultaty audytu ux:

▪️Brak przycisków CTA (wezwania do działania) na stronach produktów, co jest istotnym wskaźnikiem wydajności lejka sprzedażowego na jego końcowym etapie,

▪️Kontakt dostępny tylko na stronie „Kontakt”, co wymusza zamknięcie strony produktu,

▪️Stosunkowo wysoka liczba użytkowników (75 tys. w 2023 roku), głównie z ruchu organicznego,

▪️Tylko 5,3% powracających odwiedzających, co wskazuje na słabą retencję użytkowników na stronie,

▪️Strona internetowa nie wspiera wystarczająco procesu konwersji,

▪️Niska średnia długość sesji – zaledwie 38 sekund.

▪️Strona internetowa ma przestarzały layout.

pivot

Uwaga, ślepa uliczka!

Zacząłem od stworzenia planu badawczego, screenera i przeprowadzenia pierwszych wywiadów pogłębionych. Oparłem się na liście klientów dostarczonej przez dział sprzedaży i analizowałem firmy, które kupiły produkty w ostatnich dwóch latach. Skupiłem się na zamówieniach związanych z oświetleniem przeciwwybuchowym, ponieważ jest to dużą przewaga firmy a na rynku.

I wtedy uświadomiłem sobie, że popełniłem błąd!

Okazało się, że w wielu projektach elektrycznych dla obiektów przemysłowych wymagania dotyczące oświetlenia są ściśle określone, a osoby, które zamawiają produkt, często nie mają wpływu na wybór oświetlenia – po prostu realizują to, co zostało zaprojektowane.

Wtedy postanowiłem zmienić kierunek i skupić się na Projektantach Oświetlenia – to oni mają realny wpływ na wybór opraw oświetleniowych. Zdecydowałem się przeprowadzić z nimi 6 kolejnych wywiadów, co pozwoliło mi lepiej zrozumieć ich potrzeby i dostosować dalsze kroki.

Najważniejsze insighty z IDIs:

Skupieni na specyfikacji

Projektanci Oświetlenia potrzebują danych technicznych. Dla nich kluczowa jest dostępność specyfikacji produktów. Nazwa produktu pełni jedynie funkcję kodu referencyjnego w przypadku kontaktu z producentem.

Przepracowani i zajęci

Specjaliści cenią swój czas. Kiedy odwiedzają stronę internetową i nie mogą znaleźć odpowiedniego produktu, nie próbują ponownie. Musimy pomóc im w codziennej pracy, aby poprawić retencję na naszej stronie.

Używają technologii BIM

Modelowanie informacji o budynku (BIM) to trójwymiarowy model budynku, wzbogacony o różne rodzaje informacji. Co więcej, umożliwia on komunikację pomiędzy uczestnikami procesu projektowania i budowy.

protopersona

Projektanci Oświetlenia

Jacek Lumen

Projektant Oświetlenia

37 lat | Bydgoszcz

demografia

▪️pracuje w BIM i korzysta z nowoczesnych narzędzi (np. DIALux)

▪️realizuje wiele różnych projektów jednocześnie

▪️szuka zweryfikowanych i niezawodnych rozwiązań

▪️koncentruje się na specyfikacjach i danych

▪️sprawdza certyfikaty i dopuszczenia

zachowania

cele i potrzeby

▪️ realizować projekty bardzo szybko

▪️ nie robić zbyt wielu powtórzeń

▪️ wybierać bezbłędnie oświetlenie o wymaganych parametrach

▪️ muszą ufać wysokiej jakości produktów

▪️ otwiera każdy produkt osobno, aby je porównać

▪️ niejasne nazwy, oznaczenia i symbole

▪️ nie ma pojęcia, z kim się skontaktować

▪️ brak sekcji z referencjami i projektami

trudności i frustracje

user-centric design

Niech znajdą to, czego potrzebują

Niech znajdą to,
czego potrzebują

W tym przypadku użytkownicy odwiedzają stronę internetową z jasną i konkretną potrzebą. Szukają produktu, który spełnia dokładne specyfikacje techniczne ich projektu i posiada wymagane certyfikaty.

Kluczowe jest, aby użytkownicy mogli łatwo znaleźć odpowiedni produkt w zaledwie kilku krokach.

❌ Rodziny produktów znajdują się na osobnych stronach.
❌ Brak opcji filtrowania produktów.
❌ Produkty można porównać tylko przez otwieranie stron pojedynczo.
❌ Zakładki serii produktów są niewidoczne.

before

after

✅ Dostępna strona ze wszystkimi produktami.
✅ Dostępne liczne filtry ułatwiające wybór produktów.
✅ Wszystkie zakładki zmienione na filtry dla uproszczenia nawigacji.
✅ Czysty układ siatki z produktami posortowanymi alfabetycznie

user-centric design

Niech zostaną na dłużej

Podczas testów użyteczności wielu użytkowników wyraziło frustrację z powodu trudności w znalezieniu odpowiedniej osoby do kontaktu. Woleli kontynuować poszukiwania online, szukając alternatyw z jasnymi cenami lub przynajmniej prostym formularzem kontaktowym. Zidentyfikowałem ten problem jako krytyczny, ponieważ hamuje on współczynnik konwersji strony i prowadzi do znacznej utraty potencjalnych klientów. Dodatkowo, brak wyraźnego przycisku CTA uniemożliwia śledzenie zainteresowania użytkowników produktem, pozbawiając firmy cennych informacji o sprzedaży i produkcie.

Aby rozwiązać ten problem, zaprojektowałem user-flow, który będzie odpowiadał każdemu etapowi lejka sprzedażowego, zapewniając użytkownikom wsparcie i wskazówki na każdym etapie procesu.

❌ Brak przycisku call to action na stronie produktu,
❌ Trudna do zrozumienia schemat konfiguracji produktu,
❌ Nieznane oznaczenia producenta bez wyjaśnienia,

before

✅ Przycisk zapytania, który generuje leady,
✅ Konfigurator produktów, który nie wymaga specjalistycznej wiedzy,
✅ Galeria produktów w różnych konfiguracjach.

after

user-centric design

Zróbmy z tego narzędzie do codziennej pracy

Każdy projekt wiąże się z unikalnymi specyfikacjami i wymaganiami dotyczącymi oświetlenia, dostosowanymi do różnych norm i ograniczeń w zależności od jego zastosowania. Oprawy oświetleniowe przeznaczone do stref zagrożonych wybuchem różnią się znacząco pod względem konstrukcji, okablowania, połączeń i montażu. Dodatkowo, rodzaj materiału przechowywanego w silosach określa wymagany poziom ochrony przed wnikaniem oraz stopień odporności chemicznej, jaki muszą spełniać oprawy. Ta złożoność prowadzi do przytłaczającej ilości tabel danych, norm, oznaczeń i certyfikatów.

Aby uprościć proces pracy inżynierów oświetlenia, stworzyłem dedykowaną strefę projektanta. To praktyczne narzędzie ma stać się częścią ich codziennej rutyny, zwiększając produktywność i efektywność. Wzmacnia to reputację firmy jako profesjonalnego i wiarygodnego partnera, dostarczając użytkownikom niezbędne informacje i pokazując zaangażowanie firmy w ich potrzeby.

✅ Vademecum Projektanta – dzielenie się wiedzą i wyjaśnianie terminów,
✅ Narzędzia DIALux – udostępnianie katalogu produktów jako wtyczki do DIALux,
✅ Akademia Projektanta – nauka obsługi narzędzi do projektowania 3D w DIALux,
✅ Spersonalizowane Projekty – pomoc inżynierom oświetlenia w razie potrzeby.

nowy ficzer

user-centric design

Konfigurator, który prowadzi za rękę

Projekt wymagał dodania konfiguratora produktów do nowej strony internetowej, a moją rolą było przeprowadzenie badań i zaproponowanie układu. Jednym z najtrudniejszych aspektów było analizowanie wszystkich danych i podejmowanie decyzji, co powinno zostać uwzględnione w konfiguratorze. Udało mi się zbalansować potrzeby użytkowników, przedstawicieli handlowych oraz interesariuszy, co pozwoliło mi dostarczyć MVP.

Jako developer low-code w projekcie, byłem również odpowiedzialny za budowę części zaplecza technicznego. Ponieważ konfigurator został opracowany po uruchomieniu strony, musiałem przeprojektować kilka struktur danych, aby uwzględnić decyzje dotyczące wyświetlanych informacji oraz logistyki samego konfiguratora. Dodało to znaczną ilość dodatkowej pracy do moich obowiązków.

Na podstawie listy wartości do skonfigurowania i ich kolejności, zaprojektowałem początkową, prostą wersję MVP. Wybrałem przejrzysty układ w dwóch kolumnach: po lewej stronie znajdują się listy rozwijane do wyboru, a po prawej stronie wyświetlają się wyniki konfiguracji.

✅ Prosty układ – niski próg wejścia,
✅ Wizualizacja produktu – jedno ogólne zdjęcie produktu,
❌ Zbyt wiele kroków – zbyt wiele niezrozumiałych wyborów do podjęcia,
❌ Niewidoczne opcje – wiele opcji zależy od poprzednich wyborów, więc nie są one widoczne,
❌ Brak standaryzacji – skomplikowane i przytłaczające w użyciu.

wersja 1.0.

Układ jest prosty i łatwy w obsłudze, z wyraźnym obrazem produktu, który ułatwia szybkie zrozumienie. Jednak proces zawiera zbyt wiele kroków, ukrytych opcji zależnych od wcześniejszych wyborów oraz brakuje standaryzacji, co powoduje zamieszanie. Aby to poprawić, należy uprościć wybory, wyraźnie ujawnić zależności i zapewnić spójny design na całej stronie.

Kolejnym problemem było to, że użytkownicy musieli dokonywać wyborów dwukrotnie: najpierw podczas wyszukiwania i filtrowania produktów, a potem ponownie na stronie konfiguratora. Aby rozwiązać ten problem, połączyłem te dwa przepływy użytkownika w jeden płynny proces. Rozpoczyna się on na stronie głównej, a kończy na wysłaniu zapytania i złożeniu zamówienia. Proponuję dodanie indywidualnych konfiguratorów do każdej strony produktu, co pozwoli użytkownikom dokonywać wyborów specyficznych dla danego produktu bezpośrednio na tej stronie.

✅ Tylko 6 kroków – typ, optyka, konstrukcja, połączenie, montaż i wersje opcjonalne,
✅ Lepsza architektura informacji – rozmiar, moc i strumień świetlny pokazane w jednym kroku,
✅ Wizualizacja każdego wyboru – lepsze zrozumienie i doświadczenie,
✅ Prosty język – brak potrzeby specjalistycznej wiedzy do wysłania zapytania.

✅ Only 6 steps - type, optics, construction, connection, mounting and optional versions,

✅ Better information architecture - size, power and luminous flux shown in one step,

✅ Each choice visualization - better understanding and experience,

✅ Simple language - no need for specialistic knowledge to send an inquiry,

wersja 2.0.

user-centric design

Czas na testowanie

Moim celem było ocenienie całego systemu (strony internetowej i konfiguratora) jako spójnej całości. Gdy MVP konfiguratora było gotowe do testów, dodałem dwa różne produkty i przeprowadziłem rozbudowane testy użyteczności z udziałem 10 rzeczywistych użytkowników, w wieku od 18 do 56 lat, o różnych poziomach umiejętności.

Użytkownik wypełniający ankietę jako ostatni krok testów użyteczności.

Użytkownik wypełnia ankietę w ostatnim kroku testów.

Proces rozpoczął się od krótkiego wywiadu, mającego na celu zrozumienie stopnia znajomości użytkowników z pojęciami oświetleniowymi, produktami ATM Lighting oraz ich motywacji do odwiedzenia strony internetowej. Następnie przeprowadzono testy użyteczności oparte na zadaniach, w których użytkownicy wykonywali dwa zadania, mające na celu ocenę użyteczności strony internetowej i konfiguratora produktów, koncentrując się na nawigacji, wyszukiwaniu informacji i konfiguracji produktów. Obserwacje oraz napotkane trudności zostały omówione szczegółowo podczas wywiadu pogłębionego (IDI), który miał na celu identyfikację dodatkowych problemów oraz zebranie ogólnych wrażeń z użytkowania systemu. Na końcu przeprowadzono ankietę, wykorzystującą System Usability Scale (SUS) do pomiaru użyteczności oraz Net Promoter Score (NPS) do oceny satysfakcji użytkowników.

Notatki z testów użyteczności.

Analiza klastrowa (Eisenhower Matrix).

redesign

Myląca kolejność kroków – KRYTYCZNE

Niektórzy użytkownicy mieli trudności ze zrozumieniem kolejności konfiguracji, co prowadziło do pomijania kroków lub wykonywania ich w niewłaściwej kolejności.

Aby nie zmuszać użytkowników do podejmowania decyzji w kwestiach, których mogą nie rozumieć, umożliwiłem im wysłanie zapytania bez konieczności wypełniania wszystkich pól. Jednak wielu użytkowników po prostu klikało na kroki, które przyciągnęły ich uwagę, często pomijając porządek procesu. W rezultacie, nieświadomie pomijali kroki przed wysłaniem zapytania.

Aby rozwiązać ten problem, zaleca się:

Numerowanie kroków,
Wizualne oznaczenie wykonanych kroków,
Zablokowanie możliwości pomijania kroków, dopóki cały proces nie zostanie ukończony,
Dodanie etapu podsumowania, który umożliwi edycję.

Niektórzy użytkownicy mieli trudności ze zrozumieniem kolejności konfiguracji, co prowadziło do pomijania kroków lub wykonywania ich w niewłaściwej kolejności.

Aby rozwiązać ten problem, zaleca się:

Numerowanie kroków,
Wizualne oznaczenie wykonanych kroków,
Zablokowanie możliwości pomijania kroków, dopóki cały proces nie zostanie ukończony,
Dodanie etapu podsumowania, który umożliwi edycję.

❌ Użytkownicy nieświadomie pomijają kroki,
❌ Stan hover dla pasków kroków jest taki sam jak kolor tła,
❌ Tylko niektóre kroki mają wartości domyślne.

wersja 2.0.

✅ Pomijanie kroków jest wyłączone. Edycja po etapie podsumowania,
✅ Każdy krok ma ustawioną wartość domyślną na początku,
✅ Dodatkowe notatki pod konfiguratorem.

wersja 3.0.

redesign

Brak odpowiedzi systemu - KRYTYCZNE

Użytkownicy czuli się zdezorientowani z powodu opóźnionego feedbacku systemu na ich wybory podczas procesu konfiguracji. Zarówno obrazy produktów, jak i opisy kroków nie aktualizują się w czasie rzeczywistym, a zamiast tego odświeżają się dopiero po przejściu do następnego kroku, co zakłóca ogólne doświadczenie użytkownika i wprowadza niepewność.

Informacje na pasku kroków powinny być odświeżane natychmiast po dokonaniu wyboru, zamiast czekać, aż użytkownik przejdzie do kolejnego kroku.

❌ Wartość na aktywnym pasku widoczna dopiero po przejściu dalej.

wersja 2.0.

✅ Wartość na pasku zmienia się w chwili dokonania wyboru.

wersja 3.0.

redesign

Umiejscowienie konfiguratora - POWAŻNE

Użytkownicy wyrazili dezorientację i poczucie zagubienia, gdy konfigurator otwierał się w nowej karcie przeglądarki.

Użytkownicy testowali wersję 2.0 konfiguratora, który otwierał się w nowej karcie. Część z nich czuła się zagubiona, próbując sprawdzić specyfikacje produktu i miała trudności ze znalezieniem odpowiedniej karty z oprawą oświetleniową. Projektanci Oświetlenia wspominali, że otwieranie wielu kart podczas poszukiwań wprowadzało chaos i dezorientację, dlatego preferowali, aby karty katalogowe były dostępne bezpośrednio na stronie.

Zdecydowałem się osadzić konfigurator w zakładce „Konfigurator” na stronie produktu, zapewniając łatwy dostęp do specyfikacji i kart katalogowych. Konfigurator powinien otwierać się po kliknięciu przycisku „Skonfiguruj oprawę”. Dodatkowo, konfigurator powinien zachować swoje ustawienia, gdy użytkownicy przełączają się między zakładkami na stronie produktu.

Użytkownicy wyrazili dezorientację i poczucie zagubienia, gdy konfigurator otwierał się w nowej karcie przeglądarki.