The document discusses an adaptive approach for product design that incorporates agile, prototyping and lean UX methods. It proposes a framework with standardized templates to bring clarity and focus to the complex product design and development phase when working with distributed teams. Key elements of the framework include annotated wireframes, prototypes, UI design and style guides as core "build documents" to facilitate consistent development input across teams. The use of stages gates and complexity scoring is also suggested to match project needs with appropriate process rigidity.

1. Towards an adaptive approach
for Product Design
Gavan Gibson!
November 17th, 2014

2. DISCOVERY!Product Design & Development
3
Product Design requires a systemic approach and thinking

3. DISCOVERY!Product Design & Development
4
abductive thinking

4. DISCOVERY!Product Design & Development
5

5. DISCOVERY!Product Design & Development
6

6. DISCOVERY!Product Design & Development
7
CHAPTER : FRAMEWORK / DISCOVERY
Products & Services
Existing
ExistingNew
New
New Channels &!
Markets!
Risk: Medium
Diversification & !
Disruption!
Risk: High
Iterative &!
Operational!
Risk: Low
New Product & !
Service Development!
Risk: Medium

7. DISCOVERY!Product Design & Development
8
Opportunity Values:
• Growth
• Sustainability
• Cost Reduction
Business value matrix
Business !
Value!
High Value, Low Complexity High Value, High Complexity
Low Value, Low Complexity Low Value, High Complexity
Implementation!
Complexity!
High
Low High

8. DISCOVERY!Product Design & Development
9
You’ve defined the problem space and inferred a solution set:
now comes the product design phase!

9. DESIGN & BUILD PHASE!Product Design & Development
10
Product design & development framework!

10. DESIGN & BUILD PHASE!Product Design & Development
*Adaptive path product design process and methodology!
11
Product design & development framework

11. DESIGN & BUILD PHASE!Product Design & Development
12
Journey from uncertainty to clarity and focus

12. DESIGN & BUILD PHASE!Product Design & Development
13
Complexity brings with it the potential for entropy

13. DESIGN & BUILD PHASE!Product Design & Development
14
The reality is the more complex a project is the more likely things
can and will go wrong during the design & build phase

14. DESIGN & BUILD PHASE!Product Design & Development
15
What can we do to bring clarity and focus"
to product development?

15. DESIGN & BUILD PHASE!Product Design & Development
16
You’ve integrated agile, prototyping and lean UX into your process!

16. DESIGN & BUILD PHASE!Product Design & Development
17
What happens when we reach the product design &
build phase and what are the use cases?

17. DESIGN & BUILD PHASE!Product Design & Development
18
We will always build prototypes for testing, but when it comes
time to put it together into a consumer or business facing product:
• Project teams struggle with recurring gaps and ambiguity during
the product design & build phase

18. DESIGN & BUILD PHASE!Product Design & Development
19
Interaction for this component?
Content: Title, body copy and labels?
Link <ahref>?
What’s the alt tag for this image?
File name for this video?
Accessibility requirements/ guidelines?
Meta tags?
Alternate screens for this component?
Transcript for this video?

19. DESIGN & BUILD PHASE!Product Design & Development
20
Prototyping requires interpretation and collaboration when it comes
time to build the digital product.
• This becomes challenging when we’re working on multiple project
with distributed teams, contractors and with vendors

20. DESIGN & BUILD PHASE!Product Design & Development
21
Standardization and definition are key for
Clarity and Focus in complex projects

21. DESIGN & BUILD PHASE!Product Design & Development
22
Experience Design Framework
REFINE &
MEASURE
Connect
Background
Research 5 Execution
STAGE GATE:
DESIGN CONCEPT/
EXPERIENCE BRIEF
UAT
REFINE &
MEASURE
ANALYTICS
DEFINE
1 Understand
the Project
Activities
STAGE GATE:
Business Strategy
Product
Requirements
Activities
Front End Development
Backend Development
STAGE GATE:
IA, WIREFRAMES &
CONTENT STRATEGY
6 Measure & Document
Activities
Baseline Metrics
Analyze Metrics
KICK
OFF
STAGE GATE:
BUSINESS STRATEGY &
PRODUCT
REQUIREMENTS
DOCUMENT
DESIGN
DEVELOP
LAUNCH
2 Understand
the Customer
Activities
Conceptual Model
Surveys
User Task Model
Persona’s
Affinity Mapping
Heuristic Analysis
Competitive Review
Design Concept
Experience Brief
3 Model the
Experience
Activities
Wireframes
Site Map
User Flow
Content Strategy
4 Test & Learn:
Refine & Build the
Experience
Activities
Prototyping
Usability Testing
Iterative Design: Test &
Learn
UI Design
Style Guides
Design Patterns
STAGE GATE:
UI DESIGN, STYLE GUIDE
& CONTENT DECK
Q&A
DELIVER FINAL
PRODUCT
MEASURE
STAGE GATE:
Design Concept
Experience Brief
STAGE GATE:
IA
Wireframes
STAGE GATE:
UI Design
Style Guide
Content Deck
STAGE GATE:
User Acceptance
testing
STAGE GATE:
Measure & Refine
Product
!

22. DESIGN & BUILD PHASE!Product Design & Development
23
Adaptive framework

23. DESIGN & BUILD PHASE!Product Design & Development
OVERVIEW ContinuedUX TEMPLATES: DESIGN
24
Complexity & Artifact Matrix for the Design and Build phase
Complexity Score!
UX: Annotated Wireframes
• Annotated Wireframe = IA, Annotated
Wireframes & Copy Deck
• Annotated Prototype = Annotated
Prototype
• Designated = FT resourced teams
• Distributed = Remote, contractors and
vendors
100%
80%
60%
50%
40%
20%
0%!
Lean UX: Prototype
• Annotated
Prototype
• UI design
• Prototype
• Annotated!
Wireframe!
• Annotated
Prototype
• UI design
UI Design + Style GuideLean UX: Prototype
100% 75% 50% 25% 0%
Designated Teams! Distributed Teams!

24. DESIGN & BUILD PHASE!Product Design & Development
APPENDIXUX TEMPLATES: DESIGN
25
Engagement tiers:
1. Low complexity
• Small in scope: Simple micro site or
feature enhancements
• Actors: UI Design & Development
2. Medium complexity
• Web site or consumer mobile applications
• Actors: UX, UI design & Development
3. High complexity
• First to market products and services.
Responsive Web Design & Enterprise
level initiatives
• Actors: UX, UI design & Development
Product design team use cases
1. Designated teams: 50% to 100% resourced
• Lean, agile process: prototype is the build document
• If there are any gaps, team is up to speed to address
those
• Churn, rework is NOT an issue
2. Part time: 3 + concurrent projects - 25% to 33% allocation
• Rigid process: requires more explicit documentation
• Risks: Team is fragmented and gaps can quickly become
road blocks
• Churn, rework is an issue
3. Distributed teams, contractors and or vendors
• Rigid process: requires explicit documentation
• Risks: Team is fragmented and gaps quickly become road
blocks
• Churn, rework is an issue
Project team use case versus complexity

25. DESIGN & BUILD PHASE!Product Design & Development
IntuitiveDESIGN + BUILD
26
The building blocks* for complex projects with distributed teams are:
UI:
• UI design
• Style Guide)
DEVELOPMENT
INPUT:
• UX: IA, Interaction & Copy
• UI: Design & Style Guide
Consistent
UX:
• IA/ User flow
• Prototype &
Wireframes
• Copy Deck
Scalable

26. DESIGN & BUILD PHASE!Product Design & Development
27
The build documents for complex projects with distributed teams are:
• IA/ User Flow
• Interaction/ Annotated Wireframes
• Copy Deck
• UI Design
• Style Guide

27. DESIGN & BUILD PHASE!Product Design & Development
28
GrandandToy.com: from Design and Development to Launch in 12 months: 12/2010
http://www.grandandtoy.com!