Soluma Interactive

Case Study

Kluczowa marka dla Soluma Group. Agencja 360, która oferuje szeroki wachlarz usług w tym webdevelopment, branding, marketing, copywriting.

Problem

Aktualna strona internetowa rozwijała się przez ostatnie 5 lat. W trakcie dodawania nowych funkcjonalności zabrakło spójności w UI oraz zauważyliśmy, że UX strony może powodować trudności w jej obsłudze. 

Cele

Przed rozpoczęciem pracy określiliśmy, jak możemy ulepszyć aktualną stronę. Dlatego postawiliśmy pięć  głównych celów:

  1. Zaprojektowanie spójnej biblioteki UI, która wyznaczy kierunek dla całej Soluma Group
  2. Odświeżenie wizerunku marki
  3. Uproszczenie oferty oraz dodanie nowych produktów 
  4. Prezentacja produktów wraz z możliwością konfiguracji
  5. Uproszczenie procesu zamawiania usług oraz wskazywanie drogi przez jasno wyznaczone CTA

Ścieżka działania

W celu pełnej optymalizacji procesu określiliśmy dokładny plan działania.

Przebieg projektu

1. Audyt UX oraz UI

Podczas audytu korzystaliśmy między innymi z narzędzi Google Analytics i HotJar. Przeanalizowaliśmy 2000 nagrań, heatmapy i inne statystyki, dzięki czemu zidentyfikowaliśmy kluczowe problemy w funkcjonowaniu strony. Ustaliliśmy grupę docelową i do jakich klientów docieramy z naszą ofertą oraz w jaki sposób użytkownicy korzystają ze strony.

2. Opracowanie kluczowych ścieżek klienta

Podczas badań poznaliśmy sposoby, w jakie klienci trafiają na stronę docelową. Na tej podstawie określiliśmy 2 główne cele: wypełnienie formularza na konkretnym produkcie lub darmowa konsultacja. To pozwoliło na dalszym etapie wyznaczyć konkretną hierarchię przycisków akcji oraz odpowiednio je eksponować.

3. Wireframe dla kluczowych zakładek

Na tym etapie dla głównych zakładek przygotowaliśmy proste wireframe, na których mogliśmy sprawdzić, czy realizujemy główne cele. Dodatkowo przeprowadziliśmy krótkie badanie na użytkownikach.

4. Projektowanie UI

Projektowanie UI zaczęliśmy od strony głównej. Na tej podstawie wyznaczyliśmy styl. Wersja pierwsza różni się od wersji wdrożonej. Różnice wynikają z procesu ciągłych badań i wprowadzania ulepszeń, które pozwoliły wypracować optymalne rozwiązania.

4.1 Biblioteka UI

Zależało nam, by wszystkie podstrony były spójne utrzymane w wyznaczonym stylu. W tym celu przygotowaliśmy bibliotekę UI zawierającą najważniejsze elementy. W bibliotece zawarliśmy między innymi typografię, buttony, kolorystykę, cienie, marginesy i kolekcję ikon.

4.2 Projektowanie podstron

Przygotowaliśmy około 50 różnych podstron. Dzięki temu, każda zakładka została starannie przemyślana i zaprojektowana zgodnie z zaplanowanym UX.

4.3 Wersja mobilna

5. Testy A/B

Kluczowe zakładki tworzyliśmy w kilku wariantach, żeby po przeprowadzeniu badań między innymi testów A/B wybrać najlepsze rozwiązanie. W przypadku zakładki z produktem wymagało to ponad 6 różnych podejść do sposobu konfiguracji produktu.

6. Copywriting

Dużym wyzwaniem było napisanie wszystkich tekstów oraz opracowanie ich tak by były przyjazne użytkownikom. Zależało nam na tym, by uspójnić polecania i uprościć ofertę do minimum. Podczas tworzenia tekstów dbaliśmy o dobry styl językowy oraz SEO.

7. Wdrożenie

Następnym krokiem było wdrożenie strony zgodnie z najnowszymi standardami. Chociaż zaprojektowanych było około 50 różnych widoków, to wersja produkcyjna zawiera rozbudowaną ofertę, blog i pomoc w sumie ponad 2000 podstron. Wymagało to ogromnego nakładu pracy i dopasowania treści do aktualnych szablonów podstron.

8. Optymalizacja&SEO

By strona prawidłowo się indeksowała w pozycjach Google, zoptymalizowaliśmy wszystkie kluczowe zakładki. Linkowanie wewnętrzne, zewnętrzne, odpowiednia hierarchia nagłówków pozwoliła na bezpieczne pozycjonowanie i wysoką pozycję w wyszukiwarce.

9. Testowanie

Jeden z kluczowych etapów przy tworzeniu strony. Dzięki testom na kluczowych przeglądarkach, na różnych urządzeniach i walidacji w3c, udało nam się wyeliminować prawie 300 mniejszych i poważniejszych błędów. Na tym etapie po wdrożeniu zauważyliśmy, że niektóre elementy mogą być niejasne dla użytkownika lub wymagają dalszego udoskonalenia.

9.1 Testowanie na kluczowych przeglądarkach

9.2 Testowanie strony na różnych urządzeniach

Mobile

iOS & Android

Mobile

iOS & Android

Mobile

iOS & Android

Mobile

iOS & Android

9.3 Testowanie flow klienta

Podsumowanie

Dzięki wielu godzinom badań i poświęconej pracy projekt został sfinalizowany.
Całość krótko podsumowaliśmy w liczbach, oto niektóre statystyki:

1. Analiza i projektowanie UX/UI

godzin 35

badania i analiza

godzin180

projektowanie UI/UX

ponad 50

projektów stron

ponad 20

dodatkowych wersji A/B

2. Copywriting i optymalizacja

1900

opracowanych tekstów

godzin238

przy optymalizacji seo

godzin 25

przy optymalizacji szybkości

około 430

opisów do seo

3. Wdrożenie i testowanie

godzin 340

prac programistycznych

godzin 86

testowania serwisu

około 30

nowych funkcjonalności

godzin 127

zarządzania projektem
Przewiń do góry