Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.


7 Tips for

Practicing UX Design

that I learned

from Agile Development

Jonathan Berger, Pivotal Labs

for Method Design, September 2012

The plan:

~45 minutes

(20 minute talk + time for discussion)

What I'll try to do:

lead a discussion about Lean/Agile processes as a designer working in a mostly developer environment

Origin Story

Why am I here?

Why have I spent the last few years doing Pivotal-Tracker-oriented Test-Driven Development at Pivotal Labs?

It started with

I saw what the

Agile process did for Devs

and I thought

Designers can haz?!


I believe that design tasks have similar problems to those which that led to Agile development, and can benefit from similar techniques.

What is 'Agile'?

Agile Manifesto

Agile on one foot:

Optimize for a low cost of change.

How do we Optimize for a low cost of change

for Design?

7 Tips & Techniques & Tactics

Tip 1: Label mock-ups and assets

Use Ubiquitous language

Tip 2: Humans are narrative creatures

Design for Narrative

Tip 3: Pick a story

and Stick with it

It's really effective to develop a default sample story and use it to mock or test or teach.

Given Harry is on the Store page

When he clicks on "Tactical Bacon"

Then "Tactical Bacon" should be added to his cart

Post basic Userflow scripts

as test data

userflow script

Personas are more memorable

with alliterative names

Stick to your story


Tip 4: Optimize Physical Spaces for Conversation

Foamcore is awesome. Create spaces to create conversation. Externalize.

Mocks on Foamcore

foamcore boards with mocks

Design Evolution

design evolution

Idea Evolution Board

idea board

Foamcore == walls-without-rooms!!

foamcore in a client presentation

Tip 5: At first

Design in Adobe Creative Suite

Tip 6: Better yet,

Design on a Whiteboard

Tip 7: Then,

Design in the Browser

When working software exists and your mocks start falling out of sync

Use Firebug

to manipulate the DOM

and then take screenshots

which can be hacked up

in your favorite raster editor

LIVE DEMO (time permitting)

Who's wants to deface something?

this technique lets you

move FAST

for bonus points

Save the HTML

and check it into version control to work on longer mocks and be able to save them

Interlude: Different rhythms

Tip 7: I can't count

That '7 Tips' thing?

Total lie!

Tip 8: Maintain

A sustainable pace.

Protect your body

standing desk


playing pingpong


timeout app

Remember you're a Mammal

flux app

Bonus Tips!

Tip 10:

Per Project Fluid Apps

1 Browser per project

fluid app

Tip 11:

Style-Guide Driven Development

Tip 12:

Spike-Driven Development

My Open Questions:

Find me at

jonathanpberger@,, twitter, forrst, flickr, etc...


Any questions?