1. Nailing It Down
Detailed Design to Preserve the UX Vision
STC Summit 2011
Joe Sokohl
@mojoguzzi
#dtlDesign at #STC11
CONFIDENTIALITY
The concepts and methodologies contained herein are proprietary to Regular Joe Consulting LLC.
Duplication, reproduction or disclosure of information is this document without the express written
permission of Regular Joe Consulting is prohibited. Enjoy the work. We hope you find it useful.
Tuesday, May 17, 2011
2. Agenda
What “detailed design” is
Where it breaks down
What some solutions are
@mojoguzzi #dtlDesign 2
Tuesday, May 17, 2011
3. A bit about me
http://www.uxaustralia.com.au/conference-2010/design-thinking-is-this-our-ticket-to-the-big-table
@mojoguzzi #dtlDesign 3
Tuesday, May 17, 2011
4. Who this talk applies to
Agencies
Independent UXers
Highly regulated areas: healthcare, government,
military
Anyone working with distributed teams (including
cross-border, multiple time zone teams)
UX teams of one
@mojoguzzi #dtlDesign 4
Tuesday, May 17, 2011
5. Who this talk might not apply to
Heterogenous teams
UXers who also do the front-end
development of their apps
Co-located, nimble teams who don’t have
a need to retrace steps
Then again....
@mojoguzzi #dtlDesign 5
Tuesday, May 17, 2011
7. So what’s the big deal, anyway?
Determining what the problem is
7
Tuesday, May 17, 2011
8. Typical documentation approaches
Research artifacts such as competitive reviews,
heuristic analysis, mental models/affinity diagrams,
and personas
User/task matrixes
Hi-level wireframes
Concept models
Card sorts
And on and on and on...
@mojoguzzi #dtlDesign 8
Tuesday, May 17, 2011
9. Typical documentation approaches
Research artifacts such as competitive reviews,
heuristic analysis, mental models/affinity diagrams,
and personas
User/task matrixes
Hi-level wireframes
Concept models
Card sorts
And on and on and on...
@mojoguzzi #dtlDesign 9
Tuesday, May 17, 2011
10. What is Detailed Design?
Looking at different processes
10
Tuesday, May 17, 2011
11. VIEWW Summary
VISION INCEPTION ELABORATION WORK WEB
Discover the project goals, Design the information Refine the User Experience Develop the application, Deploy the finished
define requirements, and structure and system Design & System Design so integrating front end and application into production,
frame the initial scope of architecture of the an application can be built. back end systems. transfer ownership to
an application. application. support and maintenance
teams.
Activities Activities Activities Activities Activities
• Gather Input on Business, • Create High-Level User • Usability Testing • Create Deployment Plan • Initial Data Load
User and System Experience Design
• User POC • Update Detailed Design • Deployment
Requirements
• Create User Proof-of-Concept Document
• Create Detailed User • Create Administrative Guide
• Define Business
• Conduct Usability Testing Experience Design • Develop Components
Requirements • Develop User Education
(Component Source)
• Create High-Level System • Assess and Select Manual
• Define User Requirements
Architecture Technologies • Conduct Code Review
• Transition to Maintenance
• Develop Creative Brief
• Create Technical Proof-of- • Deployment Plan Team
• Define System Requirements Concept
• Detailed Architecture FUNCTIONAL
• Develop Initial Deployment TESTING RESULTS
• Create Technical POC USER ACCEPTANCE
Specification
REQUIREMENTS TESTING RESULTS
• Coding Standards
DOCUMENT
• Plan and Implement
HIGH-LEVEL
Development Environment
DESIGN DOCUMENT
DETAILED DESIGN
DOCUMENT
@mojoguzzi #dtlDesign 11
Tuesday, May 17, 2011
12. FiveDs Summary
Discover Design Define Develop Deliver
Define project goals, Further define a Refine design details, Build and integrate Complete the
business reqs, set of requirements create final design and front-end and commercialization of
and initial scope. and create systems obtain signoff. back-end systems. the product
and UX models
Activities Activities Activities Activities Activities
• Define goals • Brainstorming • Merge visual and • Image and page • Acceptance testing
functional design creation
• Key success factors • Scenario building • System and
• Final content • Content integration knowledge transfer
• VOC workshops • Wireframes
• Test scenarios • Coding • Product deployment
• EOC interviews • Visual direction
• Object analysis, • Unit testing • Marketing campaign
• B/U/S requirements • HL Info Architecture
modeling, design
• System staging in
• Site analysis • HL Sys Architecture
• Database analysis QA environment
• Audience analysis • Define technology and design
• Incremental QA and
• Initial use cases • Design testing on multiple
• Business processes documentation platforms
@mojoguzzi #dtlDesign 12
Tuesday, May 17, 2011
13. FiveDs Summary
Discover Design Define Develop Deliver
Define project goals, Further define a Refine design details, Build and integrate Complete the
business reqs, set of requirements create final design and front-end and commercialization of
and initial scope. and create systems obtain signoff. back-end systems. the product
and UX models
Activities Activities Activities Activities Activities
• Define goals • Brainstorming • Merge visual and • Image and page • Acceptance testing
functional design creation
• Key success factors • Scenario building • System and
• Final content • Content integration knowledge transfer
• VOC workshops • Wireframes
• Test scenarios • Coding • Product deployment
• EOC interviews • Visual direction
• Object analysis, • Unit testing • Marketing campaign
• B/U/S requirements • HL Info Architecture
modeling, design
• System staging in
• Site analysis • HL Sys Architecture
• Database analysis QA environment
• Audience analysis • Define technology and design
• Incremental QA and
• Initial use cases • Design testing on multiple
• Business processes documentation platforms
@mojoguzzi #dtlDesign 13
Tuesday, May 17, 2011
14. User Experiences Go Beyond the User Interface
Expectations frame users’
experiences through brand
perception and prior
experience
Users achieve goals by
performing tasks
They accomplish tasks by
interacting with content, Powerful Interactions
features, and functions in the
agent portal and other
applications, software and
tools
User interfaces bring the
User Rich Internet Application Solutions Single, reliable view of the
Single View of the
user experience alive, Interfaces Customer user’s entire relationship
providing simplified, with the enterprise supports
enjoyable online interactions Distributed Content business processes critical to
and instant feedback in and Functionality the delivery of a seamless
Web Sites Software / Tools Applications experience
flexible, intuitive and
forgiving workspaces
Business Information Identity
Processes Delivery
Transactional Analytics
Management
Loosely joined customer-
facing and internal business Content Reporting and
Notification Syndication
processes support quick and Management Monitoring
continuous experience
improvement Marketing Campaign Authentication and
Workflow Others
Management Authorization
Reliable content Experience
and data form the Enablers
foundations of a strong
user experience
product / service meta data analytic data user
content & data
•••
Beautiful experiences are more than pixel deep
@mojoguzzi #dtlDesign 14
Tuesday, May 17, 2011
16. Detailed Design Activities
Detailed sketches
Detailed scenarios with branching
User-centered use cases
Visual design specifications
Database design, specifically, fields & interactions
Exact interaction design, to include motion
High-fidelity (and possibly evolutionary) prototypes
L10N/I14N/A11Y
What else?
@mojoguzzi #dtlDesign 16
Tuesday, May 17, 2011
17. What’s the difference between reqs & specs?
Requirements
Requirements cannot be “gathered”
Requirements are not features
Requirements are not specifications
Specifications
“Effective documentation combines
text and images to describe the
anatomy and physiology
of a product.”
@mojoguzzi #dtlDesign 17
Tuesday, May 17, 2011
18. What’s Your Definition?
• My definition? A detailed design is
• The body of information that conveys
sufficient detail to communicate that
which can be coded.
• Just enough detail to enable the non-UX
team (dev, biz, mkt, release) to
understand the UX designer’s intent.
@mojoguzzi #dtlDesign 18
Tuesday, May 17, 2011
20. Where do they break? Why
Spec need
Team proximity or regulatory need (or both)
@mojoguzzi #dtlDesign 20
Tuesday, May 17, 2011
21. Two Sides of the Problem
?? !!
@mojoguzzi #dtlDesign 21
Tuesday, May 17, 2011
22. Requirements masquerading as specifications
Traditional approach
1.1.1. The system shall allow the teacher to
click a control which displays the first answer in the
lesson.
NOTE: Subsequent answers can be accessed by
User story approach
As a clinician and/or front desk assistant, I need to record the writer, provider(s),
assistant(s), as well as the date and time of entry for every clinical note, so that I can
maintain accurate clinical records.
@mojoguzzi #dtlDesign 22
Tuesday, May 17, 2011
23. Requirement: Turn indicators
1.3.2.5a: The system shall
include the ability for the
operator to indicate a changed
direction of travel
As a motorcyclist, I want to
indicate to followers the direction
I’m turning so that I won’t be hit.
@mojoguzzi #dtlDesign 23
Tuesday, May 17, 2011
25. Maybe a bit tooooo much....
Planning Track
Dev Project
IPM Officer
Manager Manager
QA
Manager
Once, at start of project
Org Process Guidance Project Process Instance
Tailoring Guidelines Project Plan
Vision Statement Master Schedule
Personas Risk Management Strategy
Plan Project
BaselineCM Project Commitments
Master Schedule Test Metrics
Test Approach
Release
Manager Define-Update Test
Approach
Track Complete
Test Approach
once per project
CM Guidelines CM Plan
Baseline CM Guidelines
Configuration
BaselineCM CM Access Control Policy
Management
CM Baseline Report
Every iteration
Scenario List
Scenario List Create a Scenarios
BaselineCM
Scenario
Architect
Business
Analyst
UATs
Every iteration
Iteration Start
QoS Req List
scenarios Create a Quality of
BaselineCM QoS Requirements
@mojoguzzi
Lifestyle Snapshot #dtlDesign Service Requirement 25
Tuesday, May 17, 2011 User Subject
26. A bridge to nowhere?
@mojoguzzi #dtlDesign 26
Tuesday, May 17, 2011
27. “
That is not it at all,
That is not what I meant,
at all. . . . . .
”
http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2009/3/30/1238371335802/TS-Eliot-003.jpg
@mojoguzzi #dtlDesign 27
Tuesday, May 17, 2011
29. Big, grandiose statement
Anything that specifies user
behavior or activities that
affect users belongs to the
user experience team
@mojoguzzi #dtlDesign 29
Tuesday, May 17, 2011
30. Big, grandiose statement
Anything that specifies user
behavior or activities that
affect users belongs to the
purview of the user
experience team
@mojoguzzi #dtlDesign 30
Tuesday, May 17, 2011
31. Who Does What
Typical roles on a project
PO Product owner
PM Project manager
IA Information architect
IxD Interaction designer
VisD Visual designer
TW Technical writer
BA Business analyst
SA Systems architect
DA Data architect
DBA Database analyst
Dev Developer
QA Quality assurance analyst
@mojoguzzi #dtlDesign 31
Tuesday, May 17, 2011
32. Sometimes specs fall into the wrong hands
@mojoguzzi #dtlDesign 32
Tuesday, May 17, 2011
33. Special order 191
Major Taylor will proceed to Leesburg, Va., and arrange for transportation of the sick and
those unable to walk to Winchester, securing the transportation of the country for this
purpose. The route between this and Culpeper Court-House east of the mountains being
unsafe will no longer be traveled. Those on the way to this army already across the river
will move up promptly; all others will proceed to Winchester collectively and under
command of officers, at which point, being the general depot of this army, its movements
will be known and instructions given by commanding officer regulating further movements.
III. The army will resume its march tomorrow, taking the Hagerstown road. General
Jackson's command will form the advance, and, after passing Middletown, with such
portion as he may select, take the route toward Sharpsburg, cross the Potomac at the
most convenient point, and by Friday morning take possession of the Baltimore and Ohio
Railroad, capture such of them as may be at Martinsburg, and intercept such as may
attempt to escape from Harper's Ferry.
IV. General Longstreet's command will pursue the main road as far as Boonsborough,
where it will halt, with reserve, supply, and baggage trains of the army.
V.General McLaws, with his own division and that of General R. H. Anderson, will follow
General Longstreet. On reaching Middletown will take the route to Harper's Ferry, and by
Friday morning possess himself of the Maryland Heights and endeavor to capture the
enemy at Harper's Ferry and vicinity.
@mojoguzzi #dtlDesign 33
Tuesday, May 17, 2011
35. Solutions
More detail at the right time
35
Tuesday, May 17, 2011
36. What Are Some Solutions
Frameworks
Style guides and pattern libraries
Accurate diagrams and traceable notes
A proverbial seat at the table.
@mojoguzzi #dtlDesign 36
Tuesday, May 17, 2011
37. Frameworks and design principles
NextGen Design Principles & Frameworks: a Case
Study
Windows Presentation Framework
HTML5
CSS
@mojoguzzi #dtlDesign 37
Tuesday, May 17, 2011
38. Style guides and pattern libraries
Apple HI Guidelines
YUI!
Search Patterns from Peter Morville
NeXTStep Style Guide
@mojoguzzi #dtlDesign 38
Tuesday, May 17, 2011
39. Let’s Talk Traceability
Along the Natchez Trace
@mojoguzzi #dtlDesign 39
Tuesday, May 17, 2011
40. Old School is So Old School
@mojoguzzi #dtlDesign 40
Tuesday, May 17, 2011
41. Display All Taxes & Fees - Currency
References
Functionality of this page is based on the current reservation review, reserve, and
confirmation pages. It covers reservations made in currency amounts. The GCCI free Use Case: 3.3
night reservation confirmation wireframe appears on the next page. Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4
All modified items should be consistent with existing functionality and visual standards. Site Map: site_map_display_all_fees
Base Wireframe: 4.1,4.2,4.3,4.4,4.5
1 Separated Rooms and Fees
The room stay is separated by first the total for all rooms reserved,
without any taxes or fees. Then the estimated taxes and fees
1 appears, followed by the total stay amount. If taxes and fees are
included in the rate, use the term “included”.
2 Breakdown of Taxes and Fees
2
The system breaks out and identifies all taxes, separate from any
optional service charges. The CPM system provides the tax and
fee information. If taxes and fees are included in the rate, use the
3 term “included in reservation amount”.
3 Optional Service Charges
If the property assesses any additional yet optional charges, they
appear here. If there are no optional charges, do not display
anything.
4
4 Additional Confirmations
The Reservation Amount module appears the same on the
following pages:
• Reservation Confirmation Email
• Change Reservation
• View Reservation
• Cancel Reservation
It contains the same information as the Reservation summary, just
in a different layout.
Best Western International Web Release I (AR0637) E,W, W Keane Architecture Services 41
Tuesday, May 17, 2011
42. Display All Taxes & Fees - Currency
References
Functionality of this page is based on the current reservation review, reserve, and
confirmation pages. It covers reservations made in currency amounts. The GCCI free Use Case: 3.3
night reservation confirmation wireframe appears on the next page. Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4
All modified items should be consistent with existing functionality and visual standards. Site Map: site_map_display_all_fees
Base Wireframe: 4.1,4.2,4.3,4.4,4.5
1 Separated Rooms and Fees
The room stay is separated by first the total for all rooms reserved,
without any taxes or fees. Then the estimated taxes and fees
1 appears, followed by the total stay amount. If taxes and fees are
included in the rate, use the term “included”.
2 Breakdown of Taxes and Fees
2
The system breaks out and identifies all taxes, separate from any
optional service charges. The CPM system provides the tax and
fee information. If taxes and fees are included in the rate, use the
3 term “included in reservation amount”.
3 Optional Service Charges
If the property assesses any additional yet optional charges, they
appear here. If there are no optional charges, do not display
anything.
4
4 Additional Confirmations
The Reservation Amount module appears the same on the
following pages:
• Reservation Confirmation Email
• Change Reservation
• View Reservation
• Cancel Reservation
It contains the same information as the Reservation summary, just
in a different layout.
Best Western International Web Release I (AR0637) E,W, W Keane Architecture Services 42
Tuesday, May 17, 2011
46. Case Study: Agile and an FDA-Compliant Company
“One can never get away from needing to provide
'objective evidence' of design inputs, verification &
validation and design outputs, this being the bare
framework of what is required by the FDA and
most, if not all the international medical device
quality requirements.”
@mojoguzzi #dtlDesign 46
Tuesday, May 17, 2011
47. “The Problem with ‘Quick and Dirty’...”
“...‘dirty’ is remembered long after
‘quick’ is forgotten.”
@mojoguzzi #dtlDesign 47
Tuesday, May 17, 2011
49. Find a way to detail your design
You can’t develop a user-centered product from
user stories
You can use personas to ask, “What would Juan
do?”
Take photos of sketches. Place them in the backlog.
Embed scenarios into the backlog for empathy
traceability
@mojoguzzi #dtlDesign 49
Tuesday, May 17, 2011
50. Culture of Your Community
@mojoguzzi #dtlDesign 50
Tuesday, May 17, 2011
51. Summary
What did we learn today?
51
Tuesday, May 17, 2011
52. “ In preparing for battle, I have always
found that plans are useless...
...but planning is indispensable. ”
—Dwight Eisenhower
@mojoguzzi #dtlDesign 52
Tuesday, May 17, 2011
53. So...
Detailed design is...
The body of information that conveys sufficient
detail to communicate that which can be coded.
Just enough detail to enable the developer
to understand the UX designer’s intent.
The codification of our empathy with users.
@mojoguzzi #dtlDesign 53
Tuesday, May 17, 2011
54. Many thanks!
Joe Sokohl
Joe@RegularJoeConsulting.com
1.804.873.6964
@mojoguzzi
@RegJoeConsults
Tuesday, May 17, 2011