From design specs to user stories (ProductCamp Boston 2016)

Shanfan Huang | @chitchy

- ProductCamp Boston April 09 2016 -

From Design Specs to User Stories

Product Designer

A Path to Agile Collaboration

var Software.DevelopmentTeam = Software.Developers

.append(ProductManager)

.append(Designer)

Who can woo the developer?

Wireframes:The backbone of the user

experience

Wireframes created by the product manager:

Wireframes created by the designer:

http://www.emerce.nl/achtergrond/social-sessions-10-diy-tips-om-engagement-verhogen

Designer:“Look at my beautiful clickable prototype with all the annotations specifying the intended user interaction and interface behavior!”

“Mmm, you’re cute. But too chunky.”

Things to Avoid:Monolith design depicting too many details about the future

User Stories:The Usher to the Product

Implementation

Product Manager:“Everything is broken down into the (prioritized) user stories.”

“The backlog! No-brainer, I like it!”

Scenario A:The designer finds it hard to read without the context…

Scenario A:… thus hard to cooperate

Developer added that

Things to Avoid:Design without the context.Design as an afterthought.

Scenario B:The Product Manager gets in “passive cooperation” mode…

Really?

Scenario B:… retrofitting stories to the design.

Things to Avoid:Describe the UI in the story.Neglect the reason behind.

var Software.DevelopmentTeam = Software.Developers

.append(ProductManager)

.append(Designer)

.append(BusinessAnalyst)

.append(ContentStrategist)

.append(QualityAssurance)

It’s not really about who woos the developers...

… but who woos the customers.

var Software.DevelopmentTeam = Software.Developers

.append(ProductManager)

.append(Designer)

.append(BusinessAnalyst)

.append(ContentStrategist)

.append(QualityAssurance)

We’re a team.

A PM’s View of World

A Designer’s View of World

Collaboration 1: Align the Big PictureUser Research & Co-Design Workshop

Develop the personas, business blueprints and user scenarios together.

Co-design high level wireframes to integrate the best of all the brains.

Collaboration 2: Improve Design AgilityUser Stories <- drive -> Design Specs

Design has long been a waterfall practice, not suited for pivoting course;

Agile is invented to combat the uncertainty and change.

http://www.clausewitz.com/readings/mcdp1.pdf

Example 1: Accommodating rapid design iterationVersion 1 Version 2

Version 3

Intent

TaskTalk to the designer...

Things to Try:Explain the user intent upfront.Describe the user task that fulfills the intent - and keep it open.

Example 2: Acknowledging Stopgap Solutions

Intent

Highlight the problem

Leave the solution open

Things to Try:First, REALLY think like a user.Then, acknowledge the project limitation.

Closing thoughts:Forget about the design specs, collaborate in real-time

PMs can help Designers to ground down to the execution

Use the (intent - task) user stories to steer the implementation

Designers can help PMs to visualize the big picture

Use the living persona and user scenarios to guide the overall product direction

Closing thoughts:Use the user stories and wireframes to start conversations.

Shanfan Huang | @chitchy

Thanks!

Product Designer

(Discussion Time)