From user journey to prototyping

Prototype this!

From user journey to prototyping

By Royi Benyossef (+royiby)

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

Prolog

The what & why of this


Motivation

(What do we want?!)


Motivation

UI Beautiful


Motivation

UI BeautifulOriginal


Motivation

- UI

UXIntuitive


Motivation

- UI

UX“Intuitive” (less original)


Motivation

- UI

UXIntuitiveFunctional


Motivation

- UI- UX

WorkflowEfficient


Motivation

- UI- UX

WorkflowEfficientEffective


Motivation

- UI- UX

WorkflowEfficientEffectiveProductive


Motivation

- UI- UX

WorkflowEfficientEffectiveProductivePleasant


Motivation

- UI- UX- Workflow

Blood pressure

Low


HO

W

?


Pro

to

ty

pe

all

th

e

th

ing

s!!!

???

?

? ??

?


Glossary

(Its Snobbish for definitions ;)


Glossary

User journey Abstract flow


Glossary

- User journey

WireframesMock-up


Glossary

- User journey

WireframesMock-upStatic UI


Glossary

- User journey

WireframesMock-upStatic UIScreen-by-screen


Glossary

- User journey- Wireframes

PrototypeMock-up


Glossary

- User journey- Wireframes

PrototypeMock-upDynamic flow


Glossary

- User journey- Wireframes- Prototype

Styleguide

Reusable UI definitions


Glossary


Styleguide

Reusable UI definitionsBy UI component


Glossary


Styleguide

Reusable UI definitionsBy UI component(Helps build a design lang.)

Theory

The why of how


Wireframes are dead

(Good!)


Wireframes are dead!

Why? Bad at defining dynamic interaction



Why? Bad at defining dynamic interactionNot user friendly (IRONY!)



Why? Bad at defining dynamic interactionNot user friendlyOpen to interpretation



Why? Bad at defining dynamic interactionNot user friendlyOpen to interpretationDeath & waste by documentation


Alternative

(Prototypes + Style guide)


Alternative

Prototypes NOT wireframes!


Alternative

Prototypes NOT wireframes!Usability tests (W/O code)


Alternative

Prototypes NOT wireframes!Usability tests

(Less iterations)


Alternative


(Less iterations + better results)


Alternative


(Less iterations + better results = PROFIT!)


Alternative

- Prototypes

Style guideIn addition to prototypes


Alternative

- Prototypes

Style guideIn addition to prototypesDocumentation


Alternative

- Prototypes

Style guideIn addition to prototypesDocumentationUnified design language

Practice

Tools & pro-tips


Example

(AIRL)


Example

User Journey 1. Login2. My cards3. New card:send invites4. Get responses5. Design card with friends6. Order prints


Example

User Journey 1. Login2. My cards3. New card:send invites4. Get responses5. Design card with friends6. Order prints


Example

- User Journey

Requirements5. Design card with friends:

> Real time collaboration


Example

- User Journey


Real time collaboration> Version control


Example

- User Journey


Real time collaborationVersion control> Offline editing


Example

- User Journey


Real time collaborationVersion controlOffline editing> Sync when online


Example

- User Journey


Real time collaborationVersion controlOffline editingSync when online> Notifications


Example

- User Journey


Real time collaborationVersion controlOffline editingSync when onlineNotifications


Example

- User Journey- Requirements

Prototype Ignore implicit states


Example


Prototype Ignore implicit statesFill func. states with stories


Example


Prototype Ignore implicit statesFill func. states with storiesFill gaps with stories


Example

- User Journey- Requirements- Prototype

Test

Usability tests on prototype


Example


Test

Usability tests on prototypeGather information


Example


Test

Usability tests on prototypeGather informationCompile changelist


Example

- User Journey- Requirements- Prototype- Test

Repeat

Shorter cycles


Example


Repeat

Shorter cyclesShort feedback loops


Example


Repeat

Shorter cyclesShort feedback loopsMore flexibility and agility


Example

- User Journey- Requirements- Prototype- Test- Repeat

Build!

Efficient (just once)


Pro-tips

(Common pitfalls and how to avoid them)


Pro-tips

Prioritize Rank flows by feasibility risk


Pro-tips

Prioritize Rank flows by feasibility riskPrototype from the top down


Pro-tips


(= address risks early on)


Pro-tips


(= address risks early on)


Pro-tips

- Prioritize

CommunicateSmall iterations


Pro-tips

- Prioritize


(= Flow by Flow)


Pro-tips

- Prioritize


(= Flow by Flow{* Tell story to fill gaps})


Pro-tips

- Prioritize

CommunicateSmall iterationsSmall feedback loops


Pro-tips

- Prioritize

CommunicateSmall iterationsSmall feedback loops

(=dev, UX, product, QA)


Pro-tips

- Prioritize

CommunicateSmall iterationsSmall feedback loopsSmall and constant dev reviews


Pro-tips

- Prioritize- Communicate

Rapid pro.


Tools

(Galore)


Tools

Axure From sketch to full prototype


Tools

Axure From sketch to full prototypeWeb, Android and iOS


Tools

Axure From sketch to full prototypeWeb, Android and iOS30 day free trial


Tools

- Axure

PixateFrom HiFi WF to full prototype


Tools

- Axure

PixateFrom HiFi WF to full prototypeSupports Android & iOS


Tools

- Axure

PixateFrom HiFi WF to full prototypeSupports Android & iOSNative prototype


Tools

- Axure

PixateFrom HiFi WF to full prototypeSupports Android & iOSNative prototypeOne click sync


Tools

- Axure

PixateFrom HiFi WF to full prototypeSupports Android & iOSNative prototypeOne click syncFree!!! (10x Google)


Tools

- Axure- Pixate

ZeplinFull prototype


Tools

- Axure- Pixate

ZeplinFull prototypeSupports Android & iOS


Tools

- Axure- Pixate

ZeplinFull prototypeSupports Android & iOSDev-ux communication tools


Tools

- Axure- Pixate

ZeplinFull prototypeSupports Android & iOSDev-ux communication toolsStyle guide update tools


Tools

- Axure- Pixate

ZeplinFull prototypeSupports Android & iOSDev-ux communication toolsStyle guide update tools1st project’s free


Summary

(What did we have here?)


Summary

Wireframes, style guides and prototypes oh my!


Summary

- Wireframes, style guides and prototypes oh my!

Wireframes - BAD!


Summary

- Wireframes, style guides and prototypes oh my!- Wireframes - BAD!

Alternatives - GOOD!


Summary

- Wireframes, style guides and prototypes oh my!- Wireframes - BAD!- Alternatives - GOOD!

Tools aplenty (and free)


Summary

- Wireframes, style guides and prototypes oh my!- Wireframes - BAD!- Alternatives - GOOD!- Tools aplenty (and free)

Little to no code needed


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

“We should be building great things. Things that Don’t yet exist”

I Hope You Liked It

Thank you for listening

By Royi Benyossef (+royiby)

Technology

From user journey to prototyping