UX of User Stories Workshop

The UX of User StoriesA UX Approach to Story Development UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

What’s onequestion you haveabout the UX ofUser Stories? UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

? 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 POsMany Simultaneous Functions (A Boundary Object) UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

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 easilyestimable, testable, etc. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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 evenuser interface? the right stories? UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

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

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

Our Sample ProjectA Tablet App for a Children’s CharityProviding education and shelter for abandoned and orphanedchildren around the world. UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

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

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

X-Mapping Activity1.Create the speed boat.2.Elicit Experience Stories3.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

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

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

X-Mapping Activity1.Create the speed boat.2.Elicit Experience Stories3.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

Experience Backlog Worried they’ll How do they correlateAre any of these start hounding mefeature stories? to our business goals? if I make one donation. Are there Make a strong case conﬂicting 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

Stories and UIExperienceStories Dev-Ready StoriesFeatureStoriesHow do theserelate toPersonas? UI is what glues stories together Enables more accurate estimates Enables better story coverage UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

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

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

Stories and UIExperiencestories Dev-Ready StoriesFeatureStories UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

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

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

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

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

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

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

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

Generate Cards from UI1. 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 ShareStatic Landing ProcessPage credit card payments“Donator- Make paymentmeter” via SMS UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

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

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

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

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

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

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

Experience Backlog Worried they’llDid we actually start hounding meaddress 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

The ScrumboardNew UX/Biz Active Ready Done Validated UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

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

Done vs ValidatedDone - 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

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

Thanks!@andersramsayandersramsay.comdesigningwithagile.comhttp://rosenfeldmedia.com/workshops/ UX OF USER STORIES @ANDERSRAMSAY #AGILEUX 13 AUG 2012

http://www.scoop.it	1124
https://twitter.com	20
http://confluence.k12.com	17
http://sprmario.tumblr.com	17
http://pinterest.com	9
https://si0.twimg.com	4
http://confluence.k12.enterprise.adm	3
https://twimg0-a.akamaihd.net	3
http://flavors.me	2
http://kred.com	2
http://translate.googleusercontent.com	1
http://tweetedtimes.com	1

UX of User Stories Workshop

by Anders Ramsay on Aug 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 1,203

Statistics

UX of User Stories Workshop Presentation Transcript