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)
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
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