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)
Recommended