7 Tips for
Practicing UX Design
that I learned
from Agile Development
Jonathan Berger, Pivotal Labs
for Method Design, September 2012
(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
Why am I here?
Why have I spent the last few years doing Pivotal-Tracker-oriented Test-Driven Development at Pivotal Labs?
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'?
Individuals & interactions over processes & tools
Working software over comprehensive doc'n
Customer collaboration over contract negotiation
Responding to change over following a plan
Agile on one foot:
Optimize for a low cost of change.
How do we Optimize for a low cost of change
7 Tips & Techniques & Tactics
Tip 1: Label mock-ups and assets
Use Ubiquitous language
- Use the same terms for the same things in Design, Development, and the Domain
Tip 2: Humans are narrative creatures
Design for Narrative
- Consistent test stories lead to better products.
- Bring your Personae and User Flows into tests.
- Make it easy for devs to use that research (externalize).
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
Personas are more memorable
with alliterative names
- Frank the Farmer
- Harry the Ham Lover
- Cathy the Customer Service Rep
Stick to your story
Tip 4: Optimize Physical Spaces for Conversation
Foamcore is awesome. Create spaces to create conversation. Externalize.
Mocks on Foamcore
Idea Evolution Board
Foamcore == walls-without-rooms!!
Tip 5: At first
Design in Adobe Creative Suite
- Before working software is built,
- For most IA and User Flows,
- For novel interactions.
Tip 6: Better yet,
Design on a Whiteboard
- Because that's usually faster,
- And faster's often better,
- And shared surfaces (whiteboards, Post-Its, index cards) foster collaboration.
Tip 7: Then,
Design in the Browser
When working software exists
and your mocks start falling out of sync
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
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
- • Design and development have a different pace.
- • Up-front design should be rough.
- • Don't be afraid to let the design degrade for the sake of rapid iteration.
- • Plan for a ~quarterly Graphic System refactor.
Tip 7: I can't count
That '7 Tips' thing?
Tip 8: Maintain
A sustainable pace.
Protect your body
Remember you're a Mammal
Per Project Fluid Apps
- Working on multiple projects at once?
- Fluid apps help you control your context and focus
1 Browser per project
Style-Guide Driven Development
- • Started to eliminate duplication,
- • Allowed PMs to design features on the whiteboard,
- • Became a way for developers to reject stories.
- • Design interactions in rails with throw-away code,
- • Screenshoot working software for mocks,
- • Cherry-pick small changes and contribute them back,
- • Devs can harvest code when they go through and TDD the stories.
My Open Questions:
- • Does any of this map to the design you do?
- • What are your tips?
Find me at
pivotallabs.com, gmail.com, twitter, forrst, flickr, etc...