Ge ing Started with UX Inside Agile Development

Hugh Beyer
InContext

Monday, April 23, 2012

!"#"$#%

InContext Design
Getting started with UX inside Agile development

Hugh Beyer, Founder beyer@incontextdesign.com

978.823.0100 2352 Main Street, Suite 302 Concord, MA 01742

www.incontextdesign.com www.innovationincool.com

Copyright 2012 InContext Enterprises Inc. All rights reserved.

!! 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

$%

!"#"$#%

An approach to building code

!! Created by developers for developers

Created 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 the Agile 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 reevaluation of direction at end of sprint !! Reflection on process at the end of sprint
Define problem Understand needs Conceive solution Design & validate

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

Agile domain
Design SW architecture Develop Test Deploy

UX Immersion Conference, April 2012 All materials 2012

#%

!"#"$#%

Design of the entire user experience An approach to designing the product

!! Look + behavior

Developed out of frustration with traditional usability and UI design

!! No more putting lipstick on a pig

Key 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

!! Field research to know what matters !! Wireframes !! Conceptual design !! Prototyping to validate concepts !! UI architecture !! Information architecture !! Interaction design !! Graphics design
UX domain
Define problem Understand needs Conceive solution Design & validate Design SW architecture Develop Test Deploy

UX Immersion Conference, April 2012 All materials 2012

&%

!"#"$#%

Wheres the conflict?

UX: We can get the requirements right

Agile: We can do without requirements

UX: We can test quickly with low-fi prototypes

Agile: We can code quickly and dont need your prototypes

UX: We need to conceive of the UI as a whole

Agile: We build in pieces without an overall architecture

A match made in heaven?

The ideal product

User test What users really need

UX Immersion Conference, April 2012 All materials 2012

'%

!"#"$#%

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

Field Interviews

Wireframes Lo-fi prototyping

Rapid prototyping Quick user tests Usability tests

User Research

Prototype Iteration

Development Iteration

User Research
Define problem Understand needs

Concepting
Design & validate

Agile Development
Design SW architecture Develop

Conceive Pre-development solution

Agile does not specify how to do this

Development Test
Agile covers this

Deploy

Sprint 0

UX Immersion Conference, April 2012 All materials 2012

!%

!"#"$#%

Real user feedback

!! Doesnt

come from product owners !! Doesnt come from stakeholders !! Doesnt come from user surrogates !! Doesnt come from people 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

UX Immersion Conference, April 2012 All materials 2012

(%

!"#"$#%

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 apprenticeship to 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 action and language
!! Create a shared understanding !! Draw out the implications

!! Focus: Listen and probe from a clear intention

!! Know your purpose !! Challenge your assumptions

UX Immersion Conference, April 2012 All materials 2012

)%

!"#"$#%

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 about their work but cant tell you
Withdrawal

!! So follow their lead !! Help the users articulate and see their work practice

Return

Avoid ineffective interview styles

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

UX Immersion Conference, April 2012 All materials 2012

*%

!"#"$#%

Interpretation is the data

!! A shared understanding of what is going on !! Offer interpretations
!! Dont ask open-ended questions

Customer

Fact tune the interpretation Hypothesis Implication Design Idea

!! 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

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

UX Immersion Conference, April 2012 All materials 2012

+%

!"#"$#%

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

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 of your learning about their role !! Ask pet questions !! Give tips on system use !! Thank the user

Switch to contextual interview

!! Reset the rules

UX Immersion Conference, April 2012 All materials 2012

$,%

!"#"$#%

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!

UX Immersion Conference, April 2012 All materials 2012

$$%

!"#"$#%

U21 Flow Model

Discuss open litigation

Assign roles:
Board of Directors Administrative Assistant
Discuss open litigation

Interviewer tells story of the interview Notetaker captures important issues on- line

General Counsel

SOP Ask for legal advice Email SOP

Business Unit Managers

Provide legal advice

U21 Senior Corporate Counsel

Outside Counsel

U08-15

Hand deliver SOP When she puts the camera in photo review mode, the lens will close after a little bit of time.

U08-16

When testing out different HR Department settings, the camera displays what the setting is about (shows message on the LCD de scribing what the setting does).

info requested in SOP

TRIGGER: Receive email from partner

Discuss legal options

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

Open email to see request and log in info

U5 Sequence: Keyword Search

Pg. 1 of 3

Open email to see request and log in info Open online research service Type log in info Log in doesnt work Re-type user name and password in from email Decide to search in federal DB

"

" "

U08-17

When exploring new scene settings , she notices the "kids and pets" setting. She doesn't think the picture that she took in automatic mode came out bad, so she doesn't know why she would need this mode.
Intent: Restrict Domain to get relevant results

" "

" "

Select search form Remembered to start client tracker

" "

Intent: Account for research time

Affinity diagram Persona

Sequence model

Flow model

UX Immersion Conference, April 2012 All materials 2012

$#%

!"#"$#%

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

UX Immersion Conference, April 2012 All materials 2012

$&%

!"#"$#%

UX Immersion Conference, April 2012 All materials 2012

$'%

!"#"$#%

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

UX Immersion Conference, April 2012 All materials 2012

$!%

!"#"$#%

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 problem

Understand needs

Conceive solution

Design & validate

Design SW architecture

Develop

Test

Deploy

Sprint planning

Implementation

Completion

! Define UX tasks ! Strategize lowlevel design

! 4 users every Friday Wednesday ! PP for low-level design ! CI to understand upcoming tasks ! Running code for acceptance ! Refine low-level design for this sprint ! Final check of completed stories for this sprint

! Check behavior ! Real user acceptance

UX Immersion Conference, April 2012 All materials 2012

$(%

!"#"$#%

#! Design one iteration ahead; validate one iteration behind

!! Morphs into Kanban-type thinking

Release Planning
UX team provides conceptual design

Sprint Planning

Sprint 1
UX team designs story 1

Sprint 2
UX team designs story 2 UX team consults on story 1

Sprint 3
UX team designs story 3 UX team consults on story 2 UX team tests story 1

Sprint 4
UX team designs story 4 UX team consults on story 3 UX team tests story 2

Whole team writes tasks Whole team prioritizes user stories

Dev team builds story 1

Dev team builds story 2

Dev team builds story 3

UX helps sets story priority

!! So UX people need detailed knowledge of user work practice and needs

UX defines details of system behavior

!! So UX people need detailed knowledge of user work practice and needs

UX 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

UX Immersion Conference, April 2012 All materials 2012

$)%

!"#"$#%

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 <role> I want to <do something supported by the system> so that I <achieve something of value> !! A guide, not a straightjacket !! So that clause may not be needed if working from a design

Engineering tasks are not user 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

UX Immersion Conference, April 2012 All materials 2012

$*%

!"#"$#%

Presentation of a design for online grocery shopping

UX Immersion Conference, April 2012 All materials 2012

$+%

!"#"$#%

UX Immersion Conference, April 2012 All materials 2012

#,%

!"#"$#%

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, scrollable thumbnail 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 one simple.)

UX Immersion Conference, April 2012 All materials 2012

#$%

!"#"$#%

!! 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 ( implementation !! Incident cards

) = consultation needed during

!! UX days planned, but not when during the iteration they happen !! 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

UX Immersion Conference, April 2012 All materials 2012

##%

!"#"$#%

!!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 user surrogates
!!Business priorities matter

UX task Dev task UX task

UX Immersion Conference, April 2012 All materials 2012

#&%

!"#"$#%

!!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 precede user 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 squad draws 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 completed implementation

UX Immersion Conference, April 2012 All materials 2012

#'%

!"#"$#%

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

S5 T1: Detailed design & mockup S5 T1a: User test S5 T2: Implement DB of products S5 T3: Implement story

S5 T1b: Detailed UI design

S5 T4: User Test

UI Design
S5 T1: Detailed design & mockup S5 T1a: User test S5 T1: Detailed UI design S5 T1 Hold for S5 T2

User Test

Implementation
S5 T2: Implement DB of products S5 Hold for S5 T1 S5 T3: Implement story S5 T4: User Test

Holding Area

Holding Area

Holding Area

UX Immersion Conference, April 2012 All materials 2012

#!%

!"#"$#%

UI Design
S5 T1: Detailed UI design S5 T1 Hold for S5 T2

User Test

Implementation
S5 T2: Implement DB of products S5 Hold for S5 T1 S5 T3: Implement story S5 T4: User Test

Holding Area

Holding Area

Holding Area

!! 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

UX Immersion Conference, April 2012 All materials 2012

#(%

!"#"$#%

Getting started with UX inside Agile development Hugh Beyer

!! We developed the industry-leading customer-centered design process !! Our clients are industry leaders including other design firms !! Our experience spans a wide range of work practices, industries and technologies !! We have a proven track record creating solutions for the people who use them

The only method I have seen that really tells you

how 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

UX Immersion Conference, April 2012 All materials 2012

#)%