Siły napędowe projektowania — studium przypadku przeprojektowania strony internetowej

Kiedy jest najlepszy czas na przeprojektowanie strony internetowej?

Kto nie natknął się na stronę, która wygląda na przestarzałą i porzuconą? Jak skorupa zepsutej ciężarówki pozostawionej na pustyni, wyraźnie nietknięta przez wiele lat.

Strony internetowe są zmieniane z różnych powodów. Niestety, wiele firm nie zdaje sobie sprawy, że ich strona internetowa wymaga przeprojektowania i zostaje w tyle, gdy rywale zyskują przewagę konkurencyjną, poprawiając swoją, co w rezultacie zwiększa ich konwersje.

Częstym błędem, jaki popełniają firmy, jest nierozważanie na wczesnym etapie, co może się stać, jeśli potrzeby ich strony internetowej staną się bardziej złożone, a w konsekwencji znajdą się w trudnej, potencjalnie kosztownej sytuacji, gdy będą musieli ją rozbudować. Ponadto często pomijane są ważne czynniki, takie jak optymalizacja pod kątem wyszukiwarek (SEO), SSL (która wpływa na ranking i bezpieczeństwo) oraz przyjazność mobilna (która wpływa na ranking i konwersję).

Nowe projekty stron internetowych często mają miejsce z powodu zmiany przywództwa na szczycie, gdzie ustanawiany jest świeży kierunek brandingowy i nowi ludzie zajmujący się marketingiem marki wchodzą na pokład. Oceniając witrynę firmy, są przerażeni, gdy dowiadują się, że ma okropny UX i że brakuje znacznej ilości pożądanych treści. Dochodząc do wniosku, że jest to po prostu źle ułożona „strona z broszurą”, która nie przekazuje „głosu marki” ani konwersji, których szuka firma, konsensus jest taki, że dojrzała do zmian. Czas na modernizację strony internetowej.

Modernizacja strony internetowej dla firmy motoryzacyjnej

Należy wspomnieć, że studium przypadku przeprojektowania witryny motoryzacyjnej nie jest oficjalnym przeprojektowaniem na zlecenie. Nie mam żadnych informacji wewnętrznych na temat firmy, jej strategii cyfrowej ani branży motoryzacyjnej jako całości. Po prostu wykorzystuję przemysł motoryzacyjny jako przypadek testowy do studium przypadku przeprojektowania strony internetowej.

W tym studium przypadku omawiamy proces przeprojektowania strony internetowej chorwackiej marki motoryzacyjnej Rimac Automobili. Rimac to marka, która rozpoczęła się od prostej koncepcji samochodu i od tego czasu rozwinęła się w dużą firmę produkującą komponenty. Podobnie jak wiele startupów, firma zaczęła od pomysłu, który ostatecznie przekształcił się w coś innego; ta ekspansja wpłynęła na strukturę strony internetowej i zmieniła się cała koncentracja na użytkowniku. Popyt na rynku skierował firmę w innym kierunku, dlatego też musiał się zmienić kierunek zainteresowania strony internetowej.

Istnieje wiele różnych aspektów i punktów widzenia, które należy wziąć pod uwagę, aby uzyskać doskonałe rozwiązanie do projektowania stron internetowych. Pomimo faktu, że poprzedni projektant stron internetowych mógł nie mieć zasobów lub wystarczającej ilości czasu na badania UX, tworzenie szkieletów, prototypowanie i testowanie użytkowników, jeśli chodzi o ogólną jakość projektu, nawet najmniejsze, wczesne decyzje projektowe mogą mieć znaczące negatywne konsekwencje i nieoptymalna jakość strony doprowadzą ostatecznie do przeprojektowania strony za dwa lub trzy lata. Skutkiem tego jest to, że na dłuższą metę klienci płacą więcej za stronę internetową, niż im się wydaje. Dobrze zdefiniowana strategia treści i architektura informacji ma kluczowe znaczenie przy projektowaniu nowej strony internetowej.

Projektując duże witryny firmowe, portale informacyjne i inne witryny z dużą ilością treści, jestem wielkim fanem projektowania atomowego, elastycznego systemu projektowania, który polega na tworzeniu wszystkich komponentów interfejsu użytkownika, które będą działać na wielu ekranach i w nieprzewidzianych sytuacjach na początku projektu. Chociaż to konkretne studium przypadku nie dotyczy dużego portalu informacyjnego, to jednak znacznie ułatwi ten proces, jeśli biblioteka projektowa elementów projektu atomowego (zestaw starannie przemyślanych i dobrze zdefiniowanych komponentów projektu) zostanie skonfigurowana do pracy z później.

Dopiero gdy witryna ma odpowiednią strategię treści i architekturę informacji, należy skupić się na doświadczeniu użytkownika. Bez odpowiedniej struktury strony, projektowanie user experience nie ma mocy. Być może na pierwszy rzut oka witryna wygląda ładnie i działa dobrze, ale jeśli nie ma wystarczającej elastyczności, nieuniknione jest, że w pewnym momencie firma będzie musiała rozważyć przeprojektowanie witryny.

Dlaczego warto przeprojektować stronę internetową tej firmy motoryzacyjnej?

Rimac Automobili się rozwija, a według oficjalnych postów nowy samochód koncepcyjny o nazwie „Concept_One” jest już w produkcji. W czasie tej niezrealizowanej przeprojektowania strony internetowej, ich strona internetowa prezentowała tylko jeden samochód, „C_Two”. Nie było różnorodności wizualnej – strona została stworzona z dwóch szablonów, więc każda strona wyglądała bardzo podobnie. Projekt koncentrował się na dużych, atrakcyjnych zdjęciach samochodu, które nie miały nic więcej do zilustrowania jakości samochodu C_Two — niezbędnych informacji potrzebnych do nakłonienia odwiedzających witrynę do podjęcia decyzji o zakupie samochodu.

Jak mówi przysłowie: „Nigdy nie masz drugiej szansy na zrobienie pierwszego wrażenia”. Niezwykle ważne jest, aby wykorzystać wpływ świetnego designu, aby skutecznie przekonać odwiedzających (którzy w tym przypadku byliby głównie entuzjastami samochodów wyczynowych) do zakupu samochodu kosztującego blisko milion (USD). Takie wysokiej klasy strony internetowe muszą spełniać niewiarygodnie wysoki standard. Muszą wykazywać poczucie jakości i charyzmy oraz oferować wysoki poziom sprzedaży, a także przekonujący styl.

Świetny projekt witryny musi wyróżniać się w morzu podobnych witryn

Dużym problemem w branży motoryzacyjnej jest to, że większość stron internetowych w tej przestrzeni wygląda tak samo. Poza różnymi schematami kolorów i obrazami bohaterów, wydaje się, że używają tego samego szablonu witryny.

Istnieje wiele czynników stojących za decyzjami dotyczącymi projektowania witryn internetowych firmy motoryzacyjnej, ale należy wyraźnie rozróżnić samochód za 1 milion dolarów i 25 000 dolarów oraz sposób ich prezentacji.

W branży motoryzacyjnej z najwyższej półki Ferrari, Lamborghini i Aston Martin mają zbyt proste, typowo korporacyjne strony internetowe, które (moim zdaniem) nie oferują tak naprawdę dobrego doświadczenia użytkownika.

Średnia grupa konsumentów (Volkswagen, Toyota, Peugeot itd.) ma bardzo podobną strukturę treści witryny do bardziej zaawansowanych przykładów wymienionych powyżej. Największą różnicą między markami samochodów konsumenckich z wyższej półki i średniej klasy jest cena – można więc oczekiwać, że Rimac ze swoimi samochodami z wyższej półki będzie miał wyjątkową stronę internetową, aby odzwierciedlić tę różnicę i zaprezentować ich drogie marki.

Oczekiwania klientów są wysokie, gdy odwiedzają te bardzo drogie strony internetowe marek samochodów; to duże zobowiązanie finansowe i całkiem naturalnie chcą mieć pewność, że otrzymają najlepszy samochód, jaki mogą kupić za ich pieniądze.

Dlaczego Rimac jest lepszy od Toyoty? Patrząc na ich strony internetowe, nie ma dużego rozróżnienia między tymi dwiema bardzo różnymi markami. Czy nie powinno to wynikać z jakości ich strony internetowej?

Kierowanie do kupujących samochody z wyższej półki dzięki świetnemu projektowi strony internetowej

Każda strona internetowa musi brać pod uwagę swoich użytkowników. Kto jest docelowym odbiorcą tego rodzaju samochodu? Czego oni szukają?

Samochody Rimaca kosztują około 850 000 dolarów i tylko kilka z nich zostanie wyprodukowanych, kwalifikując je do etykiety „edycji limitowanej”. Chociaż nie potrafimy precyzyjnie określić typu klienta, który byłby zainteresowany zakupem tych samochodów, możemy założyć, że większość klientów będzie pochodzić z zamożnej elity. Czy witryna firmy Rimac skutecznie dociera do tych klientów?

Analiza architektury informacji

Na naszej przykładowej witrynie internetowej pierwszym elementem nawigacji był „Concept_One” (w tamtym czasie był to jedyny produkt firmy). Prawdziwa strona internetowa została zaktualizowana. Drugi element nawigacji to ewolucja firmy, sposób produkcji samochodu, trzeci element to produkty i usługi firmy. Czwarty element nawigacji to kolejny produkt firmy (rowery elektryczne Greyp). Ostatnie dwie pozycje to „prasa” zawierająca informacje prasowe i „blog”, z których żaden nie jest szczególnie przydatny, ponieważ większość ich wiadomości była publikowana w sieciach społecznościowych.

Inną kwestią było to, że link do kariery został ukryty jako drugorzędny, mniej ważny element nawigacji i, biorąc pod uwagę ogromny rozwój firmy, stanowił ważną sprawę. Jeśli weźmiemy pod uwagę użytkownika jako przedmiot zainteresowania firm, zobaczymy, że na większości firmowych witryn internetowych (typowe wyjątki to witryny korporacyjne/bardzo duże witryny) bardzo ważne jest posiadanie widocznego linku „kariera” lub CTA.

Proces przeprojektowania strony internetowej

Strona główna Obraz bohatera przed i po

Pierwotnie celem było stworzenie ciemniejszej, mocniejszej wersji samochodu. Znalazłem kilka zdjęć samochodu Concept_One w Internecie i dzięki „magii Photoshopa” stworzyłem pierwszy obraz bohatera na stronie głównej. Następnym pomysłem była animacja, która powoli odsłaniałaby samochód, najpierw tło, potem zarys samochodu, a następnie w pełni wyrenderowany obraz.

Projekt strony głównej

W przypadku strony głównej koncepcja polegała na zdefiniowaniu dwóch głównych obszarów wizualnych: górnej nawigacji i obrazu bohatera samochodu. Otóż ​​to. Aby była minimalistyczna, a jednocześnie efektowna, usunięto wszystko, co niepotrzebne. Na pierwszy rzut oka wszystkie ważne rzeczy są widoczne – wszystko inne zostało przeniesione na podstrony w serwisie.

Strategia i projektowanie treści

W przypadku takich projektów rewitalizacji strony ważne jest również zaprojektowanie treści, a nie tylko struktury strony i estetyki wizualnej. Ponieważ jest to niezamówione przeprojektowanie strony internetowej, zapewnia większą swobodę eksperymentowania, a także elastyczność estetyczną, dzięki której istnieje pełna możliwość podejmowania własnych decyzji projektowych.

Proces jest prosty:

1. Przygotuj tekst, który pojawi się na stronie.
2. Przekazuj niektóre elementy projektu — np. przyciągające wzrok szczegóły dotyczące przyspieszenia, mocy i maksymalnej prędkości — za pomocą ikon lub interaktywnych animacji.

W ten sposób dodatkowe słowa nie są potrzebne w interfejsie użytkownika, a uwagę zwraca się na obszary, które są ważniejsze dla odwiedzających witrynę.

Przeprojektowanie nawigacji w witrynie

Struktura nawigacji w witrynie została teraz uporządkowana w oparciu o hierarchię ważności. Mamy Pojazdy jako pierwsze menu rozwijane w nawigacji, co zapewnia elastyczność projektowania, ponieważ pozwala firmie dodawać więcej modeli samochodów w przyszłości.

Aby zapewnić natychmiastowy dostęp do drugorzędnej strony Produkty ze strony głównej, zdecydowano, że ze względu na wydajność zamiast tworzenia kolejnej strony z listami produktów (na innej stronie internetowej) Produkty i ich podkategorie mogą być włączone do strony głównej jako obszar rozwijany i stanowią część nawigacja. Poniższy projekt przedstawia różne produkty renderowane jako ikony na stronie głównej, gdy odwiedzający klikają Produkty w nawigacji. Do renderowania produktów 3D oznaczających drugie poziomy w Products , polecam Three.js, WebGL, Canvas i Greensock, ponieważ są to dobrze znane, ustandaryzowane narzędzia.

Strony drugorzędne w ramach przeprojektowania witryny

W przeciwieństwie do strony głównej strony pomocnicze, takie jak strony Informacje i Serwis , korzystają z innej siatki o bardziej wzorzystym kształcie litery Z. Intencją innego układu siatki jest zapewnienie odwiedzającym bardziej interesującego i dynamicznego środowiska podczas skanowania tych stron.

Główną ideą jest nadal wizualny minimalizm z jak najmniejszą ilością tekstu. Ludzie nie odwiedzają tego typu witryn motoryzacyjnych, aby przeczytać dużo tekstu, ale aby szybko i wizualnie uzyskać informacje. To było myślenie za dużymi, pogrubionymi czcionkami w tytułach stron i zastosowaniem różnych stylów czcionek.

Należy zauważyć, że tego rodzaju przeprojektowanie strony internetowej „broszury firmowej” różni się od przeprojektowania usługi. Strona internetowa „broszury firmowej” dotyczy bardziej produktów marketingowych. Przeprojektowania witryn zorientowanych na usługi są bardziej nastawione na konwersję kliknięć na konwersje i ewentualny zysk.

Wniosek

Istnieje kilka innych artykułów na blogu projektowym, które zalecają, dlaczego projektanci powinni angażować się w niezamówione projekty projektowe z boku. Jeśli chcesz zaprojektować naprawdę fajny projekt, wybierz pomysł — może to być strona internetowa, aplikacja, korporacyjny produkt SaaS — i rozwiąż dla niego problem projektowy.

Dribbble jest pełen niezamówionych projektów koncepcyjnych, w których projektanci cyfrowi mają okazję pochwalić się swoimi umiejętnościami projektowymi. Oprócz dostarczenia fajnego projektu, który przedstawia kreatywne rozwiązanie dla świata, praca nad „rzeczywistym” problemem z produktem pokaże potencjalnym firmom i klientom, jak myślisz, jaki jest twój proces i jakie masz doświadczenie.

W moim przypadku zmierzenie się z wysokiej klasy serwisem motoryzacyjnym było świetnym ćwiczeniem, ponieważ szczególnie ważne jest, aby projekt stron internetowych z tego sektora spełniał wyjątkowo wysoki standard.

Jednak uwaga: zanim zagłębimy się i przystąpimy do projektowania, warto wybiegać w przyszłość i zastanowić się, jak konkretna strona internetowa będzie musiała wyglądać za trzy lata, nie tylko z perspektywy estetyki designu, ale i treści, funkcja i struktura. Bardzo ważne jest, aby wbudowana elastyczność była poważnym problemem projektowym. Łatwiej, wydajniej i znacznie mniej boleśnie wprowadzać drobne poprawki, aby dopasować się do przyszłych wymagań, gdy witryna lub podstrony działają i są skalowalne.

Czasami naprawdę trudno jest przekonać potencjalnego klienta do odświeżenia strony internetowej. Często klienci niechętnie angażują się z powodu braku zasobów, funduszy lub czasu. Niemniej jednak niezamówiony przeprojektowanie witryny to świetny sposób na zaprezentowanie światu procesu przeprojektowania witryny. I kto wie? Całkiem możliwe, że przeprojektowanie Twojej strony internetowej może zaimponować niechętnemu klientowi na tyle, że oświetli go „prawdziwym” projektem, w którym jako dodatkowy bonus projektant otrzymuje wynagrodzenie!

• • •

Dalsza lektura na blogu Toptal Design:

• Podstawy przeprojektowania strony internetowej – studium przypadku
• Prawdziwy zwrot z inwestycji w UX: studia przypadków przeprojektowania B2B
• Wyjęcie IKEA z pudełka i przeprojektowanie jej dla 1,6 miliarda użytkowników
• Przeprojektujmy Facebooka: 10 inspiracji na dobry początek
• Jak należy zaprojektować CrunchBase