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)

1. Prototype this!
From user journey to prototyping
By Royi Benyossef (+royiby)

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. Prolog
The what & why of this

4. Prototype this! by Royi Benyossef (+royiby)
Motivation
(What do we want?!)

5. Prototype this! by Royi Benyossef (+royiby)
Motivation
UI Beautiful

6. Prototype this! by Royi Benyossef (+royiby)
Motivation
UI Beautiful
Original

7. Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI
UX
Intuitive

8. Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI
UX
“Intuitive” (less original)

9. Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI
UX
Intuitive
Functional

10. Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI
- UX
Workflow
Efficient

11. Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI
- UX
Workflow
Efficient
Effective

12. Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI
- UX
Workflow
Efficient
Effective
Productive

13. Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI
- UX
Workflow
Efficient
Effective
Productive
Pleasant

14. Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI
- UX
- Workflow
Blood pressure
Low

15. Prototype this! by Royi Benyossef (+royiby)
HOW?

16. Prototype this! by Royi Benyossef (+royiby)
Prototype
all the
things!!!

17. ?
??
?
? ?
?
?

18. Prototype this! by Royi Benyossef (+royiby)
Glossary
(Its Snobbish for definitions ;)

19. Prototype this! by Royi Benyossef (+royiby)
Glossary
User journey Abstract flow

20. Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey
Wireframes
Mock-up

21. Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey
Wireframes
Mock-up
Static UI

22. Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey
Wireframes
Mock-up
Static UI
Screen-by-screen

23. Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey
- Wireframes
Prototype
Mock-up

24. Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey
- Wireframes
Prototype
Mock-up
Dynamic flow

25. Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey
- Wireframes
- Prototype
Styleguide
Reusable UI definitions

26. Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey
- Wireframes
- Prototype
Styleguide
Reusable UI definitions
By UI component

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. Theory
The why of how

29. Prototype this! by Royi Benyossef (+royiby)
Wireframes are dead
(Good!)

30. Prototype this! by Royi Benyossef (+royiby)
Wireframes are dead!
Why? Bad at defining dynamic
interaction

31. Prototype this! by Royi Benyossef (+royiby)
Wireframes are dead!
Why? Bad at defining dynamic
interaction
Not user friendly (IRONY!)

32. Prototype this! by Royi Benyossef (+royiby)
Wireframes are dead!
Why? Bad at defining dynamic
interaction
Not user friendly
Open to interpretation

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. Prototype this! by Royi Benyossef (+royiby)
Alternative
(Prototypes + Style guide)

35. Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!

36. Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!
Usability tests (W/O code)

37. Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!
Usability tests
(Less iterations)

38. Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!
Usability tests
(Less iterations
+ better results)

39. Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!
Usability tests
(Less iterations
+ better results
= PROFIT!)

40. Prototype this! by Royi Benyossef (+royiby)
Alternative
- Prototypes
Style guide
In addition to prototypes

41. Prototype this! by Royi Benyossef (+royiby)
Alternative
- Prototypes
Style guide
In addition to prototypes
Documentation

42. Prototype this! by Royi Benyossef (+royiby)
Alternative
- Prototypes
Style guide
In addition to prototypes
Documentation
Unified design language

43. Practice
Tools & pro-tips

44. Prototype this! by Royi Benyossef (+royiby)
Example
(AIRL)

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. 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. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements
5. Design card with friends:
> Real time collaboration

48. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements
5. Design card with friends:
Real time collaboration
> Version control

49. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements
5. Design card with friends:
Real time collaboration
Version control
> Offline editing

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. 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. 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. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
Prototype
Ignore implicit states

54. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
Prototype
Ignore implicit states
Fill func. states with stories

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. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
- Prototype
Test
Usability tests on prototype

57. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
- Prototype
Test
Usability tests on prototype
Gather information

58. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
- Prototype
Test
Usability tests on prototype
Gather information
Compile changelist

59. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
- Prototype
- Test
Repeat
Shorter cycles

60. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
- Prototype
- Test
Repeat
Shorter cycles
Short feedback loops

61. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
- Prototype
- Test
Repeat
Shorter cycles
Short feedback loops
More flexibility and agility

62. Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
- Requirements
- Prototype
- Test
- Repeat
Build!
Efficient (just once)

63. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
(Common pitfalls and how to avoid them)

64. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
Prioritize Rank flows by feasibility risk

65. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
Prioritize Rank flows by feasibility risk
Prototype from the top down

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. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
Prioritize Rank flows by feasibility risk
Prototype from the top down
(= address risks early on)

68. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
Communicate
Small iterations

69. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
Communicate
Small iterations
(= Flow by Flow)

70. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
Communicate
Small iterations
(= Flow by Flow
{* Tell story to fill gaps})

71. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
Communicate
Small iterations
Small feedback loops

72. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
Communicate
Small iterations
Small feedback loops
(=dev, UX, product, QA)

73. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
Communicate
Small iterations
Small feedback loops
Small and constant dev
reviews

74. Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
- Communicate
Rapid pro.

75. Prototype this! by Royi Benyossef (+royiby)
Tools
(Galore)

76. Prototype this! by Royi Benyossef (+royiby)
Tools
Axure From sketch to full prototype

77. Prototype this! by Royi Benyossef (+royiby)
Tools
Axure From sketch to full prototype
Web, Android and iOS

78. Prototype this! by Royi Benyossef (+royiby)
Tools
Axure From sketch to full prototype
Web, Android and iOS
30 day free trial

79. Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
Pixate
From HiFi WF to full prototype

80. Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
Pixate
From HiFi WF to full prototype
Supports Android & iOS

81. Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
Pixate
From HiFi WF to full prototype
Supports Android & iOS
Native prototype

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. 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. Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
- Pixate
Zeplin
Full prototype

85. Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
- Pixate
Zeplin
Full prototype
Supports Android & iOS

86. Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
- Pixate
Zeplin
Full prototype
Supports Android & iOS
Dev-ux communication tools

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. 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. Prototype this! by Royi Benyossef (+royiby)
Summary
(What did we have here?)

90. Prototype this! by Royi Benyossef (+royiby)
Summary
Wireframes, style guides and prototypes oh my!

91. Prototype this! by Royi Benyossef (+royiby)
Summary
- Wireframes, style guides and prototypes oh my!
Wireframes - BAD!

92. Prototype this! by Royi Benyossef (+royiby)
Summary
- Wireframes, style guides and prototypes oh my!
- Wireframes - BAD!
Alternatives - GOOD!

93. Prototype this! by Royi Benyossef (+royiby)
Summary
- Wireframes, style guides and prototypes oh my!
- Wireframes - BAD!
- Alternatives - GOOD!
Tools aplenty (and free)

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. 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. “We should be building great
things. Things that Don’t yet
exist”

97. I Hope You Liked It
Thank you for listening
By Royi Benyossef (+royiby)