Jak płynnie przejść od etapu projektowania do programowania i uzyskać efekt realizujący cele klienta? Jak usprawnić pracę zespołu i zapewnić efektywną komunikację?

1. Dwa światy
Jak płynnie przejść od etapu projektowania
do programowania i uzyskać efekt
realizujący cele klienta?
Wiedza Babel | 22.05.2018

2. Dobry wieczór!
Maciek Pałubicki
CEO w Blue Paprica
WIEDZA BABEL | 22.05.2018

3. Zanim zaczniemy!
WIEDZA BABEL | 22.05.2018
Źródło; https://giphy.com/

4. Jak projekt widzą
designerzy?
WIEDZA BABEL | 22.05.2018

5. WIEDZA BABEL | 22.05.2018
Źródło; https://giphy.com/

6. Jak projekt widzą
developerzy?
WIEDZA BABEL | 22.05.2018

7. WIEDZA BABEL | 22.05.2018
Źródło; https://alistapart.com/article/object-oriented-ux

8. Jak projekt widzą UXowcy?
WIEDZA BABEL | 22.05.2018

9. To zależy…
WIEDZA BABEL | 22.05.2018

10. Praca wre…
WIEDZA BABEL | 22.05.2018
Źródło; https://giphy.com/, Wikipedia

12. Kto Panu to tak sp…
WIEDZA BABEL | 22.05.2018
U mnie działa!
To oni! Tego nie miało
być!
Źródło; https://giphy.com/

13. Lost in translation. Jak to się mogło
stać?
WIEDZA BABEL | 22.05.2018

14. W czym tkwi problem?
WIEDZA BABEL | 22.05.2018
Brak wspólnego języka i narzędzi
Brak metodologii pracy
Brak zrozumienia celów klienta

15. Narzędzia / język
WIEDZA BABEL | 22.05.2018

16. LEARN BUILD MEASURE
LEARN
Pozyskanie informacji Zebranie podstawowych danych Wywiady i konsultacje z użytkownikami Przygotowanie i omówienie raportu
Praca z metodami Wnioski z raportu
Diagram BPMN, Opracowanie Person,
Customer Journey Map, Value Proposition
Canvas
Opracowanie i omówienie informacji
dostarczonych przez metody
Podsumowanie
Uzupełnienie danych zebranych
etapu metod Service Blueprint Macierz Eisenhovera
BUILD
Projektowanie
Wybranie kluczowych elementów procesu z
Macierzy
Diagram OOUX Przygotowanie i omówienie diagramu
Prioretyzacja obiektów Makiety obiektowe (lo-fi) Omówienie i testowanie makiet obiektowych
Wnioski z testów makiet obiektowych Makiety szczegółowe Testowanie makiet, (procesu zamawiania)
Uzupełnienie danych z testów makiet Projekty graficzne Omówienie i testy projektów graficznych
Produkcja
Warsztaty wewnętrzne z deweloperami: UX
oraz design
Produkcja kodu: backend Testowanie i optymalizacja kodu
Wdrożenie poprawek z etapu testów Produkcja kodu: frontend Powstanie wersji produkcyjnej
MEASURE
Wdrożenie
Przygotowanie dokumentacji i przetestowanie
infrastruktury technologicznej
Wdrożenie nowego systemu i narzędzi
analitycznych
Monitorowanie wskaźników
Rozwój Analiza danych dostarczonych ze wskaźników
Planowanie rozwoju projektu i kolejnych
funkcjonalności.
Konsultacje
Przykładowy proces

17. Diagramy BPMN
Jest to najprostsze narzędzie do zmapowania procesów
biznesowych po stronie klienta. W stosunkowo prosty sposób
pokazuje cel biznesowy w sposób zrozumiały dla biznesu,
projektantów i developerów.
WIEDZA BABEL | 22.05.2018
Źródło; https://www.lucidchart.com/blog/diagrams-for-
dummies-a-BPMN-tutorial

18. Diagramy BPMN
Bleee… to nie dla projektantów,
to dla analityków….
Źródło; https://giphy.com/
WIEDZA BABEL | 22.05.2018

19. Diagramy BPMN — prosty przykład
WIEDZA BABEL | 22.05.2018
Źródło; https://www.lucidchart.com/blog/diagrams-for-
dummies-a-BPMN-tutorial

20. Zawsze musi być GIF
WIEDZA BABEL | 22.05.2018

21. WIEDZA BABEL | 22.05.2018
Źródło; https://giphy.com/

22. Object Oriented UX (OOUX)
Metoda mapowania struktury serwisu przez identyfikację ,
powiązanie i uporządkowanie obiektów zrozumiałych dla
użytkownika.
• Dobrze sprawdza się przy rozbudowanych serwisach contentowych
o skomplikowanej strukturze.
• Skupiamy się na strukturze, nie na flow i interakcji.
• Tworzy język zrozumiały zarówno dla designerów i developerów.
• Zapobiega zbytniej komplikacji systemu.
Źródło; https://alistapart.com/article/object-oriented-ux
WIEDZA BABEL | 22.05.2018

23. OOUX — Krok 1: Definiowanie obiektów
Na bazie briefa lub opisu funkcjonalnego:
• Wyszukujemy wszystkie rzeczowniki – potencjalne obiekty.
• Obiekt musie mieć odzwierciedlenie w rzeczywistym świecie użytkownika.
• Ignorujemy obiekty abstrakcyjne, listy.
• Obiektem jest wydarzenie a nie kalendarz, lokalizacja a nie mapa.
Źródło; https://alistapart.com/article/object-oriented-ux
WIEDZA BABEL | 22.05.2018

24. OOUX — Krok 2: Definiowanie zawartości obiektów
Dla każdego z obiektów definiujemy szczegółowe dane i metadane:
• Wchodzimy na wyższy poziom szczegółowości.
• Dane – szczegółowe parametry obiektu.
• Metadane – dane po których możemy filtrować, sortować.
Źródło; https://alistapart.com/article/object-oriented-ux
WIEDZA BABEL | 22.05.2018

25. OOUX — Krok 3: Powiązanie obiektów
Wyszukujemy powiązania pomiędzy obiektami:
• Jak obiekty mogą się zawierać w sobie?
• W jakiś sposób są powiązane?
• Struktura linkowania systemu.
Źródło; https://alistapart.com/article/object-oriented-ux
WIEDZA BABEL | 22.05.2018

26. OOUX — Krok 4: Ustalenie priorytetów
Dokonujemy priorytetyzacji zdefiniowanych danych i obiektów:
• Priorytet określa istotność elementu a nie jego kolejność w interfejsie.
• Nie projektujemy interfejsu, to tyko uporządkowana struktura.
Źródło; https://alistapart.com/article/object-oriented-ux
WIEDZA BABEL | 22.05.2018

27. Tutaj przydałby się GIF…
WIEDZA BABEL | 22.05.2018

28. Socjomania — Uproszczony OOUX: Etap 1
Definicja obiektów
WIEDZA BABEL | 22.05.2018

29. Socjomania — Uproszczony OOUX: Etap 2
Definicja danych
WIEDZA BABEL | 22.05.2018

30. Socjomania — Uproszczony OOUX: Etap 3
Definicja danych
WIEDZA BABEL | 22.05.2018

31. Socjomania — Uproszczony OOUX: Etap 4
WIEDZA BABEL | 22.05.2018
Prioryteryzacja

32. WIEDZA BABEL | 22.05.2018

33. OOUX – co z tego wynika?
WIEDZA BABEL | 22.05.2018
Wspólny język biznes-projektanci-developerzy
Modularność, tworzenie systemu z komponentów
Kontrola i uporządkowanie struktury

34. Proces
WIEDZA BABEL | 22.05.2018

35. Proces? Po co… ?
WIEDZA BABEL | 22.05.2018
Źródło; https://giphy.com/

36. WIEDZA BABEL | 22.05.2018
Kluczowe elementy
Komunikacja, komunikacja, komunikacja…
Udział zespołu w całym procesie, od początku do końca
Iteracyjność, wyciąganie wniosków

37. WIEDZA BABEL | 22.05.2018
Jak wygląda proces?

38. … a na końcu musi być GIF!
WIEDZA BABEL | 22.05.2018
Źródło; https://giphy.com/

39. Dzięki za uwagę.
Maciej Pałubicki CEO
+48 513 087 660
maciej.palubicki@bluepaprica.com