ge!ing started with ux inside agile development

8/13/2019 Ge!Ing Started With UX Inside Agile Development

1/28


2/28

!"#"$#

$

Hugh Beyer, Founder

[email protected]

978.823.0100

2352 Main Street, Suite 302

Concord, MA 01742

Copyright 2012 InContext Enterprises Inc. All rights reserved.

www.incontextdesign.com

www.innovationincool.com

InContext Design

Getting started with UX inside Agile development

! Pair up! Take turns finding out from each other:

!Name!Job!Agile experience: What aspects of Agile have you done!UX experience: What aspects of UX have you done

You get 3 minutes each

UX Immersion Conference, April 2012

All materials 2012


3/28

!"#"$#

#

An approach to building code

! Created by developers for developersCreated out of frustration with traditional practice

! Inaccurate or changing requirements! Lots of effort on overhead activities! Long time before results become visible!Does not help you decide what to build

Principles from theAgile Manifesto

! Individuals and interactions over processes and tools!

Working software over comprehensive documentation! Customer collaboration over contract negotiation! Responding to change over following a plan

Processes

! Short sprints! Plan each sprint at the start! Plans based on story cards! Each sprint delivers useful value! Daily standup meetings! Validation of sprint and re-

evaluation of direction at end ofsprint

! Reflection on process at the endof sprint

Development Practices

! Co-located teams! No code ownership! Test-driven design! Continuous build! Pair programming

Agile domain

Define problem Understandneeds Conceivesolution Designvalidate Design SWarchitecture Develop Test Deploy


All materials 2012


4/28

!"#"$#

&

Design of the entire user experience

An approach to designing the product

! Look + behaviorDeveloped out of frustration with traditional usability and UI

design

! No more putting lipstick on a pigKey methods provide

! Field research for reliable user guidance and feedback! Up-front design of structure through tail-end design of look! Provides ways to test concepts and structure

Does not tell you how to build

UX domain

!Field research to know what matters!Wireframes!Conceptual design!Prototyping to validate concepts!UI architecture! Information architecture! Interaction design!Graphics design



All materials 2012


5/28

!"#"$#

'

Wheres the conflict?

UX: We can get therequirements right

Agile: We can dowithout requirements

UX: We can testquickly with low-fi

prototypes

Agile: We can codequickly and dont

need your prototypes

UX: We need toconceive of the UI as

a whole

Agile: We build inpieces without an

overall architecture

A match made in heaven?

The ideal product

User test

What users really

need


All materials 2012


6/28

!"#"$#

!

User feedback really?

! The customer isnt the user! Its hard to put the user on the team!A demo isnt a test

Iteration really?

! Reworking the same story is hard!Adding and removing stories is hard

No BDUF (Big Design Up Front) really?

! You need to know what problem you are solving! You write the design into the user stories

User Research

User

ResearchPrototype

Iteration

Development

Iteration

Concepting Agile Development

Pre-developmentAgile does not specify how to do this

Field InterviewsWireframes

Lo-fi prototypingRapid prototyping

Quick user tests

Usability tests

DevelopmentAgile covers this


Sprint 0


All materials 2012


7/28

!"#"$#

(

Real user feedback

! Doesnt come fromproduct owners! Doesnt come from stakeholders! Doesnt come from user surrogates! Doesnt come frompeople who used to be users! Doesnt come from demos! Doesnt come from focus groups! Doesnt even come from usability tests

With the right technique we can get reliable, stable requirements

and valid design feedback


All materials 2012


8/28

!"#"$#

)

The interviewing process of

Contextual Design

! One-on-one 2-hour field interview! Gathering detailed information about

work practice

! In the workplace while people work! Through observation and discussion

of on-going work

! Based on a model of apprenticeshipto the customer

Key concepts to guide understanding the customer:

! Context: Collect data in the context of peoples work!Go to your user's workplace!Talk to your users while they work

! Partnership: Work with customers as partners in inquiry!Help users articulate their work practice!Let them lead

! Interpretation: Uncover the meaning and implications of customer actionand language

!Create a shared understanding!Draw out the implications

! Focus: Listen and probe from a clear intention!Know your purpose!Challenge your assumptions


All materials 2012


9/28

!"#"$#

*

Get as close to the work as possible

! Go to the customer! Interview while they are working! Be grounded in real objects and events! Pay attention to non-verbal communication

On-going work versus summary experience

! Tasks you are watching! Not summarizations with no details

Concrete versus abstract data

! Retrospective accounts from the last 2 weeks guided by artifacts! Focus on what is happening, not what people think they do

Partnership as relationship! The user is the expert

!They know everything abouttheir work but cant tell you

! So follow their lead! Help the users articulate and

see their work practice

Avoid ineffective interview styles

! The Traditional Interviewer! The Expert/Novice! The Guest/Host

Withdrawal

Return


All materials 2012


10/28

!"#"$#

+

Interpretation is the data

!A shared understanding of what is going on! Offer interpretations

!Dont ask open-endedquestions

! Listen for the No!Huh?!Umm... could be!They would like it!Yes comes with elaboration!Watch for non-verbal clues!

Check your design ideas as they occur

Fact

Hypothesis

Implication

DesignIdea

Customer

tune the interpretation

Know your purpose

! We all have an entering focus!A set of preconceived assumptions and beliefs

! Drive interviews with your project focus!A clear understanding of what work you are trying to

understand

! Expand your focus! Challenge your assumptions, probe the unexpected

Probe to expand focus

! Surprises and contradictions! Nods What you assume is true! What you do not know! The problem behind solutions

Share! Interpretations for validation! Design ideas for co-design


All materials 2012


11/28

!"#"$#

$,

Be an apprentice

Context

! Go to your user's workplace! Talk to your users while they work

Partnership

! Help users articulate their work practice! Let them lead

Interpretation

! Create a shared understanding! Draw out the implications

Focus! Know your purpose! Challenge your assumptions

Traditional interview steps(5-10 minutes)

! Introduce yourself! Reveal your focus! Promise confidentiality! Start recording! Get an overview of their work! Look for a starting point! Deal with opinions about tools

Switch to contextual interview! Reset the rules

Observe and co-interpret(1 "hours)

! Take running notes! Follow your focus! Be nosy! Interruptions are data too

Wrap-up(10-15 minutes)

! Create a large interpretation ofyour learning about

their role

!Ask pet questions! Give tips on system use! Thank the user


All materials 2012


12/28

!"#"$#

$$

Conduct a Contextual Interview

! Pair up as users & interviewers! User: Do a check in email, Facebook, twitter, etc.! Interviewer:

!What is a check in?!What are the tools?!What gets in the way?!Why does it matter?

Take notes!


All materials 2012


13/28

!"#"$#

$#

Assign roles:

Interviewer tells story of

the interview

Notetaker captures

important issues online

Work Modelers draw work

models

Participants clarify what

happened, identify important

points and generate

implications for design

Moderator makes the whole

meeting work smoothly

Rat Hole Watchers keep on

the mainline conversation

U21Senior Corporate CounselBusiness UnitManagers

Outside Counsel

Discuss open litigation

Discuss openli tigation

Board of DirectorsAdministrative Assistant

SOP

General Counsel

SOP Email

Discuss legal options

Ask forlegal advice

Providelegaladvice

HR Department

Hand deliver SOP

info requestedinSOP

U21 Flow Model

Remembered to start clienttracker

Select search form

Decide to search in federal DB

Re-type user name and passwordin from email

Log in doesnt work

Type log in infoOpen online research service

Open email to see requestand log in info

Open email to see requestand log in info

Intent Account forresearch time

Intent Restrict Domain toget relevant results

TRIGGER Receive emailfrom partner"

"

"

"

"

"

"

"

"

U5 Sequence:Keyword SearchPg. 1 of 3

U08-15 When she puts the camera inphoto review mode, the lens willclose after a little bit of time.

U08-16 When testing out differentsettings, the camera displayswhat the setting is about (showsmessage on the LCD de scribingwhat the setting does).

U08-17 When exploring new scenesettings , she notices the "kidsand pets" setting. She doesn'tthink the picture that she took inautomatic mode came out bad,

so she doesn't know why shewould need this mode.

Sequence

model

Affinity

diagram

Flow

model

Persona


All materials 2012


14/28

!"#"$#

$&

Storyboard

Visioning

Paper prototypes

! Test structure with users! Use the language of the user

Rough paper vs. on-line prototypes

! Paper lets the user engage and co-design! Paper reveals structure better! Paper allows for real work, not just demo

Iterative prototyping process

!A series of rounds!First round: very rough, hand-drawn on Post-it notes and paper!Second round: more refined but still rough!Third round: more refined, enough UI definition to be sure the interaction works

for the user

!Content design also being tested


All materials 2012


15/28

!"#"$#

$'UX Immersion Conference, April 2012

All materials 2012


16/28

!"#"$#

$!

Play computer using a paper mockup:

! ContextExplore the users own work tasks!Replay recent or current actual work events!Write the users own data into the prototype!Physically change the prototype as you go

! PartnershipWork out design changes together!The user is expert in their work; you are expert in design!Explore the consequences of design changes on their work

! InterpretationListen structurally, not just to words!Issues of structure and function often sound like UI complaints!Respond to issues by addressing the underlying problem

! FocusRespond to issues at the appropriate level!Early on, rough prototype tests function and structure!Later, more refined prototype tests interaction and layout!Rendered or online prototypes test look and graphics


All materials 2012


17/28

!"#"$#

$(

A 2-hour 2-on-1 interview in the users workplace

! IntroductionSet the stage!Introduce the prototype and a little project history!Get an overview of the users workcollect sample tasks!Invite them to replay sample tasks in your prototype

! Body of the interviewFollow the tasks!Give them a pen and let them explore!Articulate any problems or issues you see!Take the lead in modifying the prototype

! Wrap-upSummarize what youve learned!Share your primary findings!Get an estimate of value

Define UX tasks Strategize low-

level design

4 users every Friday Wednesday PP for low-level design CI to understand upcoming tasks Running code for acceptance

Check behavior Real user

acceptance

Refine low-leveldesign for thissprint

Final check ofcompletedstories for thissprint

Sprintplanning Implementation Completion



All materials 2012


18/28

!"#"$#

$)

# Design one iteration ahead; validate one iteration behind!Morphs into Kanban-type thinking

UX teamconsults

on story 1

UX teamdesigns

story 1

UX teamdesigns

story 2

Dev teambuilds

story 2

Dev teambuilds

story 3

UX teamtests

story 1

UX teamconsults

on story 2

UX teamdesigns

story 3

Dev teambuilds

story 1

UX teamtests

story 2

UX teamconsults

on story 3

UX teamdesigns

story 4

Sprint 1 Sprint 2 Sprint 3 Sprint 4Sprint

Planning

Release

Planning

UX teamprovides

conceptualdesign

Whole team

prioritizesuser stories

Whole teamwrites tasks

UX helps sets story priority

! So UX people need detailed knowledge of user work practice and needsUX defines details of system behavior

! So UX people need detailed knowledge of user work practice and needsUX works as part of the development team

! UX tasks on the teams information radiators! UX involved in daily stand-up! UX problems are the teams problems

UX generally designs a sprint ahead, tests a sprint behind


All materials 2012


19/28

!"#"$#

$*

Each story captures one element of user value

! Written to describe what is done for the user! Collect features that arent useful on their own! Split features that can be partially or more simply implemented

A standard format

!As a I want to so that I

!A guide, not a straightjacket! So that clause may not be needed if working from a design

Engineering tasks are notuser stories

The product:

!A web site to support online shopping! Should support buying from a range of stores! Should support the whole family! Should support meal planning and recipes! Should support community elements

Write user stories for this product

! Choose your favorite format! Discuss and write as many stories as you can!Agree at each table on what the stories are


All materials 2012


20/28

!"#"$#

$+

Presentation of a design for online grocery shopping


All materials 2012


21/28

!"#"$#

#,UX Immersion Conference, April 2012

All materials 2012


22/28

!"#"$#

#$

The product:

!A web site to support online shopping! Defined by the UI images at your tables! Customer role gets to decide how the system behaves if theres a

question

Write user stories for this product

! Same format as before! Write as many stories as you can!Agree at each table on the stories

UX tasks are team tasks

!Agile principle: Theres only one team! Track them on the same board as other team tasks

Example

! User story: User can see all products in store with a simple, scrollablethumbnail view

! Possible split: Initial implementation presents products as a simple list;add images and better navigation in a following story

! UX tasks:!Design graphics elements for thumbnails and scrolling!

Choose a scrolling method!Build a detailed mockup to test the interaction

! Online? Using actual technology?!Run user tests!Finalize design

! (Dont get caught up in categories of items. Thats a different story. Keep this onesimple.)


All materials 2012


23/28

!"#"$#

##

! Costs are estimated in ideal days or points! Velocity is 28 ideal days / 2-week iteration

!SW and UX squad each have 28 ideal days per iteration!4 people on a squad = 7 ideal days / iteration #2-week iterations!In the real world, UX squad will probably be smaller and have a different velocity

! Rolling the dice = variation caused by!Estimation errors!Real-world interruptions

! UX days ( ) interleaved with SW days ( ) = consultation needed duringimplementation

!UX days planned, but not when during the iteration they happen! Incident cards

!Real-world events out of the control of the project team

! Story priorities!Mandatory = Essential; theres no product without it!High = Product works but wont succeed without it!Medium = Highly desirable; differentiator!Low = Nice to have

!All work is done to implement a story!New features, bug fixes, and re-implementation work all require writing new

stories

!Iteration planning prioritizes new stories against original stories! First iteration

!Make sure the SW squad has enough to do! Last iteration

!Make sure that you dont start work you cant complete!Make sure youll be able to test work the SW squad completes


All materials 2012


24/28

!"#"$#

#&

!Happened before the game started!Stories written based on vision and rough UI

developed and tested through Contextual Design

!Priorities assigned by Product Manager and usersurrogates

!Business priorities matter

UXtask

Devtask

UXtask


All materials 2012


25/28

!"#"$#

#'

!Plan the iteration:!What stories to do in this iteration

! Keep the user experience coherentdont just pick random stories! Agile principleevery iteration delivers user value

!What to do in the following iteration!No more than 28 days work for each squad!UI work must precede implementation work, which must precedeuser testing work

!Each squad starts the iteration with 4 Roll Cards!Alternate rolls, UX first!On each turn

!Return Roll Card to the stack. Roll both dice!If a squad is out of Roll Cards, play goes back to the other squad!If a squad lands on a draw incident square, the indicated squaddraws an Incident Card

Same rules, but this is your last iteration

!Dont start work that cant be completed in this iteration!Make sure you wrap up work started by the other team

!E.g., make sure you User Test any stories that have completedimplementation


All materials 2012


26/28

!"#"$#

#!

S5: User can see products in an organized, browseable list

S5 T4: User

Test

S5 T3:

Implement

story

S5 T2:Implement

DB ofproducts

S5 T1b:

Detailed UI

design

S5 T1a:

User test

S5 T1:

Detailed

design &mockup

User Test

Holding Area

Implementation

Holding Area

UI Design

Holding Area

S5 T4: User

Test

S5 T3:

Implement

story

S5 Hold for

S5 T1

S5 T2:Implement

DB ofproducts

S5 T1 Hold

for S5 T2

S5 T1:

Detailed UI

design

S5 T1a:

User test

S5 T1:

Detailed

design &mockup


All materials 2012


27/28

!"#"$#

#(

User Test

Holding Area

Implementation

Holding Area

UI Design

Holding Area

S5 T4: User

Test

S5 T3:

Implement

story

S5 Hold for

S5 T1

S5 T2:Implement

DB ofproducts

S5 T1 Hold

for S5 T2

S5 T1:

Detailed UI

design

!The UX designer orchestrates the UX effort rather than doing it all!A UX task might not be done by the UX designer!Lean on developers for less critical UI elements!Take developers on user visitstransfer the skill


All materials 2012


28/28

!"#"$#

! We developed the industry-leadingcustomer-centered design process

! Our clients are industry leaders including other design firms

! Our experience spans a wide rangeof work practices, industries and

technologies

! We have a proven track record creatingsolutions for the people who use them

The only method I have seen that really tells youhow to go out and collect customer data, and then

what to do about it. - Don Norman

The only generative method in the field

-Ben Shneiderman

Getting started with UX inside Agile development

Hugh Beyer

ge!ing started with ux inside agile development

Documents