PROBLEM
Strefa TB potrzebowała nowoczesnego serwisu WWW, który uporządkuje szerokie portfolio produktowe marki: tusze, tonery, bębny, akcesoria komputerowe, kable, uchwyty oraz środki do czyszczenia sprzętu elektronicznego. Bez czytelnego katalogu online użytkownik miał utrudnione zadanie: musiał szybko znaleźć konkretny produkt, sprawdzić kategorię, kolor, markę i kompatybilność z urządzeniem.
Problem był więc nie tylko wizerunkowy. Chodziło o praktyczne narzędzie, które ułatwi klientom i dystrybutorom poruszanie się po ofercie oraz pozwoli marce TB lepiej prezentować swoją obecność w digitalu.
ZESPÓŁ
- Account Manager
- Project Manager
- UX/UI Designer
- Developer
- Copywriter
WYZWANIA
Największym wyzwaniem było stworzenie serwisu internetowego, który będzie jednocześnie produktowy, wizerunkowy i łatwy w obsłudze po stronie klienta. Strona musiała poradzić sobie z rozbudowaną bazą asortymentową, ale nie mogła wyglądać jak ciężki katalog techniczny.
Potrzebny był czytelny UX/UI, szybka wyszukiwarka, logiczny podział kategorii oraz CMS, który pozwoli zespołowi klienta samodzielnie zarządzać rozwijającą się ofertą.
Dla Strefy TB z grupy AB S.A. stworzyliśmy serwis WWW, który porządkuje szeroki asortyment i skraca drogę do właściwego produktu. Odpowiadaliśmy za architekturę informacji, UX/UI, projekt graficzny, copywriting i wdrożenie na WordPressie. Powstała strona z katalogiem, wyszukiwarką, filtrowaniem, kartami produktów i modułem FAQ.
Jak serwis WWW może zamienić szeroką ofertę produktową w prosty katalog dla użytkownika?
Projekt
Strefa TB to marka z szerokim portfolio produktów codziennego zastosowania: od tuszów i tonerów, przez bębny do drukarek, po akcesoria, kable, ładowarki, uchwyty i środki do czyszczenia sprzętu elektronicznego. Oficjalna strona Strefa TB opisuje tę ofertę jako rozwiązania dedykowane do urządzeń wielu czołowych producentów.
Naszym zadaniem było przełożenie tej różnorodności na prosty, intuicyjny serwis internetowy. Nie chodziło o efektowną stronę bez funkcji. Chodziło o narzędzie, które pozwala szybko przejść od potrzeby do produktu.
Projekt rozpoczęliśmy od analizy asortymentu i uporządkowania kategorii. Musieliśmy zrozumieć, jak użytkownik szuka produktu: czy zaczyna od kategorii, marki urządzenia, koloru, słowa kluczowego, czy konkretnego typu akcesorium. Dopiero na tej podstawie można było zaprojektować architekturę informacji.
Serwis WWW został pomyślany jako połączenie strony marki i katalogu produktów online. Użytkownik mógł poznać Strefę TB, przejść do produktów, zawężać wyniki, sprawdzać szczegóły i korzystać z FAQ lub formularza kontaktowego.
UX/UI
W projektowaniu UX/UI liczyła się przede wszystkim szybka droga do produktu. Użytkownik mógł przejść z menu do wybranej kategorii, a następnie zawęzić wyniki według marki, koloru, podkategorii lub słowa kluczowego.
Lista produktów została zaprojektowana tak, żeby wyszukiwarka była zawsze widoczna. Użytkownik może zawęzić wyniki do marki, koloru albo słowa kluczowego. Wybór marki przeładowuje stronę i pokazuje produkty danej marki, natomiast wybór koloru lub frazy zawęża wyniki automatycznie, bez konieczności przeładowywania strony.
To istotny detal UX. Przy dużych katalogach każde dodatkowe oczekiwanie, kliknięcie albo cofnięcie może powodować frustrację. Dlatego serwis został zaprojektowany tak, żeby proces wyszukiwania był szybki, przewidywalny i możliwie prosty.
W kategorii akcesoriów użytkownik może dodatkowo zawężać wyniki do kolejnych podkategorii oraz filtrować po słowie kluczowym. Ogólna wyszukiwarka jest stale dostępna z głównej nawigacji, co pozwala wrócić do szukania niezależnie od miejsca w serwisie.
Jeśli chcesz zobaczyć, jak projektujemy podobne struktury cyfrowe i procesy, sprawdź usługę zarządzani projektami.
Projekt graficzny
Projekt graficzny miał uporządkować ofertę, ale nie spłaszczyć charakteru marki. Strefa TB działa w kategorii bardzo technicznej, więc łatwo byłoby stworzyć stronę poprawną, lecz suchą. Zależało nam na tym, żeby serwis był czysty, szybki i funkcjonalny, ale jednocześnie miał wyraźny kod wizualny.
W projekcie wykorzystaliśmy dużo światła, prostą typografię, mocne kadry produktowe i kolorowe akcenty związane z marką TB. Serwis zbudowaliśmy z powtarzalnych komponentów: kart, przycisków, filtrów, formularzy i sekcji informacyjnych. Dzięki temu kolejne produkty i podstrony mogą być dodawane bez projektowania każdego elementu od początku.
Elementy strony
Strona internetowa zbudowana jest z powtarzalnych elementów, co zapewnia wizualną spójność na wszystkich podstronach.
Strona produktów
Z sekcji otwarciowej na stronie głównej oraz z głównego menu możemy przejść do ogólnej kategorii „Produkty”. Tutaj wybieramy podkategorie, na których znajdziemy listę produktów z wyszukiwarką.
Lista produktów
Przechodząc do kategorii „tusze” lub „tonery”, zobaczymy listę produktów i zawsze widoczną wyszukiwarkę, za pomocą której możemy zawęzić wyniki do marki, koloru oraz słowa kluczowego. Wybranie marki przeładowuje stronę i pokazuje wszystkie jej produkty, wybór koloru lub słowa kluczowego zawęża wyniki automatycznie, co przyspiesza proces wyszukiwania.
Ogólna wyszukiwarka jest zawsze dostępna z głównej nawigacji.
Akcesoria
W kategorii „akcesoria” możemy zawęzić liczbę wyników do kolejnych podkategorii i w każdej chwili do słowa kluczowego.
Karta produktowa
Strona produktowa zawiera zdjęcie oraz wszystkie szczegółowe informacje dotyczące produktu.
FAQ
Sekcja FAQ została podzielona na pytania dotyczące tuszów i tonerów oraz osobny obszar poświęcony akcesoriom. Dzięki temu użytkownik szybciej dociera do informacji odpowiadających jego potrzebie.
Strona kontaktowa
Czysta strona kontaktowa z danymi teleadresowymi i formularzem kontaktowym.
Copywriting
Copywriting w tym projekcie musiał być przede wszystkim użytkowy i pomagać odbiorcy w poruszaniu się po ofercie.
Komunikaty na stronie głównej, opisy kategorii, FAQ i formularze zostały napisane tak, by jasno wyjaśniać, co znajduje się w danej sekcji i jaki powinien być kolejny krok.
W przypadku Strefy TB szczególnie ważne było też odróżnienie informacji wizerunkowej od produktowej. Strona ma budować świadomość marki, ale głównym zadaniem serwisu jest pomoc w znalezieniu właściwego produktu.
Jeśli potrzebujesz podobnego połączenia projektu graficznego, struktury treści i języka marki, zobacz usługę copywriting.
Development
Serwis został wdrożony na WordPressie, z systemem CMS opartym na spójnych, powtarzalnych komponentach. Dzięki temu zespół klienta może zarządzać ofertą bez przebudowy całej strony.
Wdrożyliśmy m.in. katalog produktów, kategorie i podkategorie, filtrowanie, kartę produktową, ogólną wyszukiwarkę, moduł FAQ i stronę kontaktową z formularzem. Karta produktowa zawiera zdjęcie oraz wszystkie szczegółowe informacje dotyczące produktu, co pozwala użytkownikowi zweryfikować właściwy wariant bez szukania danych w innych miejscach.
FAQ zostało podzielone na obszar tuszów i tonerów oraz część dotyczącą akcesoriów. To ważne, bo pytania użytkowników w tych kategoriach są różne. Serwis musiał odpowiadać na typowe wątpliwości przed zakupem lub kontaktem z dystrybutorem.
Właścicielem marki jest AB S.A., a oficjalna strona Strefy TB wskazuje, że AB S.A. stoi za marką i jej rozwojem w ramach szerokiego portfolio produktów IT i CE.
Podsumowanie
Serwis WWW Strefa TB uporządkował cyfrową obecność marki i zamienił rozbudowane portfolio produktowe w czytelny katalog online. Zamiast rozproszonej informacji użytkownik otrzymał jedno miejsce, w którym może przejść od ogólnej kategorii do konkretnego produktu, używając filtrów, wyszukiwarki i logicznie zaprojektowanej struktury.
Nasze działania:
- 2 miesiące realizacji: w tym czasie przygotowaliśmy kompletny serwis produktowo-wizerunkowy – od UX/UI po development.
- 39 092 wejścia na stronę: serwis zaczął pracować jako realny punkt dostępu do informacji o ofercie Strefy TB.
- WordPress jako technologia: wdrożenie na CMS pozwoliło klientowi zarządzać ofertą i rozwijać katalog produktów.
- Czytelny katalog produktów: podział na kategorie, podkategorie, karty produktowe i wyszukiwarkę ułatwił użytkownikom odnalezienie właściwego produktu.
- Szybsze wyszukiwanie asortymentu: filtrowanie po marce, kolorze i słowie kluczowym skróciło drogę od potrzeby do konkretnego produktu.
WYNIKI
Serwis „Strefa TB” skutecznie uporządkował obecność produktową marki w digitalu, stając się głównym źródłem wiedzy o asortymencie dla klientów i dystrybutorów.
CZAS REALIZACJI
2 mies.
WEJŚCIA NA STRONĘ
39 092
TECHNOLOGIA
WordPress
Potrzebujesz nowego serwisu WWW?