Tweet
Tweet

Slide 1

Slide 1 text

RAPID PROTOTYPING ROUGH TO READY @ericaheinz

Slide 2

Slide 2 text

“ RALPH WALDO EMERSON Don't be too timid or squeamish about your actions. All life is an experiment. The more experiments you make, the better.”

Slide 3

Slide 3 text

PROTOTYPES what are we talking about?

Slide 4

Slide 4 text

SKETCHES ON PAPER

Slide 5

Slide 5 text

SKETCHES IN SOFTWARE

Slide 6

Slide 6 text

POLISHED MOCKUPS

Slide 7

Slide 7 text

WORKING WEBSITES

Slide 8

Slide 8 text

FAST NON-PRECIOUS INTERACTIVE PROTOTYPES

Slide 9

Slide 9 text

TODAY 1.benefits of prototyping 2.categories and examples 3.process for prototyping 4.tricky bits

Slide 10

Slide 10 text

LATER http://bit.ly/rapid-prototyping @ericaheinz

Slide 11

Slide 11 text

WHY PROTOTYPE don’t waste time

Slide 12

Slide 12 text

GET FEEDBACK even though you don’t want any more

Slide 13

Slide 13 text

usertesting.com

Slide 14

Slide 14 text

“ The problems that plague organizations, or hold them back from greatness, are often small things that happen to be consistently overlooked.” SCOTT BERKUN, “DOES SIZE MATTER FOR IDEAS?”, HBR, VIA FRANCISCO INCHAUSTE, DISTANCE 02

Slide 15

Slide 15 text

ART PROJECTS DESIGN PROJECTS BRAIN, DESIGNED BY SAMUEL DION-GIRARDEAU, FROM THE NOUN PROJECT GLOBE, DESIGNED BY PROLETKULT GRAPHIK, FROM THE NOUN PROJECT

Slide 16

Slide 16 text

“We should embrace the subjective nature of what we do and allow for the multiplicity of responses to thrive, because the mixed pool represents the diversity of human perspective. That diversity fortifies us, makes us strong.” FRANK CHIMERO, THE SHAPE OF DESIGN

Slide 17

Slide 17 text

GET FEEDBACK it’s like cheating, but fair THE RIGHT

Slide 18

Slide 18 text

➡ PROBLEM INTERVIEWS ★ WHAT DOES OUR COMMUNITY NEED? QUALITATIVE ➡ CONCEPT TESTING ★ HOW IS OUR DESIGN PERCEIVED? ➡ USABILITY TESTING ★ HOW ARE THESE FEATURES WORKING? ➡ SOLUTION INTERVIEWS ★ ARE WE SATISFYING CUSTOMERS’ NEEDS?

Slide 19

Slide 19 text

➡ USER SURVEYS ★ WHAT ARE OUR USERS’ PRIORITIES? QUANTITATIVE ➡ ANALYTICS TRACKING ★ WHAT ARE THEY ACTUALLY DOING? ➡ A/B TESTING ★ WHICH LAYOUT IS “BETTER”? ➡ “AARRR” METRICS ★ IS OUR PROJECT SUSTAINABLE?

Slide 20

Slide 20 text

INFORMED ITERATION

Slide 21

Slide 21 text

REDUCE COMPLEXITY internetting is hard

Slide 22

Slide 22 text

infographic by @hyperakt

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

“Design is a path-dependent process… Our early design decisions are like bets whose outcome we will have to live with iteration after iteration.” RYAN SINGER, OF 37SIGNALS, ON QUORA.COM

Slide 25

Slide 25 text

SAVE TIME work simple

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

“ Whatever time we spend on prototyping, we typically save [clients] three to four fold on the backend.” TODD ZAKI WARFEL, AUTHOR OF “PROTOTYPING: A PRACTITIONER’S GUIDE”, SPEAKING AT BIG SPACESHIP

Slide 30

Slide 30 text

FIND YOUR BEST FEATURES learn to let go

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

skimming searching reading judging escaping acquiring protesting connecting wandering flirting recording planning listening

Slide 34

Slide 34 text

DESIGN VERBS NOT NOUNS

Slide 35

Slide 35 text

DESIGN BEHAVIORS NOT OBJECTS

Slide 36

Slide 36 text

DESIGN FLOWS NOT PAGES

Slide 37

Slide 37 text

OUR MEDIUM IS THROWAWAY

Slide 38

Slide 38 text

OUR IMPACT IS CULTURAL

Slide 39

Slide 39 text

PROTOTYPE TYPES where to begin

Slide 40

Slide 40 text

@adaptivepath

Slide 41

Slide 41 text

PAPER PROTOTYPES answer: what goes on the page good for: teams, open thinking requires: co-location, chutzpah

Slide 42

Slide 42 text

http://v4.jasonsantamaria.com/articles/pretty-sketchy

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

http://www.msimpsondesigns.com/interaction/panda.html

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Jason Robb: http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/

Slide 50

Slide 50 text

PAPER PROTOTYPES attachment level: low benefits: fun, super fast, approachable drawbacks: slow cut-and-paste, no remote access

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

VECTOR PROTOTYPES answer: how flows fit together good for: teams, some clients, text-heavy layouts require: layout skills and programs

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

HOME (GUEST) value props press marketing promo LOG IN HOME (USER) featured items marketing promo followed items SIGN UP FOLLOWING grid/list of items price changes coupons? MARKETING LANDING contest etc ABOUT US CATEGORY PG CATEGORY PG CATEGORY PG best sellers CATEGORY PG CATEGORY PG SUBCATEGORY best sellers CATEGORY PG CATEGORY PG PRODUCT robot verdict price history news feed related items SHOPOBOT.COM REQUIRES LOGIN TRADING POST items friends have items i want items friends want items i have follow USER'S GOOGLE READER subscribe USER'S FACEBOOK WALL USER'S TWITTER FEED ASSETS my stuff current value future value friends wants INTERESTS grid of categories SETTINGS password email prefs SEARCH SEARCH RESULTS OTHER EXPOSURES HEADER LINKS available from any page CATEGORY PG CATEGORY PG PRODUCT V2 robot verdict price history news feed related items item options future value share on FB? tweet? Add to wish list CATEGORY PG CATEGORY PG BLOG contests data analysis

Slide 55

Slide 55 text

List Title List blurb LIST TITLE Mark the ones you've read! Done FACEBOOK AD BOOKVILLE LIST DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE SHARE CLICK Gain: X books Gain: 1 post List Title List blurb LIST TITLE Mark the ones you've read! Done FACEBOOK AD BOOKVILLE LIST DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE CANCEL CLICK Gain: X books LIST TITLE — CONFIRMED! Thanks for sharing. Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED + SHARED BOOKVILLE WOULD LIKE PERMISSION TO: Access the following required information: • Your likes • Friends' likes Access my custom friend lists Allow Cancel FACEBOOK AUTH YOUR NAME Your books Your friends' books Invite more friends! BOOKVILLE PROFILE OK ALLOW 2. Ad clicker, checklist completer, non sharer 4. Ad clicker, checklist completer, score sharer LIST TITLE — DONE Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED BOOKVILLE WOULD LIKE PERMISSION TO: Access the following required information: • Your likes • Friends' likes Access my custom friend lists Allow Cancel FACEBOOK AUTH YOUR NAME Your books Your friends' books Invite more friends! BOOKVILLE PROFILE OK ALLOW Gain: 1 user Gain: 1 user INVITE FRIENDS INVITE Gain: Y invites SEND INVITE FRIENDS INVITE Gain: Y invites SEND 3. Wall post clicker, checklist completer, score sharer Friend's Comment List Title List blurb FB WALL POST LIST TITLE Mark the ones you've read! Done Your friends who have done this: BOOKVILLE LIST FRIENDLY Gain: X books DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE SHARE Gain: 1 post LIST TITLE — CONFIRMED! Thanks for sharing. Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED + SHARED

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

VECTOR PROTOTYPES attachment level: low benefits: symbol libraries, clickable if needed drawbacks: left-brained

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

BITMAP PROTOTYPES answer: how things feel good for: investors, clients, testers, designers require: design skills and programs

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

BITMAP PROTOTYPES attachment level: moderate benefits: crystal clear, familiar drawbacks: kind of precious, maintenance is a pain

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

HTML PROTOTYPES answer: how things work good for: team, testers, some clients, programmers require: front-end coding, maybe back-end

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

http://bit.ly/RiffleFOWD

Slide 76

Slide 76 text

Hello, world!

Slide 77

Slide 77 text

don’t repeat yourself CLIPS

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

@chriscoyier

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

integrated systems FRAMEWORKS

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

with data and stuff FRAMEWORKS

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

“GITHUB IS THE NEW VIEW SOURCE”

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

HTML PROTOTYPES attachment level: moderate benefits: clicks, hovers, gifs!, tested, responsive drawbacks: left-brained, preformatted

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

BE PRACTICAL ★ WHAT ARE YOUR SKILLS? ★ WHO’S THE AUDIENCE? ★ WHAT’S THE NICHE? ★ WHAT’S THE BUDGET?

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

PROCESS stay sane

Slide 98

Slide 98 text

TRADITIONAL DESIGN PROCESS

Slide 99

Slide 99 text

discovery ↓ direction ↓ design ↓ development

Slide 100

Slide 100 text

discovery ↓ direction ↓ design ↓ development ➡ research ➡ concepts ➡ IA, UX, UI ➡ code

Slide 101

Slide 101 text

discovery ↓ direction ↓ design ↓ development ➡ research ➡ concepts ➡ IA, UX, UI ➡ code ➡ $ ➡ $ ➡ $ ➡ $

Slide 102

Slide 102 text

AGILE PROCESS

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

think ↓ make ↓ check

Slide 105

Slide 105 text

think ↓ make ↓ check ➡ hypothesis ➡ prototype ➡ validation

Slide 106

Slide 106 text

think ↓ make ↓ check ➡ hypothesis ➡ prototype ➡ validation each two-week sprint

Slide 107

Slide 107 text

think ↓ make ↓ check ➡ hypothesis ➡ prototype ➡ validation each two-week sprint ➡ $

Slide 108

Slide 108 text

http://www.agileproductdesign.com/blog/2009/kanban_over_simplified.html

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

SPIKE-DRIVEN DESIGN @jonathanpberger short investigation goal is learning code must be thrown away

Slide 112

Slide 112 text

SPIKE-DRIVEN DESIGN branch github ➡ hack code ➡ screenshot to sketch ➡ cherry-pick commits http://pivotallabs.com/users/jonathanpberger/blog/articles/2349-spike-driven-design

Slide 113

Slide 113 text

LEAN UX agile experience design

Slide 114

Slide 114 text

http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/ STARTUP MODEL

Slide 115

Slide 115 text

http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/ AGENCY MODEL

Slide 116

Slide 116 text

M review research SAMPLE SCHEDULE T brainstorm W prioritize tasks T sketch prototype F review sketch M code prototype T review code W polish design T QA & launch F user testing flex week

Slide 117

Slide 117 text

ACTUALLY LOOKS MORE LIKE Review RESEARCH DESIGN DEV Check-in RESEARCH DESIGN DEV Check-in RESEARCH DESIGN DEV Review

Slide 118

Slide 118 text

UI UX

Slide 119

Slide 119 text

M review research SAMPLE SCHEDULE T brainstorm W prioritize tasks T sketch prototype F review sketch M code prototype T review code W polish design T QA & launch F user testing flex week

Slide 120

Slide 120 text

UI UX

Slide 121

Slide 121 text

CHALLENGES i mean opportunities

Slide 122

Slide 122 text

“Checking too often with someone else —pausing for feedback with each bit of output—can inhibit or confuse us.” SUSAN CAIN “DOES ARTISTIC COLLABORATION EVER WORK?” THEATLANTIC.COM

Slide 123

Slide 123 text

Judging. So much judging. @rameadows

Slide 124

Slide 124 text

RESPECT!

Slide 125

Slide 125 text

“I can’t even see what’s good anymore.” David Bowie as Andy Warhol in Basquiat

Slide 126

Slide 126 text

QUIET!

Slide 127

Slide 127 text

I miss my Adobe products.

Slide 128

Slide 128 text

LET GO!

Slide 129

Slide 129 text

TEST IT OUT

Slide 130

Slide 130 text

http://bit.ly/rapid-prototyping @ericaheinz @FOWD