Strona internetowa dla hurtowni z setkami produktów
Zaprojektowaliśmy kompletny redesign oraz rozbudowę serwisu dla INSTAL-KA, dystrybutora techniki grzewczej, sanitarnej, wentylacji, klimatyzacji oraz odnawialnych źródeł energii. Największym wyzwaniem było uporządkowanie ogromnego katalogu produktów i marek w strukturę, po której klient znajduje właściwe rozwiązanie w kilka kliknięć. Projekt powstał w Figmie, a następnie jako w pełni responsywny prototyp w środowisku Framer.
Zakres prac
Architektura informacji, web design, prototypowanie we Framerze, struktura pod SEO
Kategoria
Strony internetowe
Branża
Hurtownia techniki grzewczej i sanitarnej
Klient
INSTAL-KA
Projekt w skrócie
Wyzwanie
Hurtownia sprzedaje setki produktów od ponad 80 marek producentów i obsługuje dwie różne grupy klientów: inwestorów oraz instalatorów i partnerów handlowych. Dotychczasowy serwis nie odpowiadał na potrzeby żadnej z nich.
Rozwiązanie
Zaprojektowaliśmy architekturę informacji od podstaw, z dwiema równoległymi ścieżkami dojścia do produktu: przez zastosowanie oraz przez producenta. Serwis rozbudowaliśmy o strefy B2B dla instalatorów, partnerów i deweloperów oraz o centrum wiedzy. Każda kategoria otrzymała własny opis przygotowany pod wyszukiwarkę.
Efekt
Kompletny, responsywny prototyp serwisu we Framerze, w którym rozbudowany katalog pozostaje czytelny na każdym poziomie. Struktura przyjmuje kolejne marki i kategorie bez przeprojektowania.
Wyzwanie: katalog, w którym łatwo się zgubić
Hurtownia z branży instalacyjnej sprzedaje setki produktów od ponad 80 marek producentów, a jej klienci to dwie zupełnie różne grupy: inwestorzy szukający rozwiązania dla swojego budynku oraz instalatorzy i partnerzy handlowi, którzy wiedzą dokładnie, czego szukają. Poprzedni serwis nie odpowiadał na potrzeby żadnej z nich. Zaprojektowaliśmy architekturę informacji od podstaw, zaczynając od pytania, jak każda z tych grup naprawdę szuka produktu.
Dwie ścieżki nawigacji
UX
Zamiast jednego drzewa kategorii zbudowaliśmy dwie równoległe ścieżki dojścia do tego samego produktu. Pierwsza prowadzi przez zastosowanie, czyli technikę grzewczą, sanitarną, wentylację, klimatyzację i odnawialne źródła energii. Druga przez producenta, dla klientów przywiązanych do konkretnej marki. Obie kończą się w tym samym miejscu, co skraca drogę do decyzji zakupowej niezależnie od sposobu myślenia użytkownika.
Głębokość bez chaosu
Sama technika grzewcza rozwija się w serwisie na kilka poziomów, od źródeł ciepła, przez kotły gazowe, pelletowe i elektryczne, pompy ciepła, bufory i zasobniki, aż po odbiorniki ciepła i armaturę. Każdy poziom otrzymał własny opis wyjaśniający, komu dane rozwiązanie służy i dlaczego. Dzięki temu rozbudowana struktura pozostaje czytelna, a użytkownik na każdym etapie wie, gdzie się znajduje.
Strefy B2B i centrum wiedzy
Serwis to nie tylko katalog. Zaprojektowaliśmy w nim oddzielne strefy dla instalatorów, partnerów handlowych i deweloperów, każda z własnym logowaniem do platformy i materiałami dopasowanymi do roli użytkownika. Obok nich powstało centrum wiedzy z poradnikami, webinarami, katalogami, cennikami, instrukcjami oraz przeglądem przepisów i trendów rynkowych. To część serwisu, która buduje pozycję eksperta i przyciąga ruch z wyszukiwarki długo po wdrożeniu.
Treść, która pracuje na pozycje
SEO
Każda kategoria i podkategoria otrzymała własny, unikalny opis nasycony frazami, których branża realnie szuka. Hierarchia nagłówków odzwierciedla strukturę katalogu, dzięki czemu wyszukiwarka rozumie relacje między sekcjami. Taka konstrukcja pozwala serwisowi walczyć nie tylko o nazwy marek, ale też o zapytania problemowe, na przykład o dobór pompy ciepła czy ogrzewania podłogowego.
Prototyp gotowy do wdrożenia
Całość powstała najpierw jako makieta w Figmie, a następnie jako działający, responsywny prototyp we Framerze. Takie podejście pozwala zweryfikować użyteczność serwisu jeszcze przed rozpoczęciem prac wdrożeniowych, a klient zamiast statycznych obrazków dostaje produkt, po którym może realnie klikać. Przy projekcie tej skali to jedyny sposób, by sprawdzić, czy nawigacja faktycznie działa.
Zobacz powiązane realizacje i wpisy: Nowoczesna strona internetowa no code dla kancelarii oraz artykuł Dlaczego Twoja strona nie sprzedaje, 7 błędów.
Skalowalna podstawa
FRAMER
Serwis zaprojektowaliśmy tak, by rozbudowa o kolejne marki, kategorie i materiały wiedzowe nie wymagała przeprojektowania struktury. Nowy producent czy nowa grupa produktów wchodzi w istniejący system jako kolejny element, a nie jako wyjątek. To decyduje o tym, czy strona żyje przez lata, czy wymaga przebudowy po roku.
Projekt możesz obejrzeć jako interaktywną makietę: otwórz prototyp serwisu INSTAL-KA. To prezentacja projektu, a nie wdrożony serwis klienta, więc część treści ma charakter poglądowy.
Zobacz inne realizacje
Twoja marka może być następna.
Widziałeś właśnie, jak zamieniamy wyzwania biznesowe w działający produkt cyfrowy. Nie kopiujemy rozwiązań, ale dobieramy narzędzia pod konkretny cel. Jeśli szukasz partnera, który dowiezie podobną jakość dla Twojej firmy, porozmawiajmy o szczegółach.