Mobile First Design

Jak przygotować swój biznes e-commerce na sprzedaż do nowoczesnego konsumenta?

1

O mnie

Borys Skraba - CEO, Bold Brand Commerce, 38 lat, ponad 15 lat doświadczeń w IT.

Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą. Ale kiedy firma przestaje być twórcza, kiedy uważa, że osiągnęła doskonałość i teraz musi tylko produkować – już po niej.

Henry Ford

„

Standardowy proces projektowania RWD wygląda tak…

Szkic/Makiety/Prototyp Projekt graf. interfejsu Wdrożenie

Dostosowanie

Jednak „dostosowywanie”

to „nie projektowanie”!

dostosowywanie

projektowanie

- brak stosowania konwencji znanych dla użytkowników smartfonów („gesty”) - przeładowanie skryptami javascript (błędne działanie) - strona jest ciężka… na siłę próbuje się dostosować wszystkie elementy zaprojektowane dla wersji desktop

Mobile First Design pozwala uniknąć takich błędów…

Ważny jest kontekst…

Proces projektowania w ujęciu RWD Mobile First

Wiedza o użytkowniku Strateg, Projektant interakcji

Architektura informacji Strateg, Projektant interakcji, Projektant interfejsów, Inżynier IT

Projektowanie Strateg, Projektant interakcji, Projektant interfejsów, Inżynier IT

Wdrożenie Projektant interakcji, Inżynier IT

Użytkownik Architektura informacji

Test

InterfejsGraficzny

MakietaPrototyp

Wdrożenie

Szkic

Projektowanie

12

Kroki etapu projektowego

Architektura informacji

Makieta/prototyp

Szkic Szkic

Interfejs

Makieta/prototyp

Szkic

Interfejs Interfejs

Makieta/prototyp

13

Studium przypadku (jeszcze w trakcie realizacji) księgarnia internetowa

14

Zbadaliśmy i zebraliśmy potrzeby klientów…

Mobile - szybkie znalezienie wybranej pozycji z działu w celu porównania cen (efekt ROPO) - szybkie zapamiętanie wybranej pozycji

Tablet - sprawne znalezienie wybranej pozycji - pozytywne doświadczenie zakupowe -> wyzwanie: formularz logowania/rejestracji maksymalnie „przyjazny”

Desktop - pozytywne doświadczenie z przeglądania całego katalogu książek (shopper vs buyer) - pozytywne doświadczenie na karcie produktu (wyzwanie: na nowo pokazać, że książka to książka, a nie „obrazek”)

15

Mobile: szybkie znalezienie pozycji w dziale

16

Tablet: sprawne znalezienie pozycji

17

Tablet: pozytywne doświadczenie - checkout

18

Desktop: pozytywne doświadczenie - katalog

19

Desktop: pozytywne doświadczenie - produkt

20

Mobile First

Architektura informacji

Makieta/prototyp

Szkic Szkic

Interfejs

Makieta/prototyp

Szkic

Interfejs Interfejs

Makieta/prototyp

21

Dziękuję za uwagę

Borys SkrabaCEO Bold Brand Commerce e-mail: borys.skraba@bold.net.pl, tel: +48 501 351 542 www.bold.net.pl