Agile webinar 2012

Hugh Beyer, CTO 978.823.0100

[email protected]

www.incontextdesign.comwww.innovationincool.com

Twitter: @hughrbeyer

Adopting Agile: Successful UX in an Agile World

Hugh R. BeyerCTOInContext DesignConcord, Massachusetts, [email protected]

Waterfall development

Agile says development in steps – and iterate

UX says work with users to create value – and iterate

UX and Agile: The promise

The “ideal” product

User Test

What users really need

How could Agile development work without UX?

Agile principles Satisfy the customer with early and continuous delivery of value Welcome changing requirements Deliver working software frequently Communicate through face-to-face conversation, not heavy

documentation Reflect on process regularly

Agile in practice Goal is to deliver working software quickly Short iterations permit management visibility into team progress Up-front planning is minimized or nonexistent Any work that doesn’t involve coding is downplayed

What is Agile development?

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 of sprint

Reflection on process at the end of sprint

Core Agile processes

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

Phase 0

Issue: Getting trustworthy user insight Customers, stakeholders, surrogates, product owners are not users

• They can’t tell you what users need

Even users can’t tell you what users need

Even with a demo, users can’t tell you what they need or what to change

Users are hard to get to and rarely can be put on the team

User-centered techniques to find out how users work, invent appropriate solutions, validate and iterate those solutions

UX people on the team

Issue: figuring out what’s useful The frame for a design comes from somewhere

Significant new functionality needs “think time”

The release planning session is not the right place for design

Even the customer/user doesn’t know what the right thing is

Even a concept needs to be tested

Driving Phase 0

Leverage the Agile value: The customer defines the stories

Phase 0 brings it together User research, visioning, conceptual design with iteration

Key skill: Driving Phase 0

Concept Iteration User Research Agile Development

Build understanding

with users

Iterate concept with

users

Iterate SW with users

Phase 0

User-centered Agile Compressed into a short

Phase 0

• For constrained project focus only!

Example schedule of CD Agile Phase 0

Week 1 – Gather data from 8-10 users

Week 2 – Consolidate data

Week 3 – Vision and storyboard

Week 4 – UED and UI

Week 5 – Release planning & validation (2-4 users)

Week 6 – Validation & redesign

Phase 0 sprintsusing Scrum as a process framework

Spr

int

Spr

int

Spr

int

Development Sprint 1

Spr

in t

User Stories

Why user stories Convenient structuring technique for development Small stories enable short iterations “User value” as opposed to features – fights feature creep

What they are Short descriptions of functionality Each provides user value Rated by business value Business value incorporates user value from Phase 0

But… Chopping the design into small stories makes it easy to lose coherence

User stories

Each story captures one element of user value Written to describe what is done for the user by the system Collects features that aren’t useful on their own into one story Splits features that can be partially or more simply implemented

• Build up complex functionality over several stories

• Break large stories – “epics” – into smaller stories

A guide for story format As a <role or persona> I want to <do something supported by the

system> so that I <achieve something of value> “So that” clause may not be needed if working from a design

Engineering tasks are not user stories Keep the focus on value to the user

Writing user stories

Good As a traveler, I want to see all the trips I have scheduled so I can orient to

the upcoming weeks• No indication of UI at this point

As a traveler, I want to see key flight information at a glance so I can glance at it while in a hurry• Including what? Airline, flight number, departure time? Gate? Details may not be

captured in the story.

As a traveler, I want to see if the flight is delayed and the current departure time so I can tell if I’m going to miss a connection• Implies lots of back-end work, so it’s split into its own story

As an admin or spouse I want to see the traveler’s itinerary so I can coordinate with them • Stories can support different user types

Examples of good user stories

Bad As a traveler, I want to see upcoming trips so I can know my upcoming

trips• Rewritten functional requirement – do you understand the user need?

As a traveler, I want a list of all the events in my trip with an icon showing what the event is, the title of the event, its location, and key information specific to the event• Writing the design into the story

As the system, I want to collect flight information from airlines so I can present it to the user• Technical requirement masquerading as a user story

As a traveler, I want the app to be highly usable so I don’t waste my time• Non-functional requirement with no tangible deliverable

Common errors in user stories

Fitting stories into sprints

UI

Presentation layer

DB access layer

Step 3

Step 1

Step 2

Traditional division by layer

Story 1


UI

Presentation

DB access

Sprint1: Minimal UI, get data to the

screen

Completed UI (TripIt)

7:45am London to Chicago

11:00am The Drake Hotel

Thu, Sep 8

Wed, Sep 7

Chicago, IL

8:30am Meeting

As a traveler I can see the main events of my itinerary to give an overview of the trip

Story 2


UI

Presentation

DB access

Story 1: Minimal UI, get data to the

screen

Story 2: UI structures information, provides

more info

7:45am London to Chicago(air, AA 99)

11:00am Directions to theDrake Hotel

11:00am The Drake Hotel

▼Thu, Sep 8

▼ Wed, Sep 7

Chicago, IL

8:30am Meeting

As a traveler the main events of my itinerary are shown in a collapsible view so I can focus on the part of the trip that matters


Story 3


UI

Presentation

DB access

Story 1: Minimal UI, get data to the

screen

Story 2: UI structures information, provides

more info

Story 3: Fully rendered UI, full

data access

As a traveler the main events of my itinerary are shown with icons and key information so I get quick details


Fitting into a sprint

Integrating UX and development

Work out the interface for a story before development starts Detailed UI design

Final iteration with users

Work with development during the iteration Communicate design to developer

Consult on detailed behavior

Test implementation with users in the following iteration

UX team consults

on story 1

UX team designs story 1

Dev team builds story 1

UX team tests

story 1

UX team designs story 2



UX team tests

story 2

UX team consults

on story 2

UX team designs story 3 UX team

consults on story 3

Sprint 1 Sprint 2 Sprint 3 Sprint 4

Buffers mediate between work steps Buffers control flow—maximum size limits work in progress

Kanban view of work-in-progress

Work Step 1 Buffer

Max size = n

Work Step 2 Buffer

Max size = m

Kanban view of 1-ahead/1behind

DevelopmentLimit = velocity

Development Buffer

In progress

UX Design

Buffer(Release backlog)

In progress

• Stories ready to start development

• Number must be = velocity by start of sprint

• UX works 1 ahead to fill buffer

Sprint nSprint n-1

Test

Test Buffer

In progress

Sprint n+1

• No need to wait for next sprint to start testing

• Release backlog acts as initial buffer

• Stories defined but not in progress = waste

Take out the slack

User-centered techniques within the sprint Targeted interviews to understand specific tasks Paper prototypes to work out designs and alternatives

• Use rough prototypes in situ to explore options and define low-level requirements

Online prototypes and skeleton code to test user interaction• Remote testing with screen sharing can be used

• Test details of appearance, layout, and behavior

User tests of running builds

All supporting Fast iteration of design before coding starts Quick check of design as implemented Close collaboration between UX designers and developers

In-sprint user feedback

Maintain a coherent UI

Develop in small chunks; think in coherent units

Engineering breaks everything into parts Short timeframe of a sprint Small functionality of a story

Design has to keep things coherent One large view of the user experience UI and behavior consistency across the interface Tasks supported coherently, end-to-end

UX activities maintain coherence Start with a real Phase 0 User interviews focused on work practice UI track to look across sprints and teams UI representations to show the coherence

• User Environment Design from Contextual Design

• Site maps from web development



Strategic design phase to define roadmap

Parallel development streams for each component Each stream starts with a Phase 0 for that component

Parallel UX stream to maintain system coherence

SprintSprintSprintSprintSprintSprintRelease planningRelease planning

Strategic design: Initial user research, ideation,

concept testing

Strategic design: Initial user research, ideation,

concept testing

Phase 0 for componentPhase 0 for component

Ongoing UX stream for cross-system coherenceOngoing UX stream for cross-system coherenceInteraction

Architecture planning

Interaction Architecture

planning

SprintSprintSprintSprintSprintSprintRelease planningRelease planning

Phase 0 for componentPhase 0 for component

Scope development

effort; plan parallel

streams; define roadmap

Scope development

effort; plan parallel

streams; define roadmap

Be a team member

You are a part of the team Your problems are the team’s problems

• Borrow and co-opt people

The team’s problems are your problems• Support team priorities. Be there at team meetings.

Your tasks are the team’s tasks• Track them as team tasks

UX as a team member

Defined roles and tasks throughout the process

The UX roles on an Agile project

Phase 0: Set direction & project goals

Phase 0: Set direction & project goals

User research: field interviews

Concepting: high-level design

Validation: prototyping

User research: field interviews

Concepting: high-level design

Validation: prototyping

Release planningRelease planningPrioritization: customer value for release

User story generation

Prioritization: customer value for release

User story generation

Sprint planningSprint planningPrioritization: customer value for the sprint

UX task generation and estimation

Prioritization: customer value for the sprint

UX task generation and estimation

Sprint implementationSprint implementation

UI design and detailed behavior for each user story

Prototyping with users for detailed behavior and look

Validation testing of completed code

UI design and detailed behavior for each user story

Prototyping with users for detailed behavior and look

Validation testing of completed code

Agile activity UX role

www.incontextdesign.com

www.innovationincool.com

Put the customer at the centerof Agile

Karen Holtzblatt, CEO

[email protected]

Hugh Beyer, CTO

[email protected]

Documents

Agile webinar 2012