Design-dev cooperation and fast Android prototyping

How to bring a product to reality in a few days.

Transcript

1. How to bring a product to reality in a few days: Design-dev cooperation and fast Android prototyping Juhani Lehtimäki @lehtimaeki Pierluigi Rufo @pierluigirufo
2. Designers and developers: No longer a house divided
3. ? Designers and developers: No longer a house divided
6. You know you are in trouble if..
7. “This design cannot be implemented” You know you are in trouble if..
8. “Sorry this has been signed off already” You know you are in trouble if..
9. “Is this design spec final? I will not be changing the UI!” You know you are in trouble if..
10. “Yeah, we have a designer. He’ll make the icons.” You know you are in trouble if..
11. “Programming is not difficult, I’ve done HTML, I know” You know you are in trouble if..
12. How to get out of this loop?
14. Divided we fail
15. Function Logic Linear thinking Technical Aesthetic Intuition Creativity Imagination Diverse = stronger
16. One sided approach: Function over Form Function Logic Linear thinking Technical Aesthetic Intuition Creativity Imagination
19. One sided approach: Form over Function Aesthetic Intuition Creativity Imagination Function Logic Linear thinking Technical
23. Problem solving within a set of constraints Solution Scope Aesthetic Function
24. Aesthetic Function Solution Scope Problem solving within a set of constraints
25. Solution Scope Function Aesthetic Problem solving within a set of constraints
26. Know your domain
27. Start from the user • Discuss assumptions based on user needs • Validate asap through testing • Design pattern exist, let’s use them #1
28. Mental models
29. Personas
30. 7 (+- 2) Short term memory
31. Usability Testing
34. User Make Mistakes And it is your fault
35. Know your stuff • Know platform guidelines • Understand design patterns • Be ready for the “Why?" #2
36. Devs, know:
37. Devs, know:
38. Devs, know:
39. Designers, know:
40. constraintlayout.com Designers, understand basic of:
41. Designers, try:
42. Difficult to implement Easy to implement Important for UX Nice to have for UX
43. Workflow: here we are
45. Step in early • Kick-off meeting and shared documentation • Establish a close interaction and feedback loop • Over-communication better than under-communication #3 DISCOVER DEFINE DEVELOP DELIVER
46. Stakeholder management • Pipe feedback to certain channels • Allow everyone see the whole progress • Communicate WiP • Own the design communication to the customer #4 This UI is not final!
47. Technical constraints User needs Business Goals
48. Keep your priorities in mind • Focus on the core needs • Structure and behaviour first, styles later • Customisation costs #5 MANDATORY IMPORTANT NEEDED NICE TO HAVE P1 P2 P3 P4
49. Interact, interact, interact • Brainstorm instead of handing over • Prototype instead of presentation • Dev should support design explorations • Design with live data help to avoid surprises #6
54. BUILD, TEST, ITERATE
55. Tools can help, a lot
56. Speed and consistency #7 SKETCH • Vector based and adaptive layout • Tons of templates and resources • Plugin integration • Symbols and styles managing ZEPLIN • Easy export • Styleguide • Comment in place • Versions commit messages +
60. Text styles Assets
61. Text styles Assets
62. Text styles Assets
64. ⌃ + ⌘ + E
67. Nadar85
71. A show case story (solutions applied and lessons learned)
72. #1 - Understand the context
73. #1 - Understand the context
74. #1 - Understand the context
75. #2 - Draft the structure
76. #3 - Explore and define
77. #3 - Explore and define
78. #3 - Explore and define
79. #3 - Explore and define
80. #4 - Prototype and test
81. #4 - Prototype and test
82. #4 - Prototype and test
83. #5 - Build and Refine
84. #5 - Build and Refine
85. #5 - Build and Refine
86. #5 - Build and Refine
87. #5 - Build and Refine
88. #6 - Add the NTHs
89. #6 - Add the NTHs
90. androiduipatterns.com
91. • Always have the user in mind • Step in at early stage • Find a good workflow base and keep refining it • Use the right tools • Respect and empathy Takeaways
92. Thank you! @lehtimaeki snappmobile.io @pierluigirufo