Portfolio > R-Cars
Salon luksusowych samochodów
Case
Stworzenie
portalu ofertowego
Rola
UX/UI Designer, WordPress Developer
Cel
– Zbudować elegancką i bezpieczną witrynę
– Generowała leadów wysokiej jakości
Narzędzia
Figma | WordPress | Google Analytics | HotJar | Adobe Photoshop
Czas trwania
7 Tygodnii
75% wzrostu sprzedaży,
już w pierwszym miesiącu, działania strony.
Zobacz, jak przyczyniłem się do sukcesu marki premium R-CARS – po raz kolejny udowadniając, że dobry UX zaczyna się od słuchania i analizy, a nie od samej warstwy wizualnej.
Wstęp
Kontekst > Problem > Cele > Metodologia
Kontekst projektu
Klient pozostawał bez aktywnej strony internetowej przez blisko rok, co negatywnie wpływało na jego możliwości dotarcia do nowych klientów.
W odpowiedzi na niezadowolenie z dotychczasowej strony wizytówki, właściciel warszawskiego salonu samochodów premium (marki takie jak Porsche, Jaguar, Maseratti, Audi, …) zwrócił się do mnie o kompleksowe stworzenie witryny. Kluczowym założeniem projektu było stworzenie narzędzia do prezentacji oferty oraz generowania leadów, a nie bezpośrednia sprzedaż online.
Nowa strona miała odzwierciedlać ekskluzywny, minimalistyczny i elegancki charakter marki.
Problem
Brak obecności online
Klient polegał wyłącznie na serwisie Otomoto, ale chciał odzyskać kontrolę nad wizerunkiem marki i generować własne leady.
Cele
- Zbudować elegancką i bezpieczną witrynę
- Generowała leadów wysokiej jakości
⚡️ Wyzwanie:
Jak stworzyć stronę, która dorówna w zaufaniu portalowi Otomoto.pl?
Metodologia
Zanim w ogóle otworzę Figmę czy WordPressa...
Z doświadczenia wiem, że choć projektowanie w Figma czy budowanie strony w WordPressie to najbardziej czasochłonne etapy, najważniejsze decyzje projektowe zapadają dużo wcześniej.
Często największy postęp można osiągnąć jeszcze zanim uruchomi się jakiekolwiek narzędzie – przez rozmowy z klientem, analizę potrzeb użytkowników, szkice na kartce czy przemyślenie struktury informacji. To właśnie ten etap decyduje o tym, czy projekt będzie skuteczny – i czy praca w narzędziach będzie szybka i uporządkowana, czy pełna niepotrzebnych iteracji.
🤔 Indywidualne podejście do każdego projektu:
Nie istnieje uniwersalne rozwiązanie, które sprawdzi się we wszystkich przypadkach.
Każdy projekt jest unikalny i wymaga indywidualnego podejścia.
Pierwszym krokiem jest dokładne zrozumienie problemu, co pozwala na dobór najbardziej odpowiednich technik badawczych.
W przypadku tego konkretnego projektu cel jest znany:
„Stworzyć nową stronę internetową”
Jest to konkretny i mierzalny cel, któremu mamy możliwość określenia ram czasowych.
Metoda Double Diamond
Jej główną zaletą jest uporządkowanie procesu projektowego w sposób, który minimalizuje ryzyko błędnych założeń i pozwala podejmować decyzje na podstawie realnych danych, a nie domysłów.
Zamiast od razu przechodzić do projektowania, najpierw – w fazie odkrywania – skupiłem się na zrozumieniu branży klienta, jego celów oraz oczekiwań grupy docelowej. Dzięki temu szybko zauważyłem, że użytkownicy cenią sobie prostotę i łatwy dostęp do informacji, a nie rozbudowane efekty wizualne.
Następnie, w fazie definiowania, mogłem jasno określić, że głównym celem strony ma być skuteczne prezentowanie ofert, a nie np. budowanie marki przez storytelling. To pomogło mi uniknąć zbędnych funkcjonalności i skupić się na tym, co naprawdę istotne.
Z kolei w fazie rozwijania testowałem różne wersje układu i treści, aby sprawdzić, co najlepiej trafia do odbiorców – np. czy oferta powinna być od razu na stronie głównej, czy lepiej działa osobna zakładka. Dzięki temu końcowa wersja strony była nie tylko estetyczna, ale też dobrze dopasowana do realnych potrzeb użytkowników i celów biznesowych klienta.
Design Process
Research > WordPress > Design > Implementacja
Research
Discovery
1. Analiza danych zastanych
(Secondary Research)
Ponieważ salon działa od wielu lat, miałem zbiór już zgromadzonych danych. Obejmują one głównie historię sprzedanych pojazdów oraz wgląd do grupy odbiorczej.
(Co pozwoliło określić styl oraz język strony)
2. Analiza konkurencji
Otrzymałem kilka przykładów stron firm podobnych oraz bezpośrednich konkurentów na rynku. Analiza tych witryn uświadomiła mi, że grupa docelowa nie jest zainteresowana wymyślnym, bogatym designem, lecz ceni prostotę, przejrzystość i konkretne informacje.
3. Analiza Potrzeb(Użytkowników i Biznesowych)
Rozmowy z właścicielem, jego pracownikami oraz znajomymi pasjonatami motoryzacji pozwoliły zidentyfikować, czego oczekują odbiorcy przy przeglądaniu ofert samochodowych.
Aby uniknąć tak zwanego „Mere-exposure effect„, odwiedziłem największe fora motoryzacyjne (takie jak Forum.auto.com.pl), aby zapoznać się z powtarzającymi się problemami użytkowników).
Podsumowanie
Wstępnie zapoznałem się z branżą, przeanalizowałem konkurencję oraz wyodrębniłem grupę docelową, do której strona musi być dopasowana.
Teraz kluczowym celem jest stworzenie podstawowej wersji strony (MVP), umożliwiającej już publikację ofert. Każdy dzień opóźnienia to utrata potencjalnych klientów.
Następne kroki...
Wykupienie hostingu (domena jest już wykupiona), zbudowanie strony MVP z modułem ofert.
WordPress
Define
Środowisko strony
Do stworzenia responsywnej i łatwej w zarządzaniu strony internetowej wybrano platformę WordPress w połączeniu z kreatorem Elementor. Takie rozwiązanie umożliwiło szybkie i wizualne zaprojektowanie ekskluzywnego interfejsu oraz zapewniło klientowi intuicyjny system do zarządzania treścią i ofertami.
Architektura informacji
Znając już potrzeby użytkowników, skupiłem się na tym, aby pierwszy ekran (hero section) od razu komunikował kluczową wartość oferty – że nie jest to przypadkowy salon samochodowy, ale miejsce oferujące starannie wyselekcjonowane, luksusowe samochody. Zależało mi, aby już na pierwszy rzut oka użytkownik poczuł, że ma do czynienia z marką godną zaufania.
Kolejny krok to czytelne zaprezentowanie oferty – stworzyłem sekcję z kategoriami pojazdów (daje to możliwość przejścia do interesujących użytkownika modeli). Ważne było dla mnie, aby użytkownik nie czuł się przytłoczony.
W dalszej części strony skoncentrowałem się na budowaniu zaufania, dodając elementy takie jak:
zdjęcia zadowolonych klientów,
krótka historia i misja firmy,
logotypy znanych partnerów biznesowych i dostawców, co miało wspierać pozytywny wizerunek i zwiększać wiarygodność.
Stronę zakończyłem sekcją kontaktową z czytelnym CTA, danymi firmy oraz mapą, aby maksymalnie ułatwić użytkownikowi wykonanie ostatniego kroku – nawiązania kontaktu.
Cała struktura strony została zaplanowana w oparciu o klasyczny lejek sprzedażowy, prowadząc użytkownika krok po kroku od zainteresowania, przez poznanie oferty i zbudowanie zaufania, aż po konwersję.
Meeting time 🗣️
Organizuję spotkanie z klientem, na którym:
- Prezentuję pierwsze szkice i zamysł strony.
- Przedstawiam plan brandingu (spójności wizualnej marki)
- Ustalamy dalsze kroki i terminy wdrożenia projektu
Następne kroki... 👣
Design
Develop
Budowanie szablonu
Podczas jednego ze spotkań z klientem ustaliliśmy, że głównym źródłem ruchu na stronie będą kampanie marketingowe kierujące bezpośrednio na konkretne oferty pojazdów. Z tego względu zakładka z ofertami stała się absolutnym priorytetem w całym procesie projektowania. Wiedziałem też, że kiedy dopracuję tę sekcję, będę mógł wykorzystać stworzone komponenty, style i układ jako bazę do budowy pozostałych, bardziej informacyjnych podstron – co znacząco przyspieszy dalsze prace.
Projektując stronę główną, skupiłem się na tym, aby od razu przyciągała uwagę zdjęciami pojazdów i podkreślała ich najważniejsze cechy – takie jak rocznik, przebieg, marka czy cena. Z researchu wynikało, że to właśnie te informacje użytkownicy porównują w pierwszej kolejności, dlatego zadbałem, aby były czytelne i dostępne bez potrzeby przewijania strony – wszystko, co kluczowe, miało znaleźć się na pierwszym ekranie.
Przygotowując szczegóły oferty, zdecydowałem się na zastosowanie rozwijanych akordeonów, które podzieliłem tematycznie (np. dane techniczne, wyposażenie, historia pojazdu). Była to odpowiedź na realny insight: analizując maile i pytania klientów, zauważyłem, że choć opisy ofert były bogate w informacje, wiele z nich było pomijanych z powodu zbyt długiej i zwartej formy. Postanowiłem więc przekształcić te treści w bardziej atrakcyjne i interaktywne sekcje, które użytkownik może przeglądać selektywnie – zależnie od tego, co go interesuje.
Dodatkowo, klient często dodawał do ofert uniwersalne informacje powtarzające się w wielu ogłoszeniach – stworzyłem więc dla niego dedykowaną sekcję, którą można łatwo ponownie wykorzystać, co znacząco usprawnia proces dodawania nowych pojazdów.
Ponieważ każdym pojazdem opiekuje się inny handlowiec, zaprojektowałem dynamiczną sekcję kontaktu, która dostosowuje się do konkretnej oferty – użytkownik od razu widzi, z kim może się skontaktować w sprawie danego auta.
Na wszystkich podstronach umieściłem też elementy budujące zaufanie: dane firmy, dane kontaktowe oraz mapę z lokalizacją salonu. Sprzedawane auta są wysokiej klasy, a salon jest tylko jeden, dlatego wiedziałem, że jeśli strona nie wzbudzi odpowiedniego zaufania – użytkownicy mogą nie zdecydować się na wielogodzinną podróż. Stworzenie poczucia wiarygodności było więc nie tylko celem UX-owym, ale też kluczowym wyzwaniem biznesowym.
Implementacja
Deliver
Przygotowanie strony głównej
Tak jak opisałem w poprzedniej sekcji, strona główna została zaprojektowana w oparciu o model lejka konwersji. Ustaliliśmy, że jej początek będzie stanowił specjalnie nagrany film wprowadzający, który ma przyciągnąć uwagę i zbudować pierwsze wrażenie profesjonalizmu. Następnie użytkownik trafia na wyselekcjonowane kategorie pojazdów – te, które cieszą się największym zainteresowaniem i generują najwięcej zapytań. Kolejne sekcje skupiają się już na budowaniu zaufania: pokazujemy opinie klientów, historię firmy, logotypy partnerów oraz dane kontaktowe. Całość kończy się dobrze widocznym i łatwo dostępnym formularzem kontaktowym.
Szkic
Implementacja
Przygotowanie strony głównej przebiegło sprawnie, ponieważ mogłem wykorzystać wiele gotowych komponentów i stylów, które opracowałem wcześniej podczas projektowania szablonu oferty.
Po 7 tygodniach prac, strona ujrzała światło dzienne i była gotowa do użytkowania.
Podsumowanie
Wyniki > Refleksje > Podsumowanie
Podsumowanie projektu
Projekt został zrealizowany w 7 tygodni jako kompleksowe wdrożenie nowej strony internetowej i odświeżenia wizerunku salonu aut premium. Największym wyzwaniem był brak wcześniejszych danych oraz konieczność stworzenia funkcjonalnego systemu ogłoszeń od zera, odpowiadającego na wysokie wymagania użytkowników. Dzięki iteracyjnemu podejściu, bliskiej współpracy z klientem i analizie realnych zachowań odbiorców, udało się stworzyć eleganckie, intuicyjne narzędzie, które klient może samodzielnie rozwijać.
Kluczowe osiągnięcia
- Spójny, minimalistyczny branding oddający charakter marki premium
- Szablon ogłoszenia oparty na realnych potrzebach użytkowników
- Przejrzysty CMS i przeszkolony zespół po stronie klienta
Rezultaty prac
Wyniki
Już w pierwszym miesiącu klient zanotował
- Wzrost Sprzedaży:
O prawie 75% dzięki generowanym leadom.
- Zwrot Inwestycji:
Całkowity koszt projektu zwrócił się dzięki wysokiej efektywności pozyskiwania zapytań, co potwierdziło trafność przyjętej strategii.
- Generowanie leadów:
Jasna atrybucja leadów bezpośrednio z interakcji na stronie pozwala ustalić czego klienci potrzebują i czym są zainteresowani
Wnioski i refleksje
Czego się nauczyłem
Ten projekt był cennym doświadczeniem zarówno w kontekście pracy z branżą premium, jak i projektowania rozwiązań, które realnie wspierają cele biznesowe. Szczególnie wartościowe okazało się budowanie architektury informacji i szablonów treści w oparciu o dane z HotJara oraz rozmowy z użytkownikami — potwierdziło to, że dobry UX zaczyna się od słuchania i analizy, a nie od wizualnych rozwiązań.
Podsumowując
-
Użytkownicy szukają konkretów, nie fajerwerków.
W branży motoryzacyjnej kluczowe są dane techniczne i klarowna prezentacja, nie kreatywne animacje.
-
Szkolenie klienta to część UX.
Nawet najlepiej zaprojektowane narzędzie traci sens, jeśli nie jest używane zgodnie z założeniami — dlatego zadbanie o onboarding zespołu było równie ważne jak sam projekt.
-
Warto zostawiać przestrzeń na rozwój.
Strona została zbudowana tak, by z czasem można było ją rozwijać o nowe funkcje (np. filtrację, system rezerwacji), bez konieczności przebudowy od zera.
Następne kroki
- Monitoring i mikrooptymalizacje:
Regularna analiza zachowań użytkowników i wprowadzanie drobnych usprawnień, bazując na danych.
- Rozbudowa funkcjonalności:
Możliwość dodania filtrów wyszukiwania, integracji z zewnętrznymi systemami i ulepszenia wersji mobilnej.
- Wsparcie w rozwoju marki online:
Konsultacje dotyczące content marketingu i dalszej rozbudowy obecności cyfrowej.
Galeria
