How a Top Retailer Brought Together UX Design and

Agile Development(and got it right!)

Meet The Presenters

Bryan LipsonEVP of Product Management, iRise

Maury CupittSr. Director of Pre-Sales, Tasktop

Doug BrownFormer VP Senior User Experience

Designer, JPMorgan Chase andManager of UI Engineering

for eCommerce, DSW

Done cheaperImproved Production Value

We All Want…

Done sooner

With fewer errorsBetter User ExperienceHigher Conversions

Better Documentation

Less wasted work

Better project visibility

Fewer Roadblocks

Improved Collaboration

Clearer Role Responsibility

First Identify the Real Problem• Make sure you know what

the question is before you try to implement an answer• Understanding what we’re

trying to solve• Defining how the solution to

our problem will be built

We’re Similar But Different• Real problem is bridging gaps between teams• Managing requirements• Handoff• Communicating changes

• Lean and Agile are similar, but the people are different• Different personality types• Different objectives• Different ways of thinking

Differences In FocusDesign / Business Pressures• Market windows• User triggers• Changing trends• Advertising schedules• Impromptu marketing

opportunities

Technology Pressures• Technology constraints• Existing work in pipeline /

bandwidth• Enterprise strategies• Timelines• Cost of implementation

What is Design?• Researcher• Taxonomist• Consultant• Designer• Technologist• Negotiator

Infographic by Jonathan LupoAvailable for review online

What is Development?• Implementation of a specific set of requirements• Integration of technologies• Presentation of user experiences• Validation of product readiness (QA)• Numerous technologies• Back end (databases, fulfillment, etc)• Middle tier (business logic, services)• Presentation layer (user experience / data presentation)

Design ProcessStrategy Launch

Design Process

User

Evaluate

Beta

Production

Design

Analysis

Research

Strategy Launch

Think

Make

Check

Design - Benefits• Deep understanding of

user motivation / intent• Interactions matching

user needs• Detailed map of user

journey• Functional alignment to

business objectives• Complete requirements

before development

Traditional Design - Challenges• Little involvement from

dev teams, creating unintended technical decisions• Delays dev start for

considerable time

Lean Design - Benefits• Faster dev start• Iterative with developers• More transparent• More immediate user feedback

Lean Design - Challenges• Trees vs Forest• Turning requirements

into work• Versioning

The Development ProcessInitiate(Requirements)

Launch

Client

Develop

Integrate

TestRecord Change

s

Prioritize

The Development ProcessInitiate(Requirements)

Launch

Agile Development• Even Waterfall development happens iteratively• Waterfall vs Agile is really a matter of how soon results

are seen outside development• Plan for execution from most important to least

important• Short cycles, typically two to four weeks

Agile development brings FOCUS

Agile Dev Process - Benefits• Tighter management of

timelines and budgets• Sponsors see progress in

tighter cycles and more accurate spend rates• Better information when

introducing changes• Includes all disciplines

(Dev, UX, QA, Business, etc.) when properly done

Agile Dev Process - Challenges• Requirements authority /

business communication• Email• Excel• JIRA• Word Documents• Which version is current?

• Translating requirements to work

The Problem We Want To Solve

User

Evaluate

Beta

Production

Design

Analysis

Research

Strategy

Launch

Client

Develop

Integrate

TestRecord Change

s

Prioritize

It’s A Complicated Relationship• Design and Development

have complex processes• Each impact the other• When done well allows for

proper feedback throughout• User input• Technical decisions• Business value• Production readiness

Using Rapid Prototyping• Dovetails perfectly with Lean Design• Fast user feedback• Transparency to business stakeholders• Quick for review with developers

• Allows for high-level view of forest before designing trees• Iterative, working in sections• A visual and experiential way to communicate

requirements

Requirements – The Big Ah-Ha!• Relating requirements

directly to visual artifacts• 1,000 words are mostly

adjectives• Shorten time / reduce waste

by thinking deeper about• Flows • Wireframes• Visuals• Functional Requirements

iRise for Design• High-level flow diagrams• Ability to start very low

fidelity• High-fidelity interactions• Sample data capabilities• Requirements connected

directly to visuals• Full collaboration

JIRA for Development• Manageable Agile sprints• Work estimation• Full requirement details• Process management and

transition• Burn-down reporting• Code repository

integration

User

Evaluate

Beta

Production

Design

Analysis

Research

Process Pain Point

Launch

Client

Develop

Integrate

TestRecord Change

s

Prioritize

Strategy

Bridging the Process Gap

TT-IDTitle

DescriptionAcceptance Criteria

RequirementiRise Link

AuthorLast UpdateComments

Ready for JIRA (trigger)

TT-IDTitleDescriptionAcceptance CriteriaRequirementiRise LinkAuthorLast UpdateComments

All custom mappings!

Multiple Benefits Realized• Improved traceability of requirements• Better definition of responsibilities /

accountability• Developers could easily find

prototype screens for reference• Easy to review decision histories• No additional work to get

requirements into backlog• Rapid transition from design to

development

Lessons Learned• Culture – Whole is greater than the sum of the parts• Any team can make or break the process, regardless of the

tools used• Don’t stray from agreed processes. Work together to get

past any learning curves.• Your requirements are not as good as you think they are• And they are not an element in isolation

• Agile is not a magic bullet that allows for endless change• Have common understanding of “what does success

look like”

It’s All About Connectedness• Don’t Panic!• Remember to define your real problem• Understand your processes and identify their integration

pains• Use methods like prototyping to bridge gaps• Use tools that fit your processes and can fit each other

Demo / Q&A