1. The UX of User Stories
A UX Approach to Story Development
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

2. Overview
- Intro to User Stories
- Stories and User Research
- Stories and Personas
- Stories and UI Design
Break, somewhere in here
- Stories and the Product Road Map
- Stories and Sprinting
- Q&A/Wrapup
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

3. What’s one
question you have
about the UX of
User Stories?
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

4. As an auto sales rep, I want
to search for parts visually,
so I can be sure I’m
ordering the right part.
The (whole) story is not on the card
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

5. ?
Testers
PMs
As an auto sales rep, I want
to search for parts visually,
Developers so I can be sure I’m Users
ordering the right part.
UEDs
POs
Many Simultaneous Functions
(A Boundary Object)
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

6. Power in Numbers
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

7. Where Stories Fall Short...
I often order the wrong As an auto sales rep, I
part, because the part want to search for parts
numbering system is visually, so I can be sure
confusing. It wastes time I’m ordering the right part.
and makes me look stupid
in front of customers!
“What’s the underlying “Tell me what to build.”
problem or goal?” One of many possible solutions.
Optimized for delivery.
Often emotional, not easily
estimable, testable, etc.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

8. Where Stories Fall Short
Directory Purchasing Fulfillment Support
As an auto sales rep, I
want to search for
parts visually, so I can
be sure I’m ordering the
right part.
Are these all
How will these stories the stories?
fit together into a
whole product?
How will they map to the Are they even
user interface? the right stories?
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

9. A UX Approach to Stories...
I often order the wrong As an auto sales rep, I
part, because the part want to see the 3rd party
numbering system is mfr # next to the part #,
confusing. It wastes time
so I can be sure I’m
and makes me look stupid
in front of customers! ordering the right part.
Experience Stories Dev-Ready Stories
“What was the source “Let’s collaborate on
problem or goal?” what to build.”
Often emotional, not easily Uncovering the most pragmatic
estimable, testable, etc. solution through intensive collaboration.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

10. A UX Approach to Stories...
Elicit Collaboratively Generate Build,
Experience Explore Dev-Ready Evolve,
Stories Solutions Stories Validate
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

11. Teams
- 4-6 per team.
- 1 product owner
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

12. Our Sample Project
A Tablet App for a Children’s Charity
Providing education and shelter for abandoned and orphaned
children around the world.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

13. Business Goals
(or Story Boundaries)
- Convince visitors to make a donation.
- Persuade visitors to donate a little more than intended.
- Instill confidence donation is going toward the cause.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

14. Donator Tablet App
Elicit Glue together Generate Build,
Experience with UI design Dev-Ready Evolve,
Stories Stories Validate
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

15. Experience Mapping
- Based on the “Speed Boat” Innovation Game.
- Uncover and prioritize user needs and desires.
- Goal: Create an experience backlog.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

16. X-Mapping Activity
1.Create the speed boat.
2.Elicit Experience Stories
3.Place cards in pairs.
- Cards holding you back are
anchors
- Cards pulling you forward are
propellers.
4.Self-organized chunking.
5.Label chunks.
6.Prioritize if needed
- eg w/Dot-voting.
7.Create Backlog.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

17. Elicit Experience Stories
- Generate cards through discussion.
- Place cards on experience map in pairs.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

18. Convo Starters
- Got a favorite charity? Why do you like it?
- Anything frustrate you about donating to charities?
- Ever wanted to donate but weren’t able to? Why?
- What would be the perfect donation process?
- What would motivate you to donate a little more?
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

19. X-Mapping Activity
1.Create the speed boat.
2.Elicit Experience Stories
3.Place cards in pairs.
- Cards holding you back are
anchors
- Cards pulling you forward are
propellers.
4.Self-organized chunking.
5.Label chunks.
6.Prioritize if needed
- eg w/Dot-voting.
7.Create Backlog.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

20. Experience Backlog
Worried they’ll How do they correlate
Are any of these start hounding me
feature stories? to our business goals?
if I make one
donation.
Are there
Make a strong case
conflicting for the cause, and I’m
stories? willing to put up with
a lot of UX issues
Can’t tell where
my $$$ actuall
y
goes.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

21. Stories and UI
Experience
Stories
Dev-Ready
Stories
Feature
Stories
How do these
relate to
Personas? UI is what glues stories together
Enables more accurate estimates
Enables better story coverage
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

22. Stories and Personas
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

23. As an auto sales rep, I want
to search for parts visually,
so I can be sure I’m
ordering the right part.
Contextualizing the Story
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

24. Giving stories context
with photos, videos of
the user’s environment.
Personas as the voice of the story...
Ted says: Ted wants wants to search
As an auto sales rep, I for parts visually, so I can As an auto sales rep, I want
want to search for parts be sure I’m ordering the to search for parts visually,
visually, so I can be sure right part. so I can be sure I’m
I’m ordering the right part. ordering the right part.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

25. Stories and UI
Experience
stories
Dev-Ready
Stories
Feature
Stories
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

26. UI Exploration with Design Studio
- Tapping into the whole team’s knowledge and imagination.
- Can be used for research or actual design.
- Three variants: Divergent, Convergent, Ad-Hoc
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

27. A Design Studio Pattern
Establish Warmup Sketching Pitch/
Boundaries Timebox Critique
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

28. Warmup
- 3-5 minute timebox.
- Each participant writes as many
features they can think of on
separate stickies.
- Becomes a feature palette for
sketching.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

29. Sketching Timebox
- 5m timebox.
- Everyone sketches.
- No rules.
- If conducting with general
stakeholders, clarify that this is
research, not design.
- If conducting with the internal
team, the UI concepts can be the
basis for the actual design.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

30. Pitch/Critique
- Post the sketches.
- 2m round-robin, then open crit.
- Take careful notes, attach to the
respective sketches.
- Look for and work to resolve
vision differences.
- (Optional) Dot-vote to uncover
trending solutions.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

31. Elicit Glue together Generate Build,
Experience with UI design Dev-Ready Evolve,
Stories Stories Validate
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

32. UI Exploration
MVP/ Storymapping
Product Road
Map
Planning & Estimating
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

33. Storymapping 101
Attract Convert Transact Upsell Priority
MVP?
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

34. Generate Cards from UI
1. Create the backbone: What’s the top-level flow or structure?
2. Work with “devs” to slice and dice features into cards.
Attract Transact Upsell Share
Static Landing Process
Page credit card
payments
“Donator- Make payment
meter” via SMS
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

35. Those who need a document should participate in creating it.
—Ancient Agile Proverb
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

36. Stories and the Product Road Map
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

37. Product Road Map and MVP
- Designing releases, uncovering a Minimum Viable Product (MVP)
- Many ways to slice and dice.
- First release often hardest.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

38. MVP Strategies
- Painkiller
Fastest/Cheapest way to remove
user pain.
- Fa$t Money
Fastest path to revenue.
- Go Ugly Early
Screw the UX, just make it work.
- Fake It ‘til You Make It
Create fake features to capture
metrics and validate your idea.
There is no one right way.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

39. The UX of Estimating
- Attaching a cost to each story.
- Be sure estimate is informed by
UI Exploration.
- Be present, prepared to speak up
and negotiate.
- Understand the estimation units
- Understand stories and
estimation.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012 Photo: ryanendres.blogspot.com

40. Find the thinnest product slice
Attract Transact Upsell Share
MVP?
Static Landing Process
Page credit card
payments
Make payment
“Donator-
via SMS
meter”
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

41. Donator Tablet App
Elicit Glue together Generate Build,
Experience with UI design Dev-Ready Evolve,
Stories Stories Validate
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

42. Experience Backlog
Worried they’ll
Did we actually start hounding me
address these? if I make one
donation.
Make a strong case
for the cause, and I’m
willing to put up with
a lot of UX issues
Can’t tell where
my $$$ actuall
y
goes.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

43. The Scrumboard
New UX/Biz Active Ready Done Validated
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

44. Micro-Sprint
- Self-organize into UX/”Dev”/PO
- Create paper prototypes that
allow for completing a donation
process.
- I’ll initiate “User Fridays”
cadences.
- Validate the original Experience
Stories against your design.
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

45. Done vs Validated
Done - a tool for helping teams make decisions and move forward.
Can we decide that this task is done and move on to the next thing?
Validated - a measurement of design value.
Was this idea as good as we thought it was?
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

46. Q&A
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

47. Thanks!
@andersramsay
andersramsay.com
designingwithagile.com
http://rosenfeldmedia.com/workshops/
UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012