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 i zdjęcia kategorii z overmax.pl.
01Najpierw 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.
02Karta 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.
- 35 km/hprędkość maksymalna
- 40 minłącznego czasu jazdy
- 4WDnapęd na cztery koła
- 1:10skala, duży model
- 14+wiek kierowcy
- Więcej mocy
- Więcej prędkości
- Więcej adrenaliny
Towarzysz każdej przygody
-
Duży rozmiar
-
Zawieszenie do ustawienia
-
Amortyzatory hydrauliczne
-
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.
Kafle i liczby modeli z menu na overmax.pl.
04Znajdź 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.
05Kategorie
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.
X-Clash
- Skala 1:22
- Asfalt
- Od 8 lat
X-Monster 3.5
- Skala 1:18
- Akrobacje w terenie
- Od 14 lat
X-Hooligan
- Skala 1:10
- 35 km/h
- Od 14 lat
X-Tireburner
- Skala 1:16
- Drift na asfalcie
- Od 8 lat
X-Surge
- Motorówka RC
- Zasięg 100 m
- 2,4 GHz
06Poró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.
| 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 |
Wybrane modele mają takie same parametry w tej tabeli.
Dane z kart produktów na overmax.pl.
07Dlaczego 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.
-
Wyścigi, terenowe przygody i dłubanie przy własnym modelu. Prawdziwe przeżycia zamiast kolejnego ekranu.
-
Bez względu na wiek i doświadczenie. „Beyond limits” to zaproszenie do zabawy poza szkołą, pracą i codziennymi regułami.
-
Trwałe materiały i konstrukcja, która wyciska maksimum z każdego elementu, żeby model długo jeździł jak nowy.
-
Modele RC jako pretekst do spotkań. Amatorzy i doświadczeni pasjonaci na jednym torze.
Opisy na podstawie treści marki na overmax.pl.
08Niebieski 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
09Jak pracowaliśmy
Siedem okrążeń od warsztatów do plików dla programistów
-
Okrążenie 1/7
Warsztaty
Z zespołem marki ustaliliśmy cele strony, odbiorców i charakter, jaki ma mieć serwis.
-
Okrążenie 2/7
Makieta funkcjonalna
Strona główna, menu, listing, karta produktu, wyszukiwarka, porównywarka i miejsce na treści społeczności.
-
Okrążenie 3/7
Koncepcja na telefonie
Kierunek wizualny pokazany najpierw na mobilnej karcie X-Hooligana, bo tam dzieje się najwięcej.
-
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.
-
Okrążenie 5/7
Rundy uwag
Menu jako czytelna lista, karuzele z kropkami na telefonie, wyróżniki otwierane dotknięciem, ikony w nowym stylu.
-
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.
-
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.
10Strona 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”.
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
Zobacz inne projekty
-
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.
-
Vee
Zaprojektowaliśmy markę Vee z submarkami, stronę vee.ai, aplikacje webowe i materiały na targi, a dla myvee identyfikację i salon.
-
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.
-
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.
-
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.
-
Mily Group
Rebranding dostawcy poroża jelenia: strategia komunikacji, znak, księga znaku, strona milygroup.com i materiały na targi.
-
Grupa Dawtona
Cała komunikacja Dawtony poza półką: ponad 90 projektów, od postów i stoisk targowych po cztery serwisy i animacje.
-
Itodi
Nowa marka mebli na wymiar od zera: nazwa, logo z wydłużonym „o”, projekt sklepu z konfiguratorem, instrukcja i opakowanie.
-
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.
-
Fundacja MultiSport
Identyfikacja z design systemem w Figmie, strona zgodna z WCAG i duet brand hero, który zachęca do ruchu.
-
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.
-
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.
Stoicie przed podobnym wyzwaniem?
Opowiedzcie nam, co chcecie zmienić. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań.