Prototypowanie UXWarstwa UIKodowanie html, css, jsBackend Wordpress
Czyli o tym jak zbudowaliśmy stronę internetową producenta marki premium
IrixLens to firma oferująca produkty marki premium. Firma znana na świecie w branży fotograficznej, posiada wielu ambasadorów marki. Ponadto, oferuje wiele rozwiązań technologicznych dla fotografów.
Do głównych zadań należało opracowanie intuicyjnej i efektywnej ścieżki podróży użytkownika po stronie internetowej.
Niezbędne było dostosowanie i przedstawienie oferty oraz firmy na stronie w taki sposób, aby mogła w jasny i czytelny sposób opowiedzieć o firmie i zaprezentować ofertę, zakres i możliwości.
Analiza poprzedniej wersji strony oraz przygotowanie danych wejściowych do budowy jej nowej wersji. Mając do dyspozycji narzędzia : Google Analitycs, mapy ciepła : hotjar.com, mouseflow.com przygotowaliiśmy audyt i raport z odbioru strony przez użytkowników oraz stanu widoczności w wyszukiwarce Google.
Chcą przedstawić ofertę premium należało wykonać stronę oddającą prestiż ale jednocześnie czytelną i funkcjonalną. Łatwość poruszania, możliwość przejścia do podstron produktów oraz prezentacja obiektywów w formie interaktywnych animacji było kluczowym założeniem realizacji.
Podczas wspólnych spotkań i rozmów z Klientem najważniejsze było ustalenie potrzeb docelowego Klienta oraz wspólne zaplanowanie oczekiwań względem tworzonej strony.
Po stronie Klienta i jego zespołu zostało wstępnie określone :
W toku prac i spotkań wypracowaliśmy strukturę strony oraz zadowalający podział oferty IrixLens i obiektywów na grupy.
Po tak przygotowanym materiale byliśmy w stanie wykonać prototypy i ustalić :
Tak stworzone makiety po całościowym omówieniu gotowe były aby rozpocząć pracę nad przygotowaniem moodboardów oraz designem UI.
Podczas komponowania moodboardu zostały wybrane style dla fontów, kolory, planowanie przestrzeni i contentu w sekcjach. W efekcie został wybrany styl odpowiadający potrzebom marki.
Kolorystyka brandu Irixlens, czarno / biało / niebieska, pozwoliła skorelować design z brandem, a wykonany design UI odzwierciedla rzetelność, profesjonalizm i nowoczesność budując stabilny wizerunek marki.
Animacje i poznawanie produktu przez użytkownika
Co prawda obraz jest wart więcej niż 1000 słów, jednak postanowiliśmy usprawnić to twierdzenie.
Przy wdrożeniu strony postawiliśmy na interakcję. Powodem takiej decyzji było idealne oddanie walorów funkcjonalnych i estetycznych produktu firmy.
W podstronach oferty użytkownik może samodzielnie doświadczać zalet i odkrywać funkcje obiektywów wchodząc w interakcję z samym produktem poprzez jego obracanie, przekręcanie czy poznanie informacji dodatkowych umieszczonych w animowanych ikonach. Dodatkowo dla jednej grupy produktu została wykonana maska odsłaniająca z tła fragmenty produktu.
Wdrożenie Wordpress - dedykowana integracja CMS
Wdrożona strona wyposażona została w minibuilder pozwalający na samodzielnie tworzenie sekcji i bloków z wcześniej już zdefiniowanych ustawień i możliwości. Daje to dużą przewagę w późniejszym zarządzaniu stroną.
Administrator ma przygotowane predefiniowane układy które może wykorzystać przy budowie nowego contentu strony bez potrzeby kontaktu z developerami. Budowa odbywa się poprzez mechanizm drag&drop dający możliwość wyboru konkretnego elementu z listy i umieszczeniu go w konkretnym miejscu.
Strona pomimo animacji i wdrożeń sekcji video ładuje się szybko i jest dobrze zoptymalizowana. Wdrożony został wpełni edytowalny panel produktów oraz pozostałych treści poprzez integrację dedykowaną z CMS Wordpress.
