How They Work Better Together: Lean UX, Agile Development, and User-Centered DEsign

Slide 1

Slide 1 text

HOW THEY WORK BETTER  TOGETHER Lean UX, Agile Development and User-Centered Design RAILSCONF 2014 CHICAGO, ILLINOIS JOHN ATHAYDE @boboroshi  VP of DESIGN @ CARGOSENSE

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

http://www.flickr.com/photos/michael-seljos/2073146716/

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

EXPERIENCE MATTERS

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

WHAT ISUX? (USER EXPERIENCE)

Slide 16

Slide 16 text

“ the effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments”

Slide 17

Slide 17 text

JAKOB NIELSEN

Slide 18

Slide 18 text

THE PROMPTNESS WITH WHICH USERS LEARN TO USE SOMETHING

Slide 19

Slide 19 text

THE EFFICIENCY THEY ATTAIN WHILE  MAKING USE OF IT

Slide 20

Slide 20 text

REMEMBER HOW TO USE IT HOW EASY IT IS   FOR THEM TO

Slide 21

Slide 21 text

ERROR- PRONE IT IS HOW

Slide 22

Slide 22 text

LEVEL OF  SATISFACTION THEY ATTAIN FROM USING IT

Slide 23

Slide 23 text

EXPERIENCE OF MANY YEARS

Slide 24

Slide 24 text

(and many misteaks) mistakes

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

PROCESSES & METHODS OF USER EXPERIENCE DESIGN

Slide 27

Slide 27 text

WATERFALL (DON’T GO CHASIN’)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Deﬁne → Design → Develop → Test → Deploy Design

Slide 30

Slide 30 text

DELIVERABLES!

Slide 31

Slide 31 text

“But, we’re ‘Agile’!”

Slide 32

Slide 32 text

DESIGN DEVELOP QA PRODUCT

Slide 33

Slide 33 text

“Instead of relying on a hero designer to divine the best solution from a single point of view, we use rapid experimentation and measurement to learn quickly how well our ideas meet our goals.” —Jeff Gothelf (author of Lean UX)

Slide 34

Slide 34 text

“LEAN UX” THE OVERUSED AND MISUNDERSTOOD

Slide 35

Slide 35 text

DESIGN THINKING AGILE PROCESS LEAN STARTUP

Slide 36

Slide 36 text

“[Design thinking is] innovation powered by … direct observation of what people want and need in their lives and what they like or dislike about the way particular products are made, packaged, marketed, sold, and supported.” —Tim Brown, CEO of IDEO

Slide 37

Slide 37 text

“[It’s] a discipline that uses the designer’s sensibility and methods to match people’s needs with what is technologically feasible and what a viable business strategy can convert into customer value and market opportunity.” —Tim Brown, CEO of IDEO

Slide 38

Slide 38 text

AGILE THE WONDERFUL WORLD OF

Slide 39

Slide 39 text

https://twitter.com/lissijean/status/458005886506520577 AS DEFINED BY DILBERT

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Individuals and Interactions over Processes and Tools,  Working Software over Comprehensive Documentation,  Customer Collaboration over Contract Negotiation, and  Responding to Change over Following a Plan AGILE MANIFESTO (2001) http://www.agilemanifesto.org

Slide 42

Slide 42 text

ORIENTEERING (YES, THERE’S A MERIT BADGE FOR THAT)

Slide 43

Slide 43 text

https://www.ﬂickr.com/photos/derelllicht/4784936818

Slide 44

Slide 44 text

Find out where you are Shoot an azimuth and choose a target Walk to that target Repeat 1 2  3 4

Slide 45

Slide 45 text

https://www.ﬂickr.com/photos/arcticwarrior/8694705014

Slide 46

Slide 46 text

http://pragdave.me/blog/2014/03/04/time-to-kill-agile/ Find out where you are Take a small step towards your goal Adjust your understanding based on what you learned Repeat 1 2 3  4

Slide 47

Slide 47 text

BUILD MEASURE LEARN

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

“Lean UX is the practice of bringing the true nature of a product to light faster, in a collaborative, cross- functional way that reduces the emphasis on thorough documentation while increasing the focus on building a shared understanding of the actual product experience being designed.” —Lean UX

Slide 50

Slide 50 text

http://www.quietaction.com/blog/what-customers-are-you-creating.html PERSONAS

Slide 51

Slide 51 text

Front Line Consumer Advocate (CA) TITLE Consumer Advocate (CA) ROLE Individual who is the general system user, interacting with customers via phone and email (and eventually chat) to resolve support issues that customers have with LivingSocial, it’s deals, or it’s merchants. JOB TASKS • Answer phone • Create and manage cases • Issue refunds • Resolve customer issues GOALS, FEARS, AND ASPIRATIONS • Meet daily quota (fear of not meeting quota) • Working on projects by accomplishing high close rate • Fear of customer anger especially w/r/t refund policy • Avoiding mandatory overtime by meeting their quotas and closing cases more quickly COMPUTER SKILLS, KNOWLEDGE, AND ABILITIES • Wide range of ability and knowledge. • Needs to be able to use a browser, answer the phone in a professional manner • Able to multi-task and keep critical information correctly in their heads • Ability to get trained on the tools (currently SalesForce, phone system) GROUP SIZE AND INFLUENCE This is currently the largest group at 130 individuals (not including senior CAs but including international users) MEANS OF COMMUNICATION SalesForce chatter, team meetings with team leads, IM/GoogleTalk, email. INTERNAL TOOLS: CSR PERSONAS 3

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

PARALLEL WORKING IN

Slide 56

Slide 56 text

THE FIRST CLIENT MEETING FLOWS DOMAIN OBJECTS DESIGNER DEVELOPER USABILITY FUNCTIONALITY

Slide 57

Slide 57 text

SKETCH & BUILD SIMULTANEOUSLY

Slide 58

Slide 58 text

http://www.pbs.org/idealab/2013/01/a-look-behind-designing-the-state-decoded002/

Slide 59

Slide 59 text

http://www.pbs.org/idealab/2013/01/a-look-behind-designing-the-state-decoded002/

Slide 60

Slide 60 text

BIG PICTURE PROTOTYPING AND THE

Slide 61

Slide 61 text

http://johnnyholland.org/2009/01/book-review-mental-models/

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

DETAILED CONCEPT MOCKUPS

Slide 64

Slide 64 text

“YOU DO REALIZE THAT’S 18 MONTHS OF WORK, RIGHT?” —AARON BATALION, THEN CTO of LIVINGSOCIAL

Slide 65

Slide 65 text

DETAILED CONCEPT MOCKUPS

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

No content

Slide 72

Slide 72 text

FIX THE PAIN POINTS WHILE YOU REBUILD

Slide 73

Slide 73 text

JUST IN TIME THE INTENSITY OF

Slide 74

Slide 74 text

BIG PICTURE DESIGN PROCESS 1

Slide 75

Slide 75 text

APPLY THE DESIGN 2

Slide 76

Slide 76 text

CODIFY INTO A LIVING STYLEGUIDE 3

Slide 77

Slide 77 text

REVISE AS YOU GO 4

Slide 78

Slide 78 text

UX TIMELINE OF A J.I.T. PROJECT INITIAL DESIGN PUSH DESIGN RUSHES UX JOINS STYLING/BUILD

Slide 79

Slide 79 text

CASE STUDY #1

Slide 80

Slide 80 text

WILDE

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

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

CASE STUDY #2 VARIOUS CLIENTS

Slide 87

Slide 87 text

SKETCH INTERACTIONS, NOT SCREENS

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

BUILDING OUT  YOUR LIVING  STYLEGUIDE

Slide 90

Slide 90 text

CASE STUDY #3

Slide 91

Slide 91 text

MAD DASH THE

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

BIG PICTURE   DESIGN PROCESS 1 2 3 4 APPLY THE  DESIGN CODIFY INTO A  LIVING STYLEGUIDE REVISE AS   YOU GO

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

ISSUES

Slide 99

Slide 99 text

ISSUE:   DESIGN DRIFT

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

ISSUE:   DESIGNER  FRUSTRATION

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

CELEBRATE RELEASES

Slide 104

Slide 104 text

MAKE TIME TO DREAM

Slide 105

Slide 105 text

ISSUE:   PMO/PRODUCT

Slide 106

Slide 106 text

IN THE DARK IT’S DIFFICULT TO SEE

Slide 107

Slide 107 text

“SO WE NEED TO BUILD THIS COMPLEX THING   & WE ARE GOING TO WING IT”

Slide 108

Slide 108 text

“I WANT YOU TO   FOCUS SO I’M ONLY GOING TO TELL YOU ABOUT THIS SPRINT’S FUNCTIONALITY.”

Slide 109

Slide 109 text

“WE’RE NOT   GOING  TO TACKLE   THAT UNTIL   PHASE II”

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

ISSUE:   FORGETTING THE USERS HALP

Slide 112

Slide 112 text

“DEAR GOD,   WHAT IS THAT THING!?”

Slide 113

Slide 113 text

THE   GREAT REWRITE

Slide 114

Slide 114 text

UX TIMELINE OF A J.I.T. PROJECT INITIAL DESIGN PUSH DESIGN RUSHES UX JOINS STYLING/BUILD EXISTING SYSTEM FIXES (Modiﬁed)

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

INVOLVE SUBJECT MATTER EXPERTS

Slide 117

Slide 117 text

ISSUE:   USER TESTING IS HARD

Slide 118

Slide 118 text

GO   GUERRILLA

Slide 119

Slide 119 text

http://www.uxbooth.com/articles/the-art-of-guerilla-usability-testing/

Slide 120

Slide 120 text

What do you make of this? What would you do here? How would you do [that]? http://www.uxbooth.com/articles/the-art-of-guerilla-usability-testing/

Slide 121

Slide 121 text

ISSUE:   MULTIPLE DEVICES

Slide 122

Slide 122 text

BUT   DOES IT RESPOND?

Slide 123

Slide 123 text

PLAN TIME TO DO CLEANUP/ RESPONSIVE

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

SO WHAT SHOULD  WE DO?

Slide 126

Slide 126 text

GEAR UP

Slide 127

Slide 127 text

PAPER, PENCILS, PENS 1 2 3 4 WHITEBOARD PHONE WITH CAMERA YOUR CODING TOOLS

Slide 128

Slide 128 text

AGILE IS DEAD long live agility http://pragdave.me/blog/2014/03/04/time-to-kill-agile/

Slide 129

Slide 129 text

MEASURE   ALL THE  THINGS

Slide 130

Slide 130 text

LOVE YOUR USERS

Slide 131

Slide 131 text

SECURE QUICK  WINS

Slide 132

Slide 132 text

ENGINEER PRODUCT MANAGER ENGINEER PROJECT MANAGER ENGINEER FRONT END ENGINEER ENGINEER UX/UI NO MORE  SILOS QA UX RESEARCH

Slide 133

Slide 133 text

PULL REQUEST WORKFLOW

Slide 134

Slide 134 text

REUSABLE DESIGN SOLUTIONS

Slide 135

Slide 135 text

DEVELOPERS: LEARN UX

Slide 136

Slide 136 text

DESIGNERS: LEARN   TO CODE

Slide 137

Slide 137 text

FORGIVE. http://dish.andrewsullivan.com/2014/04/19/killing-the-beautiful-thing-in-your-imagination/

Slide 138

Slide 138 text

BUILD THE APP   YOU CAN BUILD TODAY

Slide 139

Slide 139 text

climb the mountain.

Slide 140

Slide 140 text

THANK YOU UX/SCSS/Rails Front-End Pairing: airpair.me/boboroshi @boboroshi [email protected] AthaydeWilliamsRailsView BOOK CODE FOR 25% OFF AT www.pragprog.com/titles/warv: