Potrzebny jest pełny redesign istniejącego sklepu internetowego ROBO: https://robo.org.ua/
Strona już działa, produkty i podstawowa funkcjonalność są dostępne. Należy nie tworzyć nowej strony od zera, ale całkowicie przerobić jej design, strukturę stron i ścieżkę użytkownika do zakupu.
Głównym celem redesignu jest uczynienie strony nowoczesną, wygodną, zrozumiałą i maksymalnie sprzedażową. Główny ruch będzie pochodził z reklamy Meta — Facebook i Instagram. Większość klientów przegląda stronę na smartfonach, dlatego szczególną uwagę należy poświęcić wersji mobilnej.
Osoba, która po raz pierwszy przechodzi na stronę z reklamy, powinna od razu zrozumieć:
— co to za produkt;
— jakie są jego główne zalety;
— ile kosztuje;
— co wchodzi w skład;
— jak odbywa się dostawa i płatność;
— czy można zaufać sklepowi;
— jak szybko złożyć zamówienie.
Trzeba przeanalizować istniejącą stronę, znaleźć główne problemy w designie, strukturze i wygodzie użytkowania, a następnie zaproponować nowy projekt UI/UX w Figma.
Trzeba opracować pełną wersję komputerową i mobilną strony.
Co należy opracować:
Header strony.
Trzeba całkowicie przerobić header strony dla wersji komputerowej i mobilnej.
W headerze powinny być:
— logo sklepu;
— przycisk „Katalog produktów”;
— menu głównych kategorii;
— wyszukiwarka;
— numer telefonu;
— przycisk szybkiego kontaktu;
— godziny otwarcia;
— ulubione;
— konto osobiste, jeśli jest używane;
— koszyk z ilością produktów;
— mobilne menu burger;
— informacje o dostawie, płatności lub aktualnej promocji.
Header powinien być kompaktowy, zrozumiały i nie zajmować zbyt dużo miejsca.
Podczas przewijania strony należy przewidzieć przypięty skrócony header z głównymi elementami: logo, katalogiem, wyszukiwarką i koszykiem.
Mobilne menu.
Trzeba osobno opracować wygodne mobilne menu, w którym będą:
— katalog produktów;
— kategorie;
— wyszukiwanie;
— kontakty;
— dostawa i płatność;
— gwarancja i zwroty;
— opinie;
— ulubione;
— koszyk;
— przyciski kontaktu przez telefon lub komunikatory.
Strona główna.
Na stronie głównej należy opracować:
— główny baner z wyraźną ofertą;
— produkty promocyjne;
— popularne kategorie;
— hity sprzedaży;
— nowości;
— produkty ze zniżkami;
— zalety sklepu;
— informacje o dostawie i płatności;
— opinie klientów;
— blok zaufania do sklepu;
— polecane produkty;
— odpowiedzi na popularne pytania;
— subskrypcję lub wezwanie do przejścia do katalogu;
— dolną część strony.
Strona główna nie powinna być przeładowana. Jej głównym zadaniem jest szybkie skierowanie użytkownika do potrzebnego produktu lub kategorii.
Strona kategorii produktów.
Trzeba opracować:
— nazwę kategorii;
— krótki opis;
— podkategorie;
— filtry;
— sortowanie;
— karty produktów;
— oznaczenia „Hit”, „Nowość”, „Zniżka”;
— aktualną i starą cenę;
— ocenę;
— liczbę opinii;
— przycisk dodawania do koszyka;
— możliwość dodania do ulubionych;
— paginację lub przycisk „Pokaż więcej”;
— mobilną wersję filtrów.
Karty produktów powinny być nowoczesne, zrozumiałe i nieprzeładowane zbędnymi informacjami.
Strona produktu.
Strona produktu jest najważniejszą częścią strony. Powinna łączyć funkcjonalność sklepu internetowego i strukturę sprzedażowego landing page'a.
Trzeba opracować odpowiednią sekwencję bloków, która pomoże użytkownikowi szybko podjąć decyzję o zakupie.
W pierwszym ekranie strony produktu powinny być:
— nazwa produktu;
— artykuł;
— ocena;
— liczba opinii;
— galeria zdjęć;
— wideo produktu;
— aktualna cena;
— stara cena;
— rozmiar zniżki;
— informacje o dostępności;
— opcje koloru lub konfiguracji;
— liczba produktów;
— główny przycisk „Kup”;
— przycisk szybkiego zamówienia;
— krótkie główne zalety;
— informacje o dostawie;
— informacje o płatności;
— gwarancja i zwroty;
— informacje o zestawie.
Po pierwszym ekranie należy umieścić:
— krótki blok głównych zalet;
— demonstrację produktu w rzeczywistym użyciu;
— problem, który rozwiązuje produkt;
— szczegółowy opis;
— zdjęcia i wideo;
— główne cechy;
— co wchodzi w skład;
— instrukcję obsługi;
— porównanie z innymi produktami lub zwykłymi odpowiednikami;
— dla kogo produkt będzie odpowiedni;
— blok dostawy i płatności;
— gwarancję i warunki zwrotu;
— opinie klientów;
— opinie ze zdjęciami i wideo;
— pytania i odpowiedzi;
— polecane produkty;
— produkty towarzyszące;
— produkty, które często kupowane są razem;
— ponowne wezwanie do złożenia zamówienia.
W wersji mobilnej należy zrobić przypięty dolny panel z ceną i przyciskiem „Kup”.
Trzeba również przewidzieć wygodne przełączanie między sekcjami:
— opis;
— cechy;
— opinie;
— pytania;
— dostawa i płatność.
Blok dostawy i płatności.
Trzeba opracować osobny zrozumiały blok, w którym będzie wskazane:
— dostawa Nową Pocztą;
— orientacyjny czas dostawy;
— możliwość płatności przy odbiorze;
— płatność online;
— płatność na konto;
— koszt dostawy;
— warunki darmowej dostawy, jeśli obowiązują;
— wymiana i zwroty;
— gwarancja.
Te informacje powinny być widoczne jeszcze przy przycisku „Kup”, a także powtarzać się poniżej na stronie.
Opinie.
Trzeba opracować nowoczesny blok opinii:
— ogólna ocena produktu;
— liczba opinii;
— rozkład ocen;
— imię kupującego;
— data opinii;
— oznaczenie „Potwierdzony zakup”;
— tekst opinii;
— zdjęcia;
— wideo;
— ocena produktu;
— odpowiedź sklepu;
— przycisk „Zostaw opinię”;
— sortowanie opinii.
Opinie powinny budzić zaufanie i być wygodne do przeglądania na smartfonie.
Cechy produktu.
Trzeba stworzyć osobny zrozumiały blok cech.
Cechy powinny być wyświetlane w formie uporządkowanej listy lub tabeli, która dobrze wygląda na komputerze i smartfonie.
Pytania i odpowiedzi.
Trzeba opracować blok, w którym klienci będą mogli:
— przeglądać popularne pytania;
— otwierać i zamykać odpowiedzi;
— zadać własne pytanie;
— zobaczyć odpowiedź sklepu;
— przeglądać datę odpowiedzi.
Koszyk.
Trzeba opracować pełną i mini wersję koszyka.
W koszyku powinny być:
— zdjęcie produktu;
— nazwa;
— wybrana konfiguracja lub kolor;
— cena;
— stara cena;
— ilość;
— możliwość usunięcia produktu;
— kod promocyjny;
— suma zamówienia;
— koszt dostawy lub informacje o niej;
— polecane produkty;
— przycisk „Złóż zamówienie”;
— przycisk „Kontynuuj zakupy”.
Składanie zamówienia.
Trzeba zrobić maksymalnie proste składanie zamówienia bez zbędnych pól.
Główne pola:
— imię;
— numer telefonu;
— miejscowość;
— oddział lub paczkomat Nowej Poczty;
— sposób dostawy;
— sposób płatności;
— komentarz do zamówienia;
— kod promocyjny;
— skład zamówienia;
— łączna kwota;
— przycisk potwierdzenia zamówienia.
Trzeba również przewidzieć powiadomienie o pomyślnym złożeniu zamówienia.
Wyszukiwanie na stronie.
Trzeba opracować:
— pasek wyszukiwania;
— podpowiedzi podczas wpisywania;
— popularne zapytania;
— produkty w wynikach;
— kategorie w wynikach;
— stronę wyników wyszukiwania;
— powiadomienie, jeśli nic nie znaleziono.
Ulubione.
Trzeba opracować stronę ulubionych produktów z możliwością:
— przeglądania zapisanych produktów;
— usuwania produktów;
— dodawania produktów do koszyka;
— kontynuowania zakupów.
Strony informacyjne.
Trzeba opracować design stron:
— dostawa i płatność;
— gwarancja;
— wymiana i zwroty;
— o sklepie;
— kontakty;
— polityka prywatności;
— publiczna oferta;
— popularne pytania.
Strona kontaktów.
Trzeba przewidzieć:
— numer telefonu;
— adres e-mail;
— godziny otwarcia;
— komunikatory;
— media społecznościowe;
— formularz kontaktowy;
— informacje prawne o sklepie.
Dolna część strony.
Trzeba całkowicie opracować stopkę strony.
W stopce powinny być:
— logo;
— krótka informacja o sklepie;
— katalog;
— popularne kategorie;
— informacje dla klientów;
— dostawa i płatność;
— wymiana i zwroty;
— kontakty;
— godziny otwarcia;
— media społecznościowe;
— metody płatności;
— informacje prawne;
— polityka prywatności;
— publiczna oferta.
Strony i powiadomienia systemowe.
Trzeba przewidzieć design takich stanów:
— produkt dodany do koszyka;
— produkt dodany do ulubionych;
— błąd wypełnienia formularza;
— produkt niedostępny;
— pusty koszyk;
— puste ulubione;
— nic nie znaleziono;
— strona 404;
— pomyślne złożenie zamówienia;
— błąd płatności;
— ładowanie strony;
— powiadomienie o używaniu plików cookie.
System designu.
Trzeba stworzyć jednolitą system designu, która będzie obejmować:
— kolory;
— czcionki;
— nagłówki;
— przyciski;
— pola wprowadzania;
— karty produktów;
— ikony;
— odstępy;
— okna modalne;
— powiadomienia;
— stany aktywne i nieaktywne;
— stany najechania;
— komponenty mobilne.
Wszystkie elementy powinny być zaprojektowane jako komponenty w Figma.
Grupa docelowa:
Klienci z Ukrainy, którzy szukają produktów do domu, samochodu, dzieci, elektroniki, prezentów i przydatnych gadżetów.
Znaczna część użytkowników przechodzi na stronę z reklamy Facebook i Instagram. Przeważnie korzystają ze smartfonów i mogą po raz pierwszy zobaczyć markę ROBO.
Dlatego strona powinna:
— szybko się ładować;
— budzić zaufanie;
— jasno pokazywać zalety produktu;
— nie obciążać użytkownika;
— upraszczać składanie zamówienia;
— dobrze wyglądać na różnych rozmiarach ekranu;
— motywować użytkownika do zakupu produktu.
Wymagania dla projektanta:
— doświadczenie w projektowaniu sklepów internetowych;
— doświadczenie w tworzeniu sprzedażowych stron produktów;
— zrozumienie UI/UX;
— zrozumienie mobilnej adaptacji;
— umiejętność pracy w Figma;
— zrozumienie zachowań użytkowników, którzy przechodzą z reklamy;
— portfolio z podobnymi pracami;
— gotowość do argumentowania zaproponowanych rozwiązań;
— możliwość wprowadzenia poprawek po prezentacji designu.
Oczekiwany rezultat:
— pełny design sklepu internetowego w Figma;
— wersja komputerowa;
— wersja mobilna;
— design wszystkich głównych stron;
— design głównych stanów systemowych;
— komponenty i system designu;
— klikalny prototyp głównych stron;
— zrozumiała struktura pliku;
— przygotowanie makiet do przekazania programiście;
— wskazane rozmiary, odstępy, czcionki, kolory i stany elementów.
Programowanie i kodowanie na tym etapie nie są potrzebne. Potrzebny jest pełny projekt UI/UX w Figma.
W odpowiedzi na projekt
Behance
