HP Brand Store

Kontekst i problem biznesowy

HP chciało jednego, spójnego HP Brand Store osadzonego na stronach swoich partnerów e-commerce. Każdy partner ma inny stack, inną dokumentację i inaczej zbudowany sklep. Zanim zaczęliśmy, projekt uchodził za niemożliwy do wdrożenia.

Cel biznesowy: HP Brand Store miał wyglądać natywnie i identycznie w każdym sklepie i u każdego dystrybutora.

Użytkownicy i ich cele

• Kupujący na stronach partnerów: często nie wiedzą, który produkt wybrać, ale znają swoją potrzebę. Brand Store zaczyna właśnie od niej: pomaga wybrać według potrzeby i codziennego użycia (dom, firma, nauka i inne), tak samo układa listing i podpowiada, co jeszcze pasuje: akcesoria i dodatki.
• HP: spójna obecność marki u sprzedawców na każdym rynku.
• Partnerzy e-commerce HP: muszą wdrożyć Brand Store we własnym stacku. Ich problem: każda marka chce czegoś innego, więc potrzebują jasnych wytycznych i działającego wzorca, który mogą przetestować.

Ograniczenia

• Wiele stacków: każdy partner ma własną technologię i własny sposób budowania sklepu.
• Wielu decydentów; uzgodnienia między HP, partnerami i agencją.
• Początkowy sceptycyzm: projekt uchodził za niemożliwy.
• Główne napięcie projektowe: zachować jak największą wartość dla użytkowników i stracić jak najmniej przez ograniczenia techniczne.

Moja rola i zakres

• Art direction całego projektu
• Koncepcja Brand Store / Shop-in-Shop
• Projekt pierwszych stron: fundament, blueprint i system
• Prowadzenie UX Designera (raportuje do mnie), który budował karty produktów i widoki stron, z regularnym feedbackiem, żeby trzymały się art direction
• Bezpośredni kontakt z decydentami HP i spotkania z partnerami e-commerce HP
• Sprzedaż kolejnych koncepcji rozwoju

Proces i najważniejsze decyzje

Projekt miał pięć etapów: sprzedaż koncepcji → ideacja → wstępny projekt → kodowanie widoków → wdrożenie.

1. Sprzedaż koncepcji

Koncepcja Brand Store / Shop-in-Shop została sprzedana HP.

2. Ideacja i wstępny projekt: najpierw system

Pierwsze strony zaprojektowałem jako fundament, blueprint i system: design system Brand Store, na którym powstały karty produktów i widoki stron.

Decyzja: najpierw system.

Dlaczego: skoro każdy partner ma inny stack, tylko system da się dopasować do kolejnych sklepów bez utraty marki.

3. Kodowanie widoków i przekazanie

Widoki przekazaliśmy jako HTML/CSS/JS. Zakodowali je developerzy GPD.

4. Wsparcie wdrożenia: portal i działający prototyp

Dla partnerów zbudowaliśmy:

• wewnętrzny portal (Webflow) z dobrymi praktykami wdrożenia,
• działający prototyp, który testerzy po stronie partnera mogą przeklikać i przetestować,
• wytyczne wdrożenia dla każdego stacku partnera.

Decyzja: jedno źródło prawdy, z którym każdy partner może porównać swoje wdrożenie.

Dlaczego: uwagi dotyczą tej samej wersji, a nie różnych interpretacji pliku projektowego.

5. Dopasowanie do partnerów

Po roku optymalizacji i dopasowywania projektu oraz budowania strategii wdrożenia Brand Store trafia do kolejnych sklepów i dystrybutorów.

Gdzie pomaga AI

AI przyspieszało mi sprawdzanie wariantów i pisanie pierwszych wersji notatek wdrożeniowych dla poszczególnych partnerów. Każdą decyzję weryfikowaliśmy na przeglądach z HP i w testach działającego prototypu u testerów po stronie partnerów.

Rozwiązanie

Rezultaty wymienione w kroku 4, a do tego design system Brand Store i pełny zestaw kart produktów i widoków stron. Portal działa w wewnętrznej domenie i pozostaje prywatny.

Efekt

• Po roku dostosowań i budowania strategii wdrożenia Brand Store startuje u partnerów HP: 12 partnerów w 6 krajach, a kolejni są w drodze, głównie w Europie i obu Amerykach.
• Klient przyjął projekt bardzo dobrze; kierownictwo HP oceniło go i chce rozszerzyć na kolejne rynki, w tym Bliski Wschód.

Czego się nauczyłem i co dalej

• W projekcie z wieloma interesariuszami design system jest też narzędziem negocjacji. Gdy każdy partner ma inne ograniczenia, wspólny system zamienia opinie w konkretne kompromisy.
• Prowadzenie przez osobę raportującą do mnie: regularny feedback utrzymał karty i widoki w zgodzie z art direction, bez przerysowywania ich przeze mnie.
• Dalej: wdrożenie u kolejnych partnerów i na nowych rynkach, w tym na Bliskim Wschodzie.