Przykład projektowania
z wykorzystaniem UXPin
Tematem projektu jest projekt Landing Page, na którym będzie można zapisać się na premierę książki. Strona ma być miejscem, gdzie autor książki będzie mógł zbierać dane osób, które są zainteresowane jego twórczością (dziełami) i będzie mógł dać im możliwość zakupu bezpośrednio u niego jego książki.
UXPin to innowacyjne narzędzie do projektowania i prototypowania dla wszystkich typów projektantów stron internetowych i UX. Pomoże poprowadzić Twoje projekty od szkiców do prototypów i przez całą drogę do końcowych etapów rozwoju.
UXPin działa bezpośrednio w przeglądarce. Oznacza to, że nie musisz pobierać i instalować żadnego oprogramowania na swoim komputerze.
UXPin zawiera wiele bibliotek pełnych elementów projektowych dla Bootstrap, Foundation, iOS i innych. Możesz po prostu przeciągnąć i upuścić elementy, aby zaprojektować prototypy i projekty interfejsów. Każda biblioteka składa się z przycisków, nawigacji, pasków narzędzi i innych elementów skategoryzowanych w wielu grupach.
Niezależnie od tego, czy chcesz stworzyć interaktywny przycisk w swoim prototypie, czy w pełni funkcjonujący ekran aplikacji, UXPin może to zrobić. To właśnie odróżnia UXPin od innych narzędzi do projektowania UX. Dodatkowo, wszystko to odbywa się w Twojej przeglądarce.
Duża część pracy nad projektem została wykonana przy użyciu Miro, aplikacji, która pozwala mi stworzyć wszystkie techniki pokazane na poniższych zdjęciach.
Przed rozpoczęciem pracy dobrą praktyką jest uzyskanie od klienta briefu, czyli szeregu kluczowych informacji o potencjalnym projekcie. Dobry brief powinien być uporządkowany, mieć odpowiednią kolejność. Można go podzielić na 3 części, które będą zawierały najistotniejsze pytania związane z naszym przyszłym projektem:
1. podstawowe informacje o kliencie.
2. Pytanie o potencjalny projekt.
3. informacja od klienta o konkretnych wymaganiach, jakie musi spełniać produkt końcowy, aby został przez niego zaakceptowany.
Mind Map
Czym jest/jaką rolę pełni taki Landing Page?
Landing Page sprzedaje, a to przekłada się na zysk z późniejszej sprzedaży. Taki Landing Page to pozyskiwanie danych nabywców, takich jak email i imię czy dane osób potencjalnie zainteresowanych.
Landing Page to także strona internetowa, może to być One Page, która będzie również dostępna na różnych urządzeniach, na telefonie, tablecie czy komputerze.
Landing Page to także analityka, ponieważ śledzimy naszą grupę docelową – kto to kupuje, śledzimy także środowisko, z którego pochodzą itd. Taka analityka to również konwersja.
Landing Page to także promocja, a więc zwiększanie zasięgu, funkcja informacyjna, bo dajemy ludziom znać, że ktoś taki w ogóle istnieje (jak nasz autor książki i sama książka). Do tego możliwość kontaktu i interakcji z autorem książki. To także reklama, a co się z tym wiąże – kanały social media, czyli na przykład Facebook, Instagram czy LinkedIn.
User Centered Design Canvas
1. Biznes
– Landing Page dla newslettera zakupu książki
– Autor książki (biznes)
2. Użytkownicy
– Przypadkowi czytelnicy
– Przypadkowe osoby (np. zakup na prezent)
– Fani serii / Fani autora
3. Problemy
– Szukają oficjalnego źródła informacji o dystrybucji
– Chcą pominąć pośredników/sklepy
– Oczekują czegoś ekstra za swoją lojalność wobec autora
– Chcą mieć bliższy kontakt z autorem
– Mają lepsze lub gorsze doświadczenia z dużymi sklepami/księgarniami
4. Motywy
– Kupują tylko z oficjalnych źródeł
– Lubią mieć bliski kontakt z autorem
– Chcą otrzymać coś ekstra/być docenionym
– Nie chcą wspierać sklepowych gigantów
5. Obawy
– Nie zrozumieją sensu/ przesłania newslettera
– Mogą mieć obawy dotyczące przetwarzania danych
– Mogą nie wiedzieć, czy newsletter pochodzi z legalnego źródła – próba phishingu
– Mogą nie być pewni, że proces zapisu zakończył się sukcesem
– Brak gratyfikacji za oczekiwanie/ zapisanie się do newslettera
6. Rozwiązania
– Adnotacja od autora książki + kontakt przez oficjalny adres e-mail
– Każda książka będzie sprzedawana bezpośrednio od wydawcy z pominięciem sklepu
– Przy zapisie dodatkowy bonus w postaci PDF z dodatkową treścią, dostępny tylko dla osób zapisanych
– Oprócz zapisania się na zakup książki, na listę mailingową zostanie udostępniony link do webinaru prowadzonego przez autora, na którym będzie można zadać mu bezpośrednio pytania
7. Alternatywy
– Zakup online w sklepie/ księgarni sieciowej
– Czekanie i kupno książki na rynku wtórnym
– Zakup w lokalnym, stacjonarnym sklepie
8. Przewaga konkurencyjna
– Bezpośredni kontakt z autorem
– Niższa cena dzięki pominięciu sklepów
– Dodatkowa treść, której czytelnik nie dostanie nigdzie indziej
9. Unikalna wartość
– Dodatkowa treść, której czytelnik nie dostanie nigdzie indziej
SWOT
Landing Page dla newslettera zakupu książki
MoSCoW
Landing Page dla newslettera zakupu książki
Persona
O personie w skrócie – Adam jest mężczyzną w wieku 35 lat, mieszka w domu jednorodzinnym na obrzeżach dużego miasta (Warszawa), z żoną i dwójką dzieci. Pracuje w małej firmie produkującej części samochodowe.
Mapa empatii (ang. Empathy Map)
Mapa empatii naszej persony.
Podróż klienta (Customer journey)
Czas sprawdzić, jakie emocje towarzyszą naszej grupie docelowej, naszemu użytkownikowi, na poszczególnych etapach procesu, kiedy jest w fazie poszukiwania produktu, poprzez etapy pośrednie, aż do końca, czyli etapu, w którym użytkownik osiąga swój cel, a nasz produkt spełnia swoją główną rolę.
Mapa przepływu (Flow Map)
Landing Page dla newslettera zakupu książki.
Architektura informacji (Information Architecture)
Landing Page dla newslettera zakupu książki.
Low-Fi - Landing Page
Landing Page dla newslettera zakupu książki.
UI Mobilne
Landing Page dla newslettera zakupu książki.
UI Tablet
Landing Page dla newslettera zakupu książki.
