Detailed design: Nailing it Down

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

Agenda

 What “detailed design” is

 Where it breaks down

 What some solutions are

@mojoguzzi #dtlDesign 2


A bit about me

http://www.uxaustralia.com.au/conference-2010/design-thinking-is-this-our-ticket-to-the-big-table


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



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....


So what’s the big deal, anyway?

Determining what the problem is

7


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...



What is Detailed Design?

Looking at different processes

10


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



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


• 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



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


Detailed design
codifies
empathy.



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?



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.”



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.



Where do they break down?

19


Where do they break? Why

Spec need

Team proximity or regulatory need (or both)



Two Sides of the Problem

?? !!



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.



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.



Requirement: Turn indicators



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

A bridge to nowhere?



“
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


Why Data Architecture Is UX Design



Big, grandiose statement

Anything that specifies user
behavior or activities that
affect users belongs to the
user experience team



Big, grandiose statement

Anything that specifies user
behavior or activities that
affect users belongs to the

purview of the user

experience team



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


Sometimes specs fall into the wrong hands



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.



http://www.civilwar.org/battlefields/antietam/maps/antietammap3.html


Solutions

More detail at the right time

35


What Are Some Solutions

 Frameworks

 Style guides and pattern libraries

 Accurate diagrams and traceable notes

 A proverbial seat at the table.



Frameworks and design principles

 NextGen Design Principles & Frameworks: a Case
Study
 Windows Presentation Framework

 HTML5

 CSS



Style guides and pattern libraries

 Apple HI Guidelines

 YUI!

 Search Patterns from Peter Morville

 NeXTStep Style Guide



Let’s Talk Traceability

Along the Natchez Trace


Old School is So Old School



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


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


Integrating Detailed Specs with Wireframes or Prototypes



But...but...what about Agile?


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.”



“The Problem with ‘Quick and Dirty’...”

“...‘dirty’ is remembered long after
‘quick’ is forgotten.”



Desiree Sy’s Approach



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



Culture of Your Community



Summary

What did we learn today?

51


“ In preparing for battle, I have always
found that plans are useless...

...but planning is indispensable. ”
—Dwight Eisenhower


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.



Many thanks!

Joe Sokohl
Joe@RegularJoeConsulting.com
1.804.873.6964
@mojoguzzi
@RegJoeConsults


Detailed design: Nailing it Down

More Related Content

What's hot (17)

Similar to Detailed design: Nailing it Down (20)

More from jsokohl (16)

Detailed design: Nailing it Down