Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

From user journey to prototyping

1.099 Aufrufe

Veröffentlicht am

Wireframes are dead and for good reasons.
In this session we'll demonstrate the motivation behind graduating to the new world of rapid prototyping from the old static wireframes as a more efficient and productive way of product design which will benefit pre-seed startups and entrepreneurs just as much as it will benefit R&D teams in large companies (maybe more)

Veröffentlicht in: Technologie

From user journey to prototyping

  1. 1. Prototype this! From user journey to prototyping By Royi Benyossef (+royiby)
  2. 2. Prototype this! by Royi Benyossef (+royiby) Android developer since 2009. GDG Herzliya co-founder. Android speaker and lecturer. Android Mentor for Google Launchpad. Android GDE 2013, 2014, 2015. Developer relations manager @ Stealth Royi Benyossef
  3. 3. Prolog The what & why of this
  4. 4. Prototype this! by Royi Benyossef (+royiby) Motivation (What do we want?!)
  5. 5. Prototype this! by Royi Benyossef (+royiby) Motivation UI Beautiful
  6. 6. Prototype this! by Royi Benyossef (+royiby) Motivation UI Beautiful Original
  7. 7. Prototype this! by Royi Benyossef (+royiby) Motivation - UI UX Intuitive
  8. 8. Prototype this! by Royi Benyossef (+royiby) Motivation - UI UX “Intuitive” (less original)
  9. 9. Prototype this! by Royi Benyossef (+royiby) Motivation - UI UX Intuitive Functional
  10. 10. Prototype this! by Royi Benyossef (+royiby) Motivation - UI - UX Workflow Efficient
  11. 11. Prototype this! by Royi Benyossef (+royiby) Motivation - UI - UX Workflow Efficient Effective
  12. 12. Prototype this! by Royi Benyossef (+royiby) Motivation - UI - UX Workflow Efficient Effective Productive
  13. 13. Prototype this! by Royi Benyossef (+royiby) Motivation - UI - UX Workflow Efficient Effective Productive Pleasant
  14. 14. Prototype this! by Royi Benyossef (+royiby) Motivation - UI - UX - Workflow Blood pressure Low
  15. 15. Prototype this! by Royi Benyossef (+royiby) HOW?
  16. 16. Prototype this! by Royi Benyossef (+royiby) Prototype all the things!!!
  17. 17. ? ?? ? ? ? ? ?
  18. 18. Prototype this! by Royi Benyossef (+royiby) Glossary (Its Snobbish for definitions ;)
  19. 19. Prototype this! by Royi Benyossef (+royiby) Glossary User journey Abstract flow
  20. 20. Prototype this! by Royi Benyossef (+royiby) Glossary - User journey Wireframes Mock-up
  21. 21. Prototype this! by Royi Benyossef (+royiby) Glossary - User journey Wireframes Mock-up Static UI
  22. 22. Prototype this! by Royi Benyossef (+royiby) Glossary - User journey Wireframes Mock-up Static UI Screen-by-screen
  23. 23. Prototype this! by Royi Benyossef (+royiby) Glossary - User journey - Wireframes Prototype Mock-up
  24. 24. Prototype this! by Royi Benyossef (+royiby) Glossary - User journey - Wireframes Prototype Mock-up Dynamic flow
  25. 25. Prototype this! by Royi Benyossef (+royiby) Glossary - User journey - Wireframes - Prototype Styleguide Reusable UI definitions
  26. 26. Prototype this! by Royi Benyossef (+royiby) Glossary - User journey - Wireframes - Prototype Styleguide Reusable UI definitions By UI component
  27. 27. Prototype this! by Royi Benyossef (+royiby) Glossary - User journey - Wireframes - Prototype Styleguide Reusable UI definitions By UI component (Helps build a design lang.)
  28. 28. Theory The why of how
  29. 29. Prototype this! by Royi Benyossef (+royiby) Wireframes are dead (Good!)
  30. 30. Prototype this! by Royi Benyossef (+royiby) Wireframes are dead! Why? Bad at defining dynamic interaction
  31. 31. Prototype this! by Royi Benyossef (+royiby) Wireframes are dead! Why? Bad at defining dynamic interaction Not user friendly (IRONY!)
  32. 32. Prototype this! by Royi Benyossef (+royiby) Wireframes are dead! Why? Bad at defining dynamic interaction Not user friendly Open to interpretation
  33. 33. Prototype this! by Royi Benyossef (+royiby) Wireframes are dead! Why? Bad at defining dynamic interaction Not user friendly Open to interpretation Death & waste by documentation
  34. 34. Prototype this! by Royi Benyossef (+royiby) Alternative (Prototypes + Style guide)
  35. 35. Prototype this! by Royi Benyossef (+royiby) Alternative Prototypes NOT wireframes!
  36. 36. Prototype this! by Royi Benyossef (+royiby) Alternative Prototypes NOT wireframes! Usability tests (W/O code)
  37. 37. Prototype this! by Royi Benyossef (+royiby) Alternative Prototypes NOT wireframes! Usability tests (Less iterations)
  38. 38. Prototype this! by Royi Benyossef (+royiby) Alternative Prototypes NOT wireframes! Usability tests (Less iterations + better results)
  39. 39. Prototype this! by Royi Benyossef (+royiby) Alternative Prototypes NOT wireframes! Usability tests (Less iterations + better results = PROFIT!)
  40. 40. Prototype this! by Royi Benyossef (+royiby) Alternative - Prototypes Style guide In addition to prototypes
  41. 41. Prototype this! by Royi Benyossef (+royiby) Alternative - Prototypes Style guide In addition to prototypes Documentation
  42. 42. Prototype this! by Royi Benyossef (+royiby) Alternative - Prototypes Style guide In addition to prototypes Documentation Unified design language
  43. 43. Practice Tools & pro-tips
  44. 44. Prototype this! by Royi Benyossef (+royiby) Example (AIRL)
  45. 45. Prototype this! by Royi Benyossef (+royiby) Example User Journey 1. Login 2. My cards 3. New card:send invites 4. Get responses 5. Design card with friends 6. Order prints
  46. 46. Prototype this! by Royi Benyossef (+royiby) Example User Journey 1. Login 2. My cards 3. New card:send invites 4. Get responses 5. Design card with friends 6. Order prints
  47. 47. Prototype this! by Royi Benyossef (+royiby) Example - User Journey Requirements 5. Design card with friends: > Real time collaboration
  48. 48. Prototype this! by Royi Benyossef (+royiby) Example - User Journey Requirements 5. Design card with friends: Real time collaboration > Version control
  49. 49. Prototype this! by Royi Benyossef (+royiby) Example - User Journey Requirements 5. Design card with friends: Real time collaboration Version control > Offline editing
  50. 50. Prototype this! by Royi Benyossef (+royiby) Example - User Journey Requirements 5. Design card with friends: Real time collaboration Version control Offline editing > Sync when online
  51. 51. Prototype this! by Royi Benyossef (+royiby) Example - User Journey Requirements 5. Design card with friends: Real time collaboration Version control Offline editing Sync when online > Notifications
  52. 52. Prototype this! by Royi Benyossef (+royiby) Example - User Journey Requirements 5. Design card with friends: Real time collaboration Version control Offline editing Sync when online Notifications
  53. 53. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements Prototype Ignore implicit states
  54. 54. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements Prototype Ignore implicit states Fill func. states with stories
  55. 55. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements Prototype Ignore implicit states Fill func. states with stories Fill gaps with stories
  56. 56. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements - Prototype Test Usability tests on prototype
  57. 57. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements - Prototype Test Usability tests on prototype Gather information
  58. 58. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements - Prototype Test Usability tests on prototype Gather information Compile changelist
  59. 59. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements - Prototype - Test Repeat Shorter cycles
  60. 60. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements - Prototype - Test Repeat Shorter cycles Short feedback loops
  61. 61. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements - Prototype - Test Repeat Shorter cycles Short feedback loops More flexibility and agility
  62. 62. Prototype this! by Royi Benyossef (+royiby) Example - User Journey - Requirements - Prototype - Test - Repeat Build! Efficient (just once)
  63. 63. Prototype this! by Royi Benyossef (+royiby) Pro-tips (Common pitfalls and how to avoid them)
  64. 64. Prototype this! by Royi Benyossef (+royiby) Pro-tips Prioritize Rank flows by feasibility risk
  65. 65. Prototype this! by Royi Benyossef (+royiby) Pro-tips Prioritize Rank flows by feasibility risk Prototype from the top down
  66. 66. Prototype this! by Royi Benyossef (+royiby) Pro-tips Prioritize Rank flows by feasibility risk Prototype from the top down (= address risks early on)
  67. 67. Prototype this! by Royi Benyossef (+royiby) Pro-tips Prioritize Rank flows by feasibility risk Prototype from the top down (= address risks early on)
  68. 68. Prototype this! by Royi Benyossef (+royiby) Pro-tips - Prioritize Communicate Small iterations
  69. 69. Prototype this! by Royi Benyossef (+royiby) Pro-tips - Prioritize Communicate Small iterations (= Flow by Flow)
  70. 70. Prototype this! by Royi Benyossef (+royiby) Pro-tips - Prioritize Communicate Small iterations (= Flow by Flow {* Tell story to fill gaps})
  71. 71. Prototype this! by Royi Benyossef (+royiby) Pro-tips - Prioritize Communicate Small iterations Small feedback loops
  72. 72. Prototype this! by Royi Benyossef (+royiby) Pro-tips - Prioritize Communicate Small iterations Small feedback loops (=dev, UX, product, QA)
  73. 73. Prototype this! by Royi Benyossef (+royiby) Pro-tips - Prioritize Communicate Small iterations Small feedback loops Small and constant dev reviews
  74. 74. Prototype this! by Royi Benyossef (+royiby) Pro-tips - Prioritize - Communicate Rapid pro.
  75. 75. Prototype this! by Royi Benyossef (+royiby) Tools (Galore)
  76. 76. Prototype this! by Royi Benyossef (+royiby) Tools Axure From sketch to full prototype
  77. 77. Prototype this! by Royi Benyossef (+royiby) Tools Axure From sketch to full prototype Web, Android and iOS
  78. 78. Prototype this! by Royi Benyossef (+royiby) Tools Axure From sketch to full prototype Web, Android and iOS 30 day free trial
  79. 79. Prototype this! by Royi Benyossef (+royiby) Tools - Axure Pixate From HiFi WF to full prototype
  80. 80. Prototype this! by Royi Benyossef (+royiby) Tools - Axure Pixate From HiFi WF to full prototype Supports Android & iOS
  81. 81. Prototype this! by Royi Benyossef (+royiby) Tools - Axure Pixate From HiFi WF to full prototype Supports Android & iOS Native prototype
  82. 82. Prototype this! by Royi Benyossef (+royiby) Tools - Axure Pixate From HiFi WF to full prototype Supports Android & iOS Native prototype One click sync
  83. 83. Prototype this! by Royi Benyossef (+royiby) Tools - Axure Pixate From HiFi WF to full prototype Supports Android & iOS Native prototype One click sync Free!!! (10x Google)
  84. 84. Prototype this! by Royi Benyossef (+royiby) Tools - Axure - Pixate Zeplin Full prototype
  85. 85. Prototype this! by Royi Benyossef (+royiby) Tools - Axure - Pixate Zeplin Full prototype Supports Android & iOS
  86. 86. Prototype this! by Royi Benyossef (+royiby) Tools - Axure - Pixate Zeplin Full prototype Supports Android & iOS Dev-ux communication tools
  87. 87. Prototype this! by Royi Benyossef (+royiby) Tools - Axure - Pixate Zeplin Full prototype Supports Android & iOS Dev-ux communication tools Style guide update tools
  88. 88. Prototype this! by Royi Benyossef (+royiby) Tools - Axure - Pixate Zeplin Full prototype Supports Android & iOS Dev-ux communication tools Style guide update tools 1st project’s free
  89. 89. Prototype this! by Royi Benyossef (+royiby) Summary (What did we have here?)
  90. 90. Prototype this! by Royi Benyossef (+royiby) Summary Wireframes, style guides and prototypes oh my!
  91. 91. Prototype this! by Royi Benyossef (+royiby) Summary - Wireframes, style guides and prototypes oh my! Wireframes - BAD!
  92. 92. Prototype this! by Royi Benyossef (+royiby) Summary - Wireframes, style guides and prototypes oh my! - Wireframes - BAD! Alternatives - GOOD!
  93. 93. Prototype this! by Royi Benyossef (+royiby) Summary - Wireframes, style guides and prototypes oh my! - Wireframes - BAD! - Alternatives - GOOD! Tools aplenty (and free)
  94. 94. Prototype this! by Royi Benyossef (+royiby) Summary - Wireframes, style guides and prototypes oh my! - Wireframes - BAD! - Alternatives - GOOD! - Tools aplenty (and free) Little to no code needed
  95. 95. Prototype this! by Royi Benyossef (+royiby) Summary - Wireframes, style guides and prototypes oh my! - Wireframes - BAD! - Alternatives - GOOD! - Tools aplenty (and free) - Little to no code needed Iterate, communicate, adapt, repeat
  96. 96. “We should be building great things. Things that Don’t yet exist”
  97. 97. I Hope You Liked It Thank you for listening By Royi Benyossef (+royiby)

×