Przykładowa podstrona z najnowszymi ofertami samochodów
Przegląd projektu
Projekt ten był częścią praktycznego, kompleksowego kursu Digital Designer, który zakończył się uzyskaniem certyfikatu. Kurs obejmował naukę solidnych podstaw projektowania nowoczesnych stron internetowych, aplikacji, UI Design i Figma.
PS. Logo, zdjęcia i teksty zawarte w zrzutach ekranu projektu są własnością Stradale Classics.
Cel projektu
Celem było ulepszenie UI strony i przeprojektowanie sekcji oraz podstron. Strona WWW wymagała również ulepszeń w zakresie responsywności (szczególnie w przypadku rozdzielczości mobilnych). Ponadto konieczne było ulepszenie user flow oraz mapy witryny.
Zmieniona architektura informacji i mapa witryny
Podstrony z zawartością każdej sekcji
UX
Architektura informacji musiała zostać poprawiona, ponieważ proces nawigacji nie został zaprojektowany tak, aby był jasny i łatwy dla użytkownika.
Reorganizacja mapy witryny umożliwiła zapewnienie użytkownikom dostępu do najważniejszych elementów, które wcześniej były słabo wyróżnione, bądź ukryte.
Stworzenie 3 person z przykładowymi user flow pozwoliło skrócić liczbę kroków, przez które użytkownik musi przejść, aby doszło do konwersji (w tym przypadku zakupu samochodu lub skontaktowania się z firmą).
Wszystkie opisane powyżej aspekty pozwoliły na uporządkowanie treści w taki sposób, aby użytkownik mógł szybko znaleźć to, czego potrzebuje, w intuicyjny i płynny sposób.
Persony z przykładowymi user flow wraz z konwersjami
Widok na sekcje kontaktu i usług
UI
Przygotowane makiety treści w celu poprawy wizualizacji i układu, zarówno na desktopie, jak i na urządzeniach mobilnych, co zaowocowało bardziej logicznym rozmieszczeniem sekcji na każdej podstronie. Kluczowe było podkreślenie potencjału bardzo dobrej jakości zdjęć (które wcześniej były wykorzystywane jedynie w ofertach sprzedaży samochodów).
Ze względu na dużą liczbę przekierowań użytkowników z mediów społecznościowych (Stradale Classics tworzy treści na YouTube i Instagram), część mobilna została zoptymalizowana. Głównym zadaniem było poprawienie typografii, dodanie większych odstępów między elementami i zwiększenie dostępności dla użytkowników.
Ostatnie, ale nie mniej ważne
Przygotowane zostały style tekstu i kolorów, tokeny odstępów i komponenty dla projektu.
Jednym z pozostałych wymogów zaliczenia kursu było przygotowanie projektu dla programistów z pełną specyfikacją (handoff) dla komputerów stacjonarnych oraz urządzeń mobilnych.
Pojedyncza oferta samochodu w widoku desktopowym i mobilnym
Widok dolnych cześci strony: możliwość odkupienia auta i stopka
Portfolio dla studia kreatywnego
Strona one-page dla Instagramerki