Konfigurator 3D dla nowej marki ekranów LED

Klient

Inspiring Vision to nowa marka w portfolio If Group - wynajem modułowych ekranów LED na konferencje, targi, gale i koncerty. Za marką stoi spółka Inspiring Future i 21 lat doświadczenia grupy w branży eventowej, ale sama marka i strona ruszały od zera: bez starego serwisu do przebudowy i bez banku zdjęć z dotychczasowych realizacji.

Problem

Modułowego ekranu LED nie da się pokazać jednym zdjęciem. Ten sam sprzęt raz stoi jako pojedynczy nośnik przy wejściu, raz jako pięć osobnych ekranów rozstawionych po sali, a raz jako jedna, szeroka ściana obrazu za sceną. Ktoś, kto dopiero szuka ekranu na swoje wydarzenie, musi tę różnicę zobaczyć - bo to od niej zależy, czego właściwie potrzebuje.

Pokazać jej nie było czym. Marka dopiero ruszała, więc nie istniały zdjęcia z realizacji ani nic, co mogłoby je zastąpić. Zwykły kłopot startującej firmy, tyle że tutaj dotyczył samego sedna oferty.

Trzecia sprawa dotyczyła przyszłości. Klient chciał móc kiedyś poprawić treść samodzielnie, bez dzwonienia do wykonawcy przy każdej literówce. Odruchowo prosiłoby się o WordPressa - ale sześć podstron to za mało, żeby brać na siebie cały jego bagaż wtyczek i aktualizacji.

Rozwiązanie

Skoro zdjęć nie ma, a różnicę między ustawieniami trzeba pokazać, to niech odwiedzający zobaczy sam produkt. Nie na fotografii, tylko w modelu, który obraca się w oknie przeglądarki.

Sercem strony jest konfigurator 3D. Przewijając stronę, odwiedzający przechodzi przez cztery ustawienia ekranu - pojedynczy, złożony, pięć osobno, pięć złączonych w ścianę - i ogląda każde z nich z każdej strony. Zamiast czytać opis konfiguracji, po prostu ją widzi.

Reszta strony pracuje na ten sam cel:

• Kafel prowadzi prosto do wariantu. Odwiedzający klika „grupa połączona” na stronie głównej i ląduje dokładnie w tym ustawieniu konfiguratora - nie gdzieś w pobliżu, skąd trzeba się dopiero doszukiwać.
• Render zamiast cudzych zdjęć. Pierwszy ekran niesie render sprzętu, nie fotografia z czyjegoś eventu. Świadoma decyzja: lepiej pokazać produkt uczciwie, niż udawać historię, której marka jeszcze nie ma.
• Edycja treści bez WordPressa. Klient poprawia teksty sam, przez prosty panel, a strona pokazywana odwiedzającym zostaje statyczna, czyli szybka. Panel przeszedł audyt bezpieczeństwa przed uruchomieniem - formularz wytrzymał test trzydziestu jednoczesnych wysyłek (przeszły trzy, reszta odbiła się od limitu), a treści leżą poza tą częścią serwera, do której da się dostać z internetu.
• Potwierdzenie, które wygląda jak firma. Po wysłaniu zapytania nadawca dostaje kopię w kolorach marki, a nie surowy tekst. Zbudowaną tak, żeby wyglądała identycznie w każdej skrzynce - również tam, gdzie obrazki są domyślnie blokowane.

Wynik

• Wydajność
• Ułatwienia dostępu
• Sprawdzone metody
• SEO

Zmierzone bezpośrednio na produkcji (Lighthouse i PageSpeed Insights, po pełnym wdrożeniu): wariant mobilny 98/100/100/100, wariant desktop - komplet 100 we wszystkich czterech kategoriach.

W praktyce znaczy to tyle, że strona otwiera się od razu - także na telefonie i słabym zasięgu, czyli dokładnie tam, gdzie ogląda ją ktoś stojący na targach albo szukający ekranu w drodze na spotkanie. Model 3D, choć jest najcięższą rzeczą na stronie, pobiera się dopiero wtedy, gdy odwiedzający naprawdę do niego dojedzie: kto obejrzy pierwszy ekran i wróci do wyszukiwarki, nie czeka na niego ani chwili. Sama strona po przygotowaniu do wdrożenia schudła o dwie trzecie.

Drugi zysk jest mniej widoczny, ale w dniu uruchomienia okazał się najważniejszy. Zamiast założyć, że wszystko działa, sprawdziłem po kolei każdy adres na żywym serwerze - i właśnie wtedy wyszło, że strona główna, i tylko ona, wpada w pętlę przekierowań. Naprawione tego samego dnia, zanim ktokolwiek z zewnątrz zdążył na nią wejść. Cała różnica leży między „powinno działać” a „sprawdziłem, że działa”.

Wnioski

Brak historii marki nie musi oznaczać pustej strony - da się ją zastąpić dowodem, który historii nie wymaga: konfiguratorem, w którym produkt widać z każdej strony, i wynikiem pomiaru, który mówi sam za siebie. Ta sama zasada co przy Kancelarii Miszewicz i Dlaczego Nie: budować dokładnie to, czego wymaga dany produkt, nie naginać gotowca.