--- title: "Overmax: projekt UX/UI sklepu z autami RC" description: "Projekt UX/UI sklepu Overmax z autami RC: karta produktu, menu kategorii, porównywarka i test, który pomaga dobrać model dla siebie." url: https://fluostudio.pl/projekty/overmax/ --- Overmax · UI/UX Design # Sklep, w którym auta RC wyglądają jak z „Szybkich i wściekłych” Projekt UX/UI sklepu Overmax: auta RC w filmowych ujęciach, dopracowana karta produktu, menu kategorii i test, który dobiera model. Zobacz, jak powstał Cel projektu ## Auta RC w filmowych ujęciach - Buntowniczość - Zabawa - Storytelling Overmax przyszedł do nas z jasnym celem: modele RC na nowej stronie mają wyglądać jak auta z „Szybkich i wściekłych”, a nie jak zabawki z półki. Od pierwszego ekranu odwiedzający ma czuć się w środku akcji, a emocje dostawać w standardzie, razem z modelem. Dlatego produkty pokazujemy jak w kinie: w niskich kadrach, w kurzu spod kół, w rozbryzgach wody i kolorowym dymie. Na stronie dużo się dzieje: film w pierwszym ekranie, przesuwane kategorie, zdjęcia z jazdy po najechaniu na kafel, liczby i hasła zmieniające się przy przewijaniu karty produktu. Prezentacja buduje pożądanie i chęć posiadania, a sklep zostaje przejrzysty. Karta produktu, menu, test i porównywarka prowadzą prosto do wyboru modelu. Film z pierwszego ekranu overmax.pl - ![Niebieski buggy X-Horizon w pustynnym kurzu](https://fluostudio.pl/media/projekty/overmax/kadr-stadium.webp) - ![Zielony X-Monster na skałach](https://fluostudio.pl/media/projekty/overmax/kadr-monster.webp) - ![Niebieski short course truck w kurzu na plaży](https://fluostudio.pl/media/projekty/overmax/kadr-short.webp) - ![Auto do driftu w różowym i limonkowym dymie](https://fluostudio.pl/media/projekty/overmax/kadr-drift.webp) - ![Rozbryzgi wody na morzu](https://fluostudio.pl/media/projekty/overmax/kadr-boats.webp) Film i zdjęcia kategorii z overmax.pl. 01 Najpierw telefon ## Koncepcję pokazaliśmy na karcie produktu, nie na stronie głównej Większość klientów Overmax ogląda sklep na telefonie, a najważniejszym widokiem jest dla nich karta modelu. Dlatego pierwszą koncepcję wizualną zbudowaliśmy na mobilnej karcie X-Hooligana, a stronę główną i resztę widoków dopiero na niej. Interakcje miały być nowoczesne, ale proste we wdrożeniu: przewijanie w poziomie, zmiany ekranu w miejscu, wideo i hover, bez ciężkich efektów, które trudno przenieść do sklepu. ![Karta produktu X-Hooligan na overmax.pl w wersji na telefon](https://fluostudio.pl/media/projekty/overmax/zywa-karta-390.webp) overmax.pl, karta X-Hooligan 02 Karta produktu ## Karta produktu, najbardziej dopracowany widok w sklepie Na karcie produktu zapada decyzja o zakupie, więc dopracowaliśmy na niej każdy fragment. Ułożyliśmy ją na X-Hooliganie: galeria i cena na górze, parametry w kafelkach z ikonami, hasła i liczby zmieniające się przy przewijaniu, sceny z jazdy w poziomie, specyfikacja w rozwijanych grupach, a na końcu zestaw, pytania i pliki do pobrania. ![X-Hooligan z napisem w gradiencie z niebieskiego w turkus](https://fluostudio.pl/media/projekty/overmax/x-hooligan-baner.webp) - **35 km/h** prędkość maksymalna - **40 min** łącznego czasu jazdy - **4WD** napęd na cztery koła - **1:10** skala, duży model - **14+** wiek kierowcy 1. Więcej mocy 2. Więcej prędkości 3. Więcej adrenaliny **4×4** Napęd na wszystkie koła ![X-Hooligan w niebieskim i pomarańczowym pyle](https://fluostudio.pl/media/projekty/overmax/wiecej-moc.webp) **35 km/h** Prędkość maksymalna ![X-Hooligan z chmurą pyłu za tylnymi kołami](https://fluostudio.pl/media/projekty/overmax/wiecej-predkosc.webp) **do 40 min** Czas działania baterii ![Zbliżenie na maskę X-Hooligana](https://fluostudio.pl/media/projekty/overmax/wiecej-adrenalina.webp) Towarzysz każdej przygody - ![Czerwony X-Hooligan na skałach](https://fluostudio.pl/media/projekty/overmax/scena-3.webp) Duży rozmiar - ![Niebieski X-Hooligan wjeżdża na piaszczystą wydmę](https://fluostudio.pl/media/projekty/overmax/scena-4.webp) Zawieszenie do ustawienia - ![Zbliżenie na przednie koło i amortyzator X-Hooligana](https://fluostudio.pl/media/projekty/overmax/scena-1.webp) Amortyzatory hydrauliczne - ![X-Hooligan w skoku nad rampą](https://fluostudio.pl/media/projekty/overmax/scena-5.webp) Daj się zauważyć na torze Specyfikacja szczegółowa Specyfikacja ogólna Rodzaj pojazdu Short Course Truck Typ terenu Teren Styl jazdy Szybka jazda Poziom Średniozaawansowany Wymiary Długość 420 mm Szerokość 270 mm Wysokość 175 mm Waga z baterią 2,02 kg Osiągi i parametry Silnik szczotkowy, 2000 KV Bateria Li-Po 7,4 V, 1800 mAh Czas na jednej baterii 20 min Zasięg 100 m Napęd i zawieszenie Napęd 4WD Dyferencjały przedni i tylny Zawieszenie niezależne Amortyzatory metalowe, hydrauliczne Detale karty - 01 ### Pasek zakupu Na telefonie cena, przycisk „Dodaj do koszyka” i porównanie zostają na dole ekranu przez całą kartę. - 02 ### Brak w sklepie Osobny stan karty i kafelka, gdy modelu chwilowo nie ma. - 03 ### Po dodaniu do koszyka Osobno zaprojektowany widok, który pojawia się po kliknięciu „Dodaj do koszyka”. Dane z karty produktu na overmax.pl. ![Listing produktów, strona główna i karta X-Hooligan obok siebie](https://fluostudio.pl/media/projekty/overmax/duze-ekrany.webp) 03 Menu produktów ## Cała oferta w jednym rozwijanym menu Po kliknięciu „Produkty” rozwija się pięć kafli kategorii. Każdy ma własny gradient, nazwę i liczbę modeli. Zdjęcie z jazdy pojawia się dopiero po najechaniu, więc w spoczynku kafel nie wygląda jak konkretny produkt. Obok przycisku „Produkty” stoi „Znajdź produkt dla siebie”, a pod kaflami jest jeszcze jeden skrót do testu dla tych, którzy nie wiedzą, od czego zacząć. Znajdź produkt dla siebie - 4 modele Stadium Trucks - 6 modeli Monster Trucks - 2 modele Short Course Trucks - 3 modele Drift & Drag - 2 modele Boats Nie wiesz, który produkt jest dla Ciebie odpowiedni? Wypełnij test Kafle i liczby modeli z menu na overmax.pl. 04 Znajdź produkt dla siebie ## Test, który w kilku pytaniach dobiera model Kto nie zna się na modelach RC, odpowiada na kilka pytań: gdzie chce jeździć, po jakim terenie i jak ocenia swoje umiejętności. Każda odpowiedź zawęża listę, a na końcu zostają tylko modele, które pasują. Poniżej działa ta sama logika co na overmax.pl. Pytania i polecane modele z testu na overmax.pl. ![Strona główna Overmax „Beyond limits” na telefonie opartym o betonowy blok](https://fluostudio.pl/media/projekty/overmax/duze-telefon-kamien.webp) 05 Kategorie ## Pięć kategorii, każda z innym charakterem jazdy Na stronie głównej kategorie przesuwają się jak na torze: wielka nazwa w tle, model na pierwszym planie. Wybierz kategorię Stadium Trucks Monster Trucks Short Course Drift & Drag Boats ![X-Clash, kategoria Stadium Trucks](https://fluostudio.pl/media/projekty/overmax/auto-x-clash.webp) X-Clash - Skala 1:22 - Asfalt - Od 8 lat ![X-Monster 3.5, kategoria Monster Trucks](https://fluostudio.pl/media/projekty/overmax/auto-x-monster-35.webp) X-Monster 3.5 - Skala 1:18 - Akrobacje w terenie - Od 14 lat ![X-Hooligan, kategoria Short Course](https://fluostudio.pl/media/projekty/overmax/auto-x-hooligan.webp) X-Hooligan - Skala 1:10 - 35 km/h - Od 14 lat ![X-Tireburner, kategoria Drift & Drag](https://fluostudio.pl/media/projekty/overmax/auto-x-tireburner.webp) X-Tireburner - Skala 1:16 - Drift na asfalcie - Od 8 lat ![X-Surge, kategoria Boats](https://fluostudio.pl/media/projekty/overmax/auto-x-surge.webp) X-Surge - Motorówka RC - Zasięg 100 m - 2,4 GHz ![Strona główna Overmax na komputerze i trzy widoki na telefonie](https://fluostudio.pl/media/projekty/overmax/strona-www.webp) 06 Porównywarka ## Porównanie, które od razu pokazuje różnice Modele w jednej kategorii bywają do siebie bardzo podobne. W porównywarce dodaliśmy przełącznik, który chowa wszystkie identyczne parametry. Modele w porównaniu X-Hooligan X-Monster 3.0 X-Monster 3.5 X-Tireburner X-Clash Pokaż tylko różnice Porównanie parametrów modeli Overmax | Parametr | X-Hooligan | X-Monster 3.0 | X-Monster 3.5 | X-Tireburner | X-Clash | | --- | --- | --- | --- | --- | --- | | Specyfikacja ogólna | | Rodzaj pojazdu | Short Course | Monster Truck | Monster Truck | Drift & Drag | Stadium Truck | | Typ terenu | Teren | Teren | Teren | Asfalt | Asfalt | | Skala | 1:10 | 1:18 | 1:18 | 1:16 | 1:22 | | Wiek | 14+ | 14+ | 14+ | 8+ | 8+ | | Osiągi i parametry | | Prędkość maksymalna | 35 km/h | 30 km/h | 30 km/h | 20 km/h | 20 km/h | | Silnik | 2000 KV | 2800 KV | 2800 KV | 2100 KV | 3000 KV | | Napęd | 4WD | 4WD | 4WD | 4WD | 2WD | | Czas na jednej baterii | 20 min | 20 min | 20 min | 20 min | 15 min | | Wymiary i zestaw | | Waga z baterią | 2,02 kg | 0,86 kg | 0,90 kg | 0,49 kg | 0,39 kg | | Długość | 420 mm | 260 mm | 260 mm | 297 mm | 215 mm | | Druga karoseria w zestawie | Nie | Nie | Tak | Tak | Tak | Dane z kart produktów na overmax.pl. 07 Dlaczego Overmax ## Cztery słowa, które rozwijają się same Wyróżniki marki na stronie głównej otwierają się na kilka sposobów naraz: przy przewijaniu, po najechaniu kursorem i po dotknięciu na telefonie. Tak ustaliliśmy w rundzie uwag, bo samo przewijanie nie zawsze wystarczało, żeby opis był czytelny. 1. Wyścigi, terenowe przygody i dłubanie przy własnym modelu. Prawdziwe przeżycia zamiast kolejnego ekranu. 2. Bez względu na wiek i doświadczenie. „Beyond limits” to zaproszenie do zabawy poza szkołą, pracą i codziennymi regułami. 3. Trwałe materiały i konstrukcja, która wyciska maksimum z każdego elementu, żeby model długo jeździł jak nowy. 4. Modele RC jako pretekst do spotkań. Amatorzy i doświadczeni pasjonaci na jednym torze. Opisy na podstawie treści marki na overmax.pl. ![Koszyk, karta produktu i sekcja „Dlaczego warto wybrać Overmax” na telefonie](https://fluostudio.pl/media/projekty/overmax/duze-telefony.webp) 08 Niebieski na czerni ## Jaśniejszy niebieski, żeby nie ginął w ciemności Serwis jest ciemny, jak wieczorny tor. Podstawowy niebieski Overmax okazał się na czarnym tle za ciemny, więc w projekcie sięgnęliśmy po jaśniejszy niebieski z linii samochodów. Nagłówki dostały szeroki krój Zalando Sans Expanded, tekst Inter. - **Niebieski** #3070eb - **Czerń** #0c0c0c - **Biel** #ffffff Beyond limits Grubość kroju Zalando Sans Expanded 700 09 Jak pracowaliśmy ## Siedem okrążeń od warsztatów do plików dla programistów 1. Okrążenie 1/7 ### Warsztaty Z zespołem marki ustaliliśmy cele strony, odbiorców i charakter, jaki ma mieć serwis. 2. Okrążenie 2/7 ### Makieta funkcjonalna Strona główna, menu, listing, karta produktu, wyszukiwarka, porównywarka i miejsce na treści społeczności. 3. Okrążenie 3/7 ### Koncepcja na telefonie Kierunek wizualny pokazany najpierw na mobilnej karcie X-Hooligana, bo tam dzieje się najwięcej. 4. Okrążenie 4/7 ### Krój i kolor Zalando Sans Expanded w nagłówkach, Inter w tekście i jaśniejszy niebieski pod ciemne tła. 5. Okrążenie 5/7 ### Rundy uwag Menu jako czytelna lista, karuzele z kropkami na telefonie, wyróżniki otwierane dotknięciem, ikony w nowym stylu. 6. Okrążenie 6/7 ### Stany i wyjątki Produkt niedostępny, widok po dodaniu do koszyka, listing po 2, 3 i 4 modele w rzędzie, kolory gotowego koszyka. 7. Okrążenie 7/7 ### Animacja i przekazanie Film pokazujący ruch strony i paczka plików: ikony SVG, zdjęcia modeli i tła dla zespołu wdrożeniowego. ![Strona główna Overmax na laptopie w granatowym świetle](https://fluostudio.pl/media/projekty/overmax/duze-laptop.webp) 10 Strona na żywo ## Projekt, który już jeździ Serwis wdrożył zespół Overmax na podstawie naszego projektu. Strona główna, menu, test, kategorie, karty produktów i porównywarka działają dziś na overmax.pl, a w stopce jest podpis „Design by fluostudio”. ![Strona główna overmax.pl na komputerze](https://fluostudio.pl/media/projekty/overmax/zywa-glowna-1440.webp) Strona główna i menu Karta produktu ## Beyond limits Overmax dostał kompletny projekt sklepu, w którym auta wyglądają jak z filmu akcji, a wybór modelu pozostaje prosty: od karty produktu na telefonie, przez menu i test, po porównywarkę z przełącznikiem różnic. Klient Overmax Zakres Warsztaty strategiczne · Makieta funkcjonalna · Projekt UX/UI na komputery i telefony · Ikony · Animacja koncepcji · Przygotowanie plików do wdrożenia Wdrożenie zespół Overmax Online [overmax.pl](https://overmax.pl/) ## Zobacz inne projekty Widok Duże kadry Siatka - [Grupa BEST Znak na 30-lecie BEST, nowa strona best.com.pl i jeden system marki dla serwisów spółek grupy w pięciu krajach.](https://fluostudio.pl/projekty/best-s-a/) - [Vee Zaprojektowaliśmy markę Vee z submarkami, stronę vee.ai, aplikacje webowe i materiały na targi, a dla myvee identyfikację i salon.](https://fluostudio.pl/projekty/vee/) - [irtech Dwa warsztaty, znak z plusem z liter r i t, ponad 20 szablonów i jeden styl zdjęć produktów dla dystrybutora sprzętu pomiarowego.](https://fluostudio.pl/projekty/irtech/) - [DCX Na logo, które DCX już miał, zbudowaliśmy całą komunikację marki: od targów i katalogu po animacje premier 3D, stronę i LinkedIna.](https://fluostudio.pl/projekty/dcx/) - [Porta Drzwi Design system dla istniejącego znaku: rama z logo, siatki, ikony, rysunki, katalog, porta.com.pl, social media i materiały dla sprzedaży producenta drzwi.](https://fluostudio.pl/projekty/porta-drzwi/) - [Mily Group Rebranding dostawcy poroża jelenia: strategia komunikacji, znak, księga znaku, strona milygroup.com i materiały na targi.](https://fluostudio.pl/projekty/mily-group/) - [Grupa Dawtona Cała komunikacja Dawtony poza półką: ponad 90 projektów, od postów i stoisk targowych po cztery serwisy i animacje.](https://fluostudio.pl/projekty/dawtona/) - [Itodi Nowa marka mebli na wymiar od zera: nazwa, logo z wydłużonym „o”, projekt sklepu z konfiguratorem, instrukcja i opakowanie.](https://fluostudio.pl/projekty/itodi/) - [Design Optyk Rodzinna sieć salonów optycznych premium: identyfikacja bez złota, materiały do salonów i nowy sklep połączony z magazynami sześciu z siedmiu salonów.](https://fluostudio.pl/projekty/designoptyk/) - [Fundacja MultiSport Identyfikacja z design systemem w Figmie, strona zgodna z WCAG i duet brand hero, który zachęca do ruchu.](https://fluostudio.pl/projekty/fundacja-multisport/) - [PetCuisine Zbudowaliśmy od zera markę producenta karmy z Grupy Dawtona: od nazwy i hasła, przez opakowania w 12 smakach i stronę, po stoiska na targach w Europie.](https://fluostudio.pl/projekty/petcuisine/) - [Zippy Tail Zbudowaliśmy markę Zippy Tail od zera: nazwę, strategię, etykiety ośmiu suplementów dla psów i kotów, paczkę i projekt sklepu.](https://fluostudio.pl/projekty/zippy-tail/) ## Stoicie przed podobnym wyzwaniem? Opowiedzcie nam, co chcecie zmienić. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. Porozmawiajmy [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)