Back
Platforma do porównywania samochodów elektrycznych według zasięgu, ceny i specyfikacji
Cel projektu
Zbudować platformę, na której każdy rozważający kupno samochodu elektrycznego znajdzie dowolny model, zawęzi listę do tych pasujących i porówna je rzetelnie według danych, które decydują o zakupie.
Zakres prac
Projektowanie marki
Projektowanie UX/UI
Development
Czas trwania
Czerwiec-listopad 2024
Technologie
Laravel
Backpack CMS
Next.js
Redis
Klient
EV Data Compare
Kupno samochodu elektrycznego oznacza porównywanie liczb, których trudno się doszukać
Nasz klient przyszedł do nas z Francji z problemem wartym rozwiązania. Każdy, kto kupuje samochód elektryczny, trafia na ten sam mur. Dane, które naprawdę mają znaczenie - realny zasięg, efektywność, szybkość ładowania, koszt na danym rynku - są rozproszone, niespójne między źródłami i subtelnie różnią się z rocznika na rocznik. EV Data Compare chciał to naprawić jednym miejscem z dokładnymi danymi o każdym modelu. Zbudowaliśmy wszystko: od marki przez projekt po samą platformę.
Zaczęliśmy od rozmów, nie od kodu
Nie projektowaliśmy niczego, dopóki nie zrozumieliśmy produktu. Zaczęliśmy od warsztatu kickoff, podczas którego ustaliliśmy, co platforma ma robić, dla kogo jest i skąd będą pochodzić dane. Dopiero po zamknięciu koncepcji i wymagań przeszliśmy dalej. To oczywisty krok, który w praktyce często jest pomijany.
Pięć rund wireframów, zanim powstał pierwszy piksel projektu
Potem przyszły wireframy. Nie spieszyliśmy się. Frontend użytkownika przeszedł pięć iteracji. Backoffice przeszedł pięć własnych. Każda runda zacieśniała strukturę aż przepływy się trzymały. Następnie napisaliśmy dokumentację i specyfikacje, połączyliśmy ekrany w interaktywny prototyp i przekazaliśmy go programistom z podjętymi już decyzjami. Podejmowanie tych decyzji na papierze jest tanie. W kodzie już nie.
Dopiero potem wybraliśmy technologię
Mając gotową koncepcję, dobraliśmy do niej stos technologiczny, a nie odwrotnie. Podzieliliśmy platformę na oddzielne serwisy. Laravel z Backpackiem obsługuje backend, w którym żyją dane i pracują redaktorzy. Next.js renderuje frontend, dzięki czemu obszerny katalog działa lekko. Obok stoi Redis z buforowanymi danymi, bo platforma, której cały sens to tabele z danymi, nie może pozwolić sobie na powolne ich wyświetlanie.
Marka i design system zbudowany dla produktu nasyconego danymi
Zaprojektowaliśmy markę od podstaw, potem zbudowaliśmy design system, na którym stoi platforma. Produkt złożony głównie z liczb musi być przejrzysty, więc zadbaliśmy, by gęste tabele danych były czytelne, a nie męczące. Każdy ekran, od listinguu po pojedynczy pojazd, pochodzi z tego samego zestawu komponentów.
Filtry zawężające pełny katalog do krótkiej listy
Listing to miejsce, od którego zaczyna większość odwiedzin, więc filtrowanie musiało być jednocześnie szybkie i głębokie. Można zawężać wyniki według tego, co kogo interesuje - cena, zasięg, napęd, bateria, segment i wiele więcej - obserwując na co dzień, jak lista reaguje. Wyniki da się przeglądać jako karty albo jako tabelę, gdy ktoś chce mieć liczby obok siebie. Filtry podążają za odwiedzającym: przetrwają przełączenie między jednostkami metrycznymi a imperialnymi, przenoszą się między językami i zostają z tobą, gdy zakładasz konto. Zalogowani użytkownicy mogą je zapisywać w osobnych listach.
Widok porównania na moment przed wydaniem prawdziwych pieniędzy
Porównanie to serce całej platformy. Wybierz zestaw samochodów i zobacz je zestawione obok siebie, z wyróżnionymi różnicami, żeby niczego nie trzeba było wypatrywać. Zestawienie eksportuje się do CSV albo do raportu PDF, który można przeczytać z dala od ekranu.
Każda generacja modelu - widać, co naprawdę zmienił lifting
To część, którą lubimy najbardziej. Samochody elektryczne zmieniają się szybko - Lifting może po cichu dodać zasięgu albo znacząco skrócić czas ładowania, choć nazwa na klapie bagażnika zostaje ta sama. Dlatego strona pojazdu nie pokazuje tylko obecnej wersji. Otwiera wcześniejsze generacje modelu, inne wersje tego samego samochodu i resztę asortymentu marki, co pozwala dokładnie zobaczyć, co poprawiło się z rocznika na rocznik. Dla kogoś, kto kupuje samochód używany, ta różnica przesądza o decyzji.
Czytelnicy, którzy zauważą błędną liczbę, mogą to zgłosić
Platforma danych jest tyle warta, ile jej dane. Osoby, które jako pierwsze zauważają błąd, to zazwyczaj czytelnicy. Pozwoliliśmy im więc go zgłaszać. Każdy może oznaczyć konkretny parametr, który uważa za błędny, lub wysłać ogólną opinię o platformie. Zgłoszenie trafia do backoffice jako rozbieżność do sprawdzenia przez zespół. Zamienia to czytelników w cichą warstwę kontroli jakości, czyli dokładnie w to, czego potrzebuje katalog tej wielkości.
Backoffice zbudowany wokół utrzymania wiarygodności danych
Za kulisami stoi Backpack CMS ukształtowany wokół jednego zadania: utrzymywania poprawności tysięcy liczb. Redaktorzy zarządzają pojazdami, przerabiają zgłoszone rozbieżności i zatwierdzają oczekujące zmiany, zanim cokolwiek trafi na stronę, a operacje masowe pomagają, gdy cała partia wymaga tej samej zmiany. Dziennik historii rejestruje, kto, co i kiedy zmienił. Wpisanie wartości metrycznej powoduje automatyczne uzupełnienie jej odpowiednika imperialnego. Zespół prowadzi też blog, reklamy i konfigurację platformy z tego samego miejsca, wraz z modułem dziesięciu najpopularniejszych pojazdów w każdym kraju. API pozwala dodawać i aktualizować pojazdy programowo, gdy trafiają do bazy hurtowo.
SEO wbudowane w projekt, nie doklejone po fakcie
Platforma żyje z wyszukiwania, więc traktowaliśmy SEO jako część inżynierii. Dane strukturalne są publikowane na stronach pojazdów i w FAQ, więc wyniki wyświetlają się w rozszerzonej, a nie zwykłej formie. Adresy kanoniczne, hreflang i mapa strony pilnują, by kilka języków i krajów nie wchodziło sobie w drogę. Zmiana sluga powoduje stworzenie automatycznego przekierowania. Filtrowane listingi, które zasługują na indeksowanie, są indeksowane, a reszta nie przeszkadza. Nawet tekst alt obrazów jest generowany automatycznie w trakcie przesyłania - przy tak dużym katalogu robienie wszystkiego ręcznie nie wchodzi w grę. Core Web Vitals traktowaliśmy tak samo poważnie, więc skorzystaliśmy z takich rozwiązań jak Cloudflare.
Efekt
Dostarczyliśmy pełną platformę: markę, design system, szybki frontend i backoffice zbudowany po to, by liczby pozostawały poprawne. Czymś więcej niż suchymi danymi czynią ją trzy rzeczy: porównanie wyróżniające różnice, obsługa różnych generacji samochodu pokazująca, co zmienił lifting w każdym pojeździe, i czytelnicy, którzy mogą zgłosić błędną liczbę i dostać podziękowanie, jak zostaje poprawiona.
Porozmawiajmy o Twoim projekcie!
Opowiedz nam o swoim projekcie. Pomożemy zaplanować architekturę, zakres i realizację.
