Detailed design: Nailing it Down

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

Nailing It DownDetailed Design to Preserve the UX Vision

STC Summit 2011Joe Sokohl@mojoguzzi#dtlDesign at #STC11

Tuesday, May 17, 2011

http://www.uxaustralia.com.au/conference-2010/joe-sokohl








What “detailed design” is Where it breaks down What some solutions are

@mojoguzzi #dtlDesign

Agenda

2



A bit about me

3

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

4



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

5

Then again....Tuesday, May 17, 2011

@mojoguzzi #dtlDesign 6


Determining what the problem is

So what’s the big deal, anyway?

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

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

9


Looking at different processes

What is Detailed Design?

10



VIEWW Summary

Activities• Gather Input on Business,

User and System Requirements

• Define Business Requirements

• Define User Requirements

• Develop Creative Brief

• Define System Requirements

REQUIREMENTSDOCUMENT

Discover the project goals, define requirements, and frame the initial scope of an application.

VISION INCEPTION ELABORATION WORK WEB

Activities

• Create High-Level User Experience Design

• Create User Proof-of-Concept

• Conduct Usability Testing

• Create High-Level System Architecture

• Create Technical Proof-of-Concept

• Develop Initial Deployment Specification

HIGH-LEVEL DESIGN DOCUMENT

Activities

• Usability Testing

• User POC

• Create Detailed User Experience Design

• Assess and Select Technologies

• Deployment Plan

• Detailed Architecture

• Create Technical POC

• Coding Standards

• Plan and Implement Development Environment

DETAILED DESIGN DOCUMENT

Activities• Create Deployment Plan

• Update Detailed Design Document

• Develop Components (Component Source)

• Conduct Code Review

FUNCTIONAL TESTING RESULTS

Activities

• Initial Data Load

• Deployment

• Create Administrative Guide

• Develop User Education Manual

• Transition to Maintenance Team

USER ACCEPTANCE TESTING RESULTS

Design the information structure and system architecture of the application.

Refine the User Experience Design & System Design so an application can be built.

Develop the application, integrating front end and back end systems.

Deploy the finished application into production, transfer ownership to support and maintenance teams.



FiveDs Summary

Discover Design Define Develop Deliver

Define project goals, business reqs, and initial scope.

Activities

•Define goals

•Key success factors

•VOC workshops

•EOC interviews

•B/U/S requirements

•Site analysis

•Audience analysis

•Initial use cases

•Business processes

Further define a set of requirements and create systems and UX models

Activities

•Brainstorming

•Scenario building

•Wireframes

•Visual direction

•HL Info Architecture

•HL Sys Architecture

•Define technology

Refine design details, create final design and obtain signoff.

Activities

•Merge visual and functional design

•Final content

•Test scenarios

•Object analysis, modeling, design

•Database analysis and design

•Design documentation

Build and integrate front-end and back-end systems.

Activities

•Image and page creation

•Content integration

•Coding

•Unit testing

•System staging in QA environment

•Incremental QA and testing on multiple platforms

Complete the commercialization of the product

Activities

•Acceptance testing

•System and knowledge transfer

•Product deployment

•Marketing campaign

12



FiveDs Summary

Discover Design Define Develop Deliver

Define project goals, business reqs, and initial scope.

Activities

•Define goals

•Key success factors

•VOC workshops

•EOC interviews

•B/U/S requirements

•Site analysis

•Audience analysis

•Initial use cases

•Business processes

Further define a set of requirements and create systems and UX models

Activities

•Brainstorming

•Scenario building

•Wireframes

•Visual direction

•HL Info Architecture

•HL Sys Architecture

•Define technology

Refine design details, create final design and obtain signoff.

Activities

•Merge visual and functional design

•Final content

•Test scenarios

•Object analysis, modeling, design

•Database analysis and design

•Design documentation

Build and integrate front-end and back-end systems.

Activities

•Image and page creation

•Content integration

•Coding

•Unit testing

•System staging in QA environment

•Incremental QA and testing on multiple platforms

Complete the commercialization of the product

Activities

•Acceptance testing

•System and knowledge transfer

•Product deployment

•Marketing campaign

13



• • •

User Experiences Go Beyond the User Interface

Rich Internet Application Solutions

Users achieve goals by performing tasks

Reliable content and data form the foundations of a strong user experience

Single, reliable view of the user’s entire relationship with the enterprise supports business processes critical to the delivery of a seamless experience

They accomplish tasks by interacting with content, features, and functions in the agent portal and other applications, software and tools

User interfaces bring the user experience alive, providing simplified, enjoyable online interactions and instant feedback in flexible, intuitive and forgiving workspaces

Loosely joined customer-facing and internal business processes support quick and continuous experience improvement

Powerful Interactions

Single View of the Customer

InformationDelivery Transactional

Marketing CampaignManagement

Analytics

Reporting andMonitoringNotification

Workflow Others

ContentManagement

Authentication andAuthorization

IdentityManagement

Syndication

Web Sites

Distributed Content and Functionality

product / servicecontent & data

analytic datameta data user

BusinessProcesses

UserInterfaces

ExperienceEnablers

Software / Tools Applications

Expectations frame users’ experiences through brand perception and prior experience

Beautiful experiences are more than pixel deep



Detailed design codifies empathy.

15



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?

16



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

17



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.

18


Where do they break down?

19



Where do they break? Why

20

Team proximity or regulatory need (or both)

Spe

c ne

ed



Two Sides of the Problem

?? !!



Requirements masquerading as specifications

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

22

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.

Traditional approach

User story approach



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


Planning Track

BaselineCMBaseline

Configuration Management

ReleaseManager

once per project

BaselineCMCreate aScenario

BusinessAnalyst

Every iteration

UserExperience

Architect

QoS Requirements

Scenario ListScenarios

BaselineCMCreate a Quality of

Service Requirement

Every iteration

Lifestyle Snapshot

Scenario List

Iteration Start

CM PlanCM GuidelinesCM Access Control PolicyCM Baseline Report

CM Guidelines

BaselineCMCreateProduct

Requirements

Every iteration

ApplicationArchitect

scenarios

QoS Requirements

Lead Developer

Service SpecificationsReference Solution

Application DiagramSystem Diagram

Functional RequirementsUI Flow ModelOperational Requirements

BaselineCMEstablish

Environments

Build Engineer Once per iteration

Integration SequenceRationale for Integration SequenceSupport Docs for Integration EnvironmentProduct Integration Criteria

BaselineCMPlan Project

IPM Officer

Once, at start of project

Project Manager

DevManager

QA Manager

Master Schedule

Org Process GuidanceTailoring Guidelines

Vision StatementPersonas

Project Process InstanceProject PlanMaster ScheduleRisk Management StrategyProject Commitments

Track Complete

BaselineCM

Create Solution Architecture

Once at the start of a project and on-going at start of each iteration

Threat Model

Performance Model

Existing Architecture

Vision Statement

Org Coding GuidelinesStatic Analysis GuidelinesStatic Analysis Rules

Coding Guidelines

Define-Update Test Approach

Architect

Test Approach

Test MetricsTest Approach

UATs

QoS Req List

Domain Model

Subject Matter Expert

Deployment DiagramLogical Data Center DiagramSelection Justification

Infrastr…Architect

Peer Review Feedback


Maybe a bit tooooo much....

25



A bridge to nowhere?

26


@mojoguzzi #dtlDesign 27http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2009/3/30/1238371335802/TS-Eliot-003.jpg

That is not it at all, That is not what I meant, at all. . . . . .

“

”



Why Data Architecture Is UX Design

28



Big, grandiose statement

29

Anything that specifies user

behavior or activities that

affect users belongs to the

user experience team



Big, grandiose statement

30

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

31

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 analystTuesday, May 17, 2011


Sometimes specs fall into the wrong hands

32



Special order 191

33

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 34http://www.civilwar.org/battlefields/antietam/maps/antietammap3.html


More detail at the right time

Solutions

35



What Are Some Solutions

Frameworks Style guides and pattern libraries Accurate diagrams and traceable notes A proverbial seat at the table.

36



Frameworks and design principles

NextGen Design Principles & Frameworks: a Case Study

Windows Presentation Framework HTML5 CSS

37



Style guides and pattern libraries

Apple HI Guidelines YUI! Search Patterns from Peter Morville NeXTStep Style Guide

38



Let’s Talk Traceability

39

Along the Natchez Trace



Old School is So Old School

40


Keane Architecture ServicesBest Western International Web Release I (AR0637) E,W, W 41

Display All Taxes & Fees - Currency

ReferencesUse Case: 3.3Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4Site Map: site_map_display_all_feesBase Wireframe: 4.1,4.2,4.3,4.4,4.5

Separated Rooms and Fees1The room stay is separated by first the total for all rooms reserved, without any taxes or fees. Then the estimated taxes and fees appears, followed by the total stay amount. If taxes and fees are included in the rate, use the term “included”.

Breakdown of Taxes and Fees2The 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 term “included in reservation amount”.

Optional Service Charges3If the property assesses any additional yet optional charges, they appear here. If there are no optional charges, do not display anything.

1

3

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 night reservation confirmation wireframe appears on the next page.All modified items should be consistent with existing functionality and visual standards.

2

4

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


Keane Architecture ServicesBest Western International Web Release I (AR0637) E,W, W 42

Display All Taxes & Fees - Currency

ReferencesUse Case: 3.3Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4Site Map: site_map_display_all_feesBase Wireframe: 4.1,4.2,4.3,4.4,4.5

Separated Rooms and Fees1The room stay is separated by first the total for all rooms reserved, without any taxes or fees. Then the estimated taxes and fees appears, followed by the total stay amount. If taxes and fees are included in the rate, use the term “included”.

Breakdown of Taxes and Fees2The 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 term “included in reservation amount”.

Optional Service Charges3If the property assesses any additional yet optional charges, they appear here. If there are no optional charges, do not display anything.

1

3

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 night reservation confirmation wireframe appears on the next page.All modified items should be consistent with existing functionality and visual standards.

2

4

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



Integrating Detailed Specs with Wireframes or Prototypes

43



Integrating Detailed Specs with Wireframes or Prototypes

44



But...but...what about Agile?Tuesday, May 17, 2011


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

46



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

47

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



Desiree Sy’s Approach

48



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

49



Culture of Your Community

50


What did we learn today?

Summary

51



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

...but planning is indispensable.—Dwight Eisenhower

“

”



So...

53

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.


Joe [email protected]@mojoguzzi@RegJoeConsults

Many thanks!


Detailed design: Nailing it Down

Documents

covers reservations made

mental models affinity diagrams

site map display all fees base wireframe

ux designers intent

specifies user behavior

cases design testing

design incremental qa

current reservation review