Fake It Before You Make It / Prototyping UX

A presentation at The UX Conference in London in June 2017 in London, UK by Sergei Golubev

Slide 1

Slide 1

FAKE IT BEFORE YOU MAKE IT #THEUXCONF Sergei Golubev @sgolubev

Slide 2

Slide 2

I’VE BEEN THE HEAD OF IT

Slide 3

Slide 3

MY COLLEAGUES CALL ME “DEVIGNER”

Slide 4

Slide 4

School of UX DESIGN schoolofux.com I’M RUNNING

Slide 5

Slide 5

…AND MY OWN BOOTSTRAPPED PROJECTS

Slide 6

Slide 6

— RUN LEAN — PROTOTYPE IT — TEST IT — MIND THE GAP CODE IN THE NEXT 40 MINS:

Slide 7

Slide 7

RUN LEAN FAKE IT BEFORE YOU MAKE IT

Slide 8

Slide 8

Instead of focusing on designing the actual UX, a ton of documentation is produced… UX DESIGN vs. TL;DR

Slide 9

Slide 9

…designers are just illustrating it…

Slide 10

Slide 10

…and developers coding away never

ending “ just one more thing ”

Slide 11

Slide 11

“ If you think good design is expensive, you should look at the cost of bad design . ” Ralf Steph, CEO of Jaguar

Slide 12

Slide 12

You sure everyone knows the problem they’re solving? Try Lean Canvas .

Slide 13

Slide 13

Set hypothesis ↓ Prototype ↓ Test with users ↓ Iterate Try lean UX

Slide 14

Slide 14

Slide 15

Slide 15

PROTOTYPE IT FAKE IT BEFORE YOU MAKE IT

Slide 16

Slide 16

Prototype as early as possible UX sprint n+1 Development sprint n

Slide 17

Slide 17

“ Prototyping rule no.1: find the quickest path to experience ” Tom Chi, Co

Founder of Google X

Slide 18

Slide 18

Is this really collaborative design?

Slide 19

Slide 19

Why not design together with stakeholders using ProtoPaper Kit

Slide 20

Slide 20

protopaperkit.com

Slide 21

Slide 21

protopaperkit.com

Slide 22

Slide 22

Good ol’ paper never runs out of juice

Slide 23

Slide 23

Prototyping the prototyping kit

Slide 24

Slide 24

QUESTIONS?

Slide 25

Slide 25

You can turn PDF into a clickable prototype

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Bear in mind for confidential projects: it uploads all your stuff to the internets

Slide 29

Slide 29

Works well for confidential projects: exports your prototype to a local drive

Slide 30

Slide 30

Prototype right in the browser

Slide 31

Slide 31

Prototype right in the browser

Slide 32

Slide 32

TEST IT FAKE IT BEFORE YOU MAKE IT

Slide 33

Slide 33

Try to avoid opinionated design, aka BX User Boss’s Experience

Slide 34

Slide 34

Slide 35

Slide 35

You don’t have to go far…

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Use event tracking

Slide 39

Slide 39

Set up goals …

Slide 40

Slide 40

… and track them

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

QUESTIONS?

Slide 44

Slide 44

MIND THE CODE FAKE IT BEFORE YOU MAKE IT

Slide 45

Slide 45

Don’t shoot yourself in the foot. Don't design something you cannot develop .

Slide 46

Slide 46

Understand technical l imitations FPS 60 0

Slide 47

Slide 47

Hard truth: Be ready to sacrifice 50% of your design

Slide 48

Slide 48

Learn a bit of basic coding

Slide 49

Slide 49

“ It's not necessarily that you'll be writing code, but you need to understand what can engineers do and what can they not do . ” Bill Gates

Slide 50

Slide 50

There’s a book for that!

Slide 51

Slide 51

Slide 52

Slide 52

Be nice to your developers

Slide 53

Slide 53

RUN LEAN PROTOTYPE IT TEST IT MIND THE CODE IN THE PAST 40 MINS:

Slide 54

Slide 54

schoolofux.com team@schoolofux.com @theschoolofux THANKS! ANY QUESTIONS?

Slide 55

Slide 55

UX CONFERENCE The

Slide 56

Slide 56

TIME FOR DRINKS #THEUXCONF

Slide 57

Slide 57

UX CONFERENCE The

Slide 58

Slide 58

@samhocevar independent.co.uk 123rf.com stocksnap.io photojojo.com books.google.co.uk movieandtvcorner.com youtube.com/watch?v=d5_h1VuwD6g Photography and images: CREDITS