detailed design: nailing it down
Post on 01-Nov-2014
1.519 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
What “detailed design” is Where it breaks down What some solutions are
@mojoguzzi #dtlDesign
Agenda
2
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
A bit about me
3
http://www.uxaustralia.com.au/conference-2010/design-thinking-is-this-our-ticket-to-the-big-table
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign 11
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.
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign 14
• • •
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
Where do they break? Why
20
Team proximity or regulatory need (or both)
Spe
c ne
ed
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign 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.
Tuesday, May 17, 2011
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
@mojoguzzi #dtlDesign
Maybe a bit tooooo much....
25
Tuesday, May 17, 2011
@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. . . . . .
“
”
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
Big, grandiose statement
29
Anything that specifies user
behavior or activities that
affect users belongs to the
user experience team
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
Big, grandiose statement
30
Anything that specifies user
behavior or activities that
affect users belongs to the
purview of the user
experience team
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
@mojoguzzi #dtlDesign
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.
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign 34http://www.civilwar.org/battlefields/antietam/maps/antietammap3.html
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
What Are Some Solutions
Frameworks Style guides and pattern libraries Accurate diagrams and traceable notes A proverbial seat at the table.
36
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
Frameworks and design principles
NextGen Design Principles & Frameworks: a Case Study
Windows Presentation Framework HTML5 CSS
37
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
Style guides and pattern libraries
Apple HI Guidelines YUI! Search Patterns from Peter Morville NeXTStep Style Guide
38
Tuesday, May 17, 2011
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.
Tuesday, May 17, 2011
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.
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
Integrating Detailed Specs with Wireframes or Prototypes
43
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
Integrating Detailed Specs with Wireframes or Prototypes
44
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
“The Problem with ‘Quick and Dirty’...”
47
“...‘dirty’ is remembered long after ‘quick’ is forgotten.”
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign 52
In preparing for battle, I have always found that plans are useless...
...but planning is indispensable.—Dwight Eisenhower
“
”
Tuesday, May 17, 2011
@mojoguzzi #dtlDesign
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.
Tuesday, May 17, 2011
top related