adaptive product design
TRANSCRIPT
7
CHAPTER : FRAMEWORK / DISCOVERY
Products & Services
Existing
New
New Existing
New Channels &!Markets!
Risk: Medium
Diversification & !Disruption!
Risk: High
Iterative &!Operational!
Risk: Low
New Product & !Service Development!
Risk: Medium
Product Design & Development DISCOVERY!
8
Opportunity Values:
• Growth
• Sustainability
• Cost Reduction
Business !Value!
Implementation!Complexity!
High
Low High
High Value, Low Complexity High Value, High Complexity
Low Value, Low Complexity Low Value, High Complexity
Business value matrix
Product Design & Development DISCOVERY!
9
You’ve defined the problem space and inferred a solution set: now comes the product design phase!
Product Design & Development DISCOVERY!
*Adaptive path product design process and methodology!11
Product Design & Development DESIGN & BUILD PHASE!
Product design & development framework
13
Complexity brings with it the potential for entropy
Product Design & Development DESIGN & BUILD PHASE!
14
The reality is the more complex a project is the more likely things can and will go wrong during the design & build phase
Product Design & Development DESIGN & BUILD PHASE!
15
What can we do to bring clarity and focus" to product development?
Product Design & Development DESIGN & BUILD PHASE!
16
You’ve integrated agile, prototyping and lean UX into your process!
Product Design & Development DESIGN & BUILD PHASE!
17
Product Design & Development DESIGN & BUILD PHASE!
What happens when we reach the product design & build phase and what are the use cases?
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
Product Design & Development DESIGN & BUILD PHASE!
19
Interaction for this component?
Link <ahref>?
Content: Title, body copy and labels?
File name for this video?
Meta tags? Alternate screens for this component?
Accessibility requirements/ guidelines?
Transcript for this video?
What’s the alt tag for this image?
Product Design & Development DESIGN & BUILD PHASE!
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
Product Design & Development DESIGN & BUILD PHASE!
21
Standardization and definition are key for Clarity and Focus in complex projects
Product Design & Development DESIGN & BUILD PHASE!
22
Experience Design Framework
REFINE & MEASURE
STAGE GATE:
DESIGN CONCEPT/ EXPERIENCE BRIEF
MEASURE
ANALYTICS
DEFINE
STAGE GATE: Business Strategy Product Requirements
1 Understand the Project Activities Connect Background Research 5 Execution
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
UAT
REFINE & 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
!
Product Design & Development DESIGN & BUILD PHASE!
24
U X T E M P L AT E S : D E S I G N O V E R V I E W Continued
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%!
• UI design
Lean UX: Prototype
Lean UX: Prototype UI Design + Style Guide
100% 75% 50% 25% 0%
• Prototype
Designated Teams! Distributed Teams!
• Annotated Prototype
• UI design
• Annotated Prototype
• Annotated! Wireframe!
Product Design & Development DESIGN & BUILD PHASE!
25
U X T E M P L AT E S : D E S I G N A P P E N D I X
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
Product Design & Development DESIGN & BUILD PHASE!
26
The building blocks* for complex projects with distributed teams are:
DEVELOPMENT
INPUT: • UX: IA, Interaction & Copy • UI: Design & Style Guide
UI: • UI design
• Style Guide) DESIGN + BUILD Intuitive
Scalable Consistent
UX:
• IA/ User flow • Prototype &
Wireframes • Copy Deck
Product Design & Development DESIGN & BUILD PHASE!
27
The build documents for complex projects with distributed teams are:
Product Design & Development DESIGN & BUILD PHASE!
• IA/ User Flow • Interaction/ Annotated Wireframes • Copy Deck
• UI Design
• Style Guide