Upload
royi-benyossef
View
913
Download
1
Embed Size (px)
Citation preview
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
Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI- UX
WorkflowEfficientEffectiveProductive
Prototype this! by Royi Benyossef (+royiby)
Motivation
- UI- UX
WorkflowEfficientEffectiveProductivePleasant
Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey
WireframesMock-upStatic UIScreen-by-screen
Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey- Wireframes
PrototypeMock-upDynamic flow
Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey- Wireframes- Prototype
Styleguide
Reusable UI definitions
Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey- Wireframes- Prototype
Styleguide
Reusable UI definitionsBy UI component
Prototype this! by Royi Benyossef (+royiby)
Glossary
- User journey- Wireframes- Prototype
Styleguide
Reusable UI definitionsBy UI component(Helps build a design lang.)
Prototype this! by Royi Benyossef (+royiby)
Wireframes are dead!
Why? Bad at defining dynamic interaction
Prototype this! by Royi Benyossef (+royiby)
Wireframes are dead!
Why? Bad at defining dynamic interactionNot user friendly (IRONY!)
Prototype this! by Royi Benyossef (+royiby)
Wireframes are dead!
Why? Bad at defining dynamic interactionNot user friendlyOpen to interpretation
Prototype this! by Royi Benyossef (+royiby)
Wireframes are dead!
Why? Bad at defining dynamic interactionNot user friendlyOpen to interpretationDeath & waste by documentation
Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!Usability tests (W/O code)
Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!Usability tests
(Less iterations)
Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!Usability tests
(Less iterations + better results)
Prototype this! by Royi Benyossef (+royiby)
Alternative
Prototypes NOT wireframes!Usability tests
(Less iterations + better results = PROFIT!)
Prototype this! by Royi Benyossef (+royiby)
Alternative
- Prototypes
Style guideIn addition to prototypes
Prototype this! by Royi Benyossef (+royiby)
Alternative
- Prototypes
Style guideIn addition to prototypesDocumentation
Prototype this! by Royi Benyossef (+royiby)
Alternative
- Prototypes
Style guideIn addition to prototypesDocumentationUnified design language
Prototype this! by Royi Benyossef (+royiby)
Example
User Journey 1. Login2. My cards3. New card:send invites4. Get responses5. Design card with friends6. Order prints
Prototype this! by Royi Benyossef (+royiby)
Example
User Journey 1. Login2. My cards3. New card:send invites4. Get responses5. Design card with friends6. Order prints
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements5. Design card with friends:
> Real time collaboration
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements5. Design card with friends:
Real time collaboration> Version control
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements5. Design card with friends:
Real time collaborationVersion control> Offline editing
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements5. Design card with friends:
Real time collaborationVersion controlOffline editing> Sync when online
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements5. Design card with friends:
Real time collaborationVersion controlOffline editingSync when online> Notifications
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey
Requirements5. Design card with friends:
Real time collaborationVersion controlOffline editingSync when onlineNotifications
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements
Prototype Ignore implicit states
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements
Prototype Ignore implicit statesFill func. states with stories
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements
Prototype Ignore implicit statesFill func. states with storiesFill gaps with stories
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements- Prototype
Test
Usability tests on prototype
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements- Prototype
Test
Usability tests on prototypeGather information
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements- Prototype
Test
Usability tests on prototypeGather informationCompile changelist
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements- Prototype- Test
Repeat
Shorter cycles
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements- Prototype- Test
Repeat
Shorter cyclesShort feedback loops
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements- Prototype- Test
Repeat
Shorter cyclesShort feedback loopsMore flexibility and agility
Prototype this! by Royi Benyossef (+royiby)
Example
- User Journey- Requirements- Prototype- Test- Repeat
Build!
Efficient (just once)
Prototype this! by Royi Benyossef (+royiby)
Pro-tips
Prioritize Rank flows by feasibility riskPrototype from the top down
Prototype this! by Royi Benyossef (+royiby)
Pro-tips
Prioritize Rank flows by feasibility riskPrototype from the top down
(= address risks early on)
Prototype this! by Royi Benyossef (+royiby)
Pro-tips
Prioritize Rank flows by feasibility riskPrototype from the top down
(= address risks early on)
Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
CommunicateSmall iterations
(= Flow by Flow)
Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
CommunicateSmall iterations
(= Flow by Flow{* Tell story to fill gaps})
Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
CommunicateSmall iterationsSmall feedback loops
Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
CommunicateSmall iterationsSmall feedback loops
(=dev, UX, product, QA)
Prototype this! by Royi Benyossef (+royiby)
Pro-tips
- Prioritize
CommunicateSmall iterationsSmall feedback loopsSmall and constant dev reviews
Prototype this! by Royi Benyossef (+royiby)
Tools
Axure From sketch to full prototypeWeb, Android and iOS
Prototype this! by Royi Benyossef (+royiby)
Tools
Axure From sketch to full prototypeWeb, Android and iOS30 day free trial
Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
PixateFrom HiFi WF to full prototypeSupports Android & iOS
Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
PixateFrom HiFi WF to full prototypeSupports Android & iOSNative prototype
Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
PixateFrom HiFi WF to full prototypeSupports Android & iOSNative prototypeOne click sync
Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure
PixateFrom HiFi WF to full prototypeSupports Android & iOSNative prototypeOne click syncFree!!! (10x Google)
Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure- Pixate
ZeplinFull prototypeSupports Android & iOS
Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure- Pixate
ZeplinFull prototypeSupports Android & iOSDev-ux communication tools
Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure- Pixate
ZeplinFull prototypeSupports Android & iOSDev-ux communication toolsStyle guide update tools
Prototype this! by Royi Benyossef (+royiby)
Tools
- Axure- Pixate
ZeplinFull prototypeSupports Android & iOSDev-ux communication toolsStyle guide update tools1st project’s free
Prototype this! by Royi Benyossef (+royiby)
Summary
- Wireframes, style guides and prototypes oh my!
Wireframes - BAD!
Prototype this! by Royi Benyossef (+royiby)
Summary
- Wireframes, style guides and prototypes oh my!- Wireframes - BAD!
Alternatives - GOOD!
Prototype this! by Royi Benyossef (+royiby)
Summary
- Wireframes, style guides and prototypes oh my!- Wireframes - BAD!- Alternatives - GOOD!
Tools aplenty (and free)
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
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