nailing it down: detailed design to preserve the ux vision
Post on 20-Oct-2014
2.907 views
DESCRIPTION
Slides for my IA Summit '11 workshop. Detailed design codifies empathy.TRANSCRIPT
![Page 1: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/1.jpg)
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
Information Architecture Summit ’11Joe Sokohl@mojoguzzi@RegJoeConsults
![Page 2: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/2.jpg)
What is “detailed design,” anyway? What’s the problem What are some solutions
Agenda
2
![Page 3: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/3.jpg)
Schedule
Intros
What is detailed design? Who does it?
Where does it break down? Why?
Break
What are some solutions? How do we work within our projects?
Break
How does Agile fit in?
Open discussion, Q&A
3
![Page 4: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/4.jpg)
A bit about me
4
http://www.uxaustralia.com.au/conference-2010/design-thinking-is-this-our-ticket-to-the-big-table
![Page 5: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/5.jpg)
What about you? What’s your story?
5
![Page 6: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/6.jpg)
Who this workshop applies to
Agencies Independent UXers Highly regulated areas: healthcare, government,
military Anyone working with distributed teams (including
cross-border, multiple time zone teams)
6
![Page 7: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/7.jpg)
Who this workshop 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
7
Then again....
![Page 8: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/8.jpg)
8
![Page 9: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/9.jpg)
Determining what the problem is
So what’s the big deal, anyway?
9
![Page 10: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/10.jpg)
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...
10
![Page 11: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/11.jpg)
Exercise 1: Create your own details
Look at the wireframe. You need to let the development team know how to
realize this wireframe as a functioning Web-based experience.
In 10 minutes, identify what you think would be needed. If you run short of time, circle items on the page that you would communicate.
Think how you would do this.
11
![Page 12: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/12.jpg)
Looking at different processes
What is Detailed Design?
12
![Page 13: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/13.jpg)
13
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.
![Page 14: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/14.jpg)
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
14
![Page 15: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/15.jpg)
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
15
![Page 16: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/16.jpg)
16
• • •
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
![Page 17: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/17.jpg)
Detailed design codifies empathy.
17
![Page 18: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/18.jpg)
Sketches provide documentation
18
The genius in our styling department is that they not only have a great feel for design, but also for the fact that the design needs to function properly on a motorcycle. That melding of functionality and styling is what makes our motorcycles very, very special.
![Page 19: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/19.jpg)
Detailed sketches
19
![Page 20: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/20.jpg)
Embeded specifications
20
![Page 21: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/21.jpg)
The finished product
21
![Page 22: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/22.jpg)
Prototypes help, too
22
![Page 23: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/23.jpg)
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?
23
![Page 24: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/24.jpg)
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.”
24
![Page 25: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/25.jpg)
Who Does What
Typical roles on a project IA Information architect
IxD Interaction designer
VisD Visual designer
BA Business analyst
PO Product owner
PM Project manager
SA Systems architect
DA Data architect
DBA Database analyst
Dev Developer
QA Quality assurance analyst25
![Page 26: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/26.jpg)
Exercise 2: RACI
Decide what role does which task RACI Responsible: Does the task
Accountable: Signs off the work Responsible does
Consulted: Provides input, opinions, advice
Informed: Consumes output & information from the team
Only 1 Accountable per task Work in teams, then we’ll gather to discuss
26
![Page 27: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/27.jpg)
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.
27
![Page 28: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/28.jpg)
Where do they break down?
28
![Page 29: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/29.jpg)
29
Two Sides of the Problem
?? !!
![Page 30: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/30.jpg)
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....
30
![Page 31: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/31.jpg)
Some Examples of Data Disjunct
31
![Page 32: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/32.jpg)
Where do they break? Why
32
Team proximity or regulatory need (or both)
Spe
c ne
ed
![Page 33: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/33.jpg)
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
33
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
![Page 34: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/34.jpg)
34
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.
![Page 35: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/35.jpg)
A bridge to nowhere?
35
![Page 36: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/36.jpg)
36http://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. . . . . .
“
”
![Page 37: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/37.jpg)
Sometimes specs fall into the wrong hands
37
![Page 38: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/38.jpg)
Special order 191
38
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.
![Page 39: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/39.jpg)
39http://www.civilwar.org/battlefields/antietam/maps/antietammap3.html
![Page 40: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/40.jpg)
40
BA’s Doing UX
In the 10+ companies I consulted for in the past 6 years, only one had UX professionals contributing to the project.http://www.modernanalyst.com/Resources/Articles/tabid/115/articleType/ArticleView/articleId/1735/Are-you-ready-to-wear-your-UX-hat-when-duty-calls.aspx
![Page 41: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/41.jpg)
`
41
![Page 42: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/42.jpg)
42
![Page 43: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/43.jpg)
More detail at the right time
Solutions
43
![Page 44: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/44.jpg)
Big, grandiose statement
44
Anything that specifies user
behavior or activities that
affect users belongs to the
user experience team
![Page 45: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/45.jpg)
Big, grandiose statement
45
Anything that specifies user
behavior or activities that
affect users belongs to the
purview of the user
experience team
![Page 46: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/46.jpg)
What Are Some Solutions
Frameworks Style guides and pattern libraries Accurate diagrams and traceable notes A proverbial seat at the table.
46
![Page 47: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/47.jpg)
Frameworks and design principles
NextGen Design Principles & Frameworks: a Case Study
Windows Presentation Framework HTML5 CSS
47
![Page 48: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/48.jpg)
Style guides and pattern libraries
Apple HI Guidelines YUI! Search Patterns from Peter Morville NeXTStep Style Guide
48
![Page 49: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/49.jpg)
Let’s Talk Traceability
49
Along the Natchez Trace
![Page 50: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/50.jpg)
Old School is So Old School
50
![Page 51: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/51.jpg)
Keane Architecture ServicesBest Western International Web Release I (AR0637) E,W, W 51
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.
![Page 52: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/52.jpg)
Keane Architecture ServicesBest Western International Web Release I (AR0637) E,W, W 52
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.
![Page 53: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/53.jpg)
Integrating Detailed Specs with Wireframes or Prototypes
53
![Page 54: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/54.jpg)
Integrating Detailed Specs with Wireframes or Prototypes
54
![Page 55: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/55.jpg)
55
But...but...what about Agile?
![Page 56: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/56.jpg)
Even Agile Projects Need Detail
56
![Page 57: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/57.jpg)
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.”
57
![Page 58: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/58.jpg)
“The Problem with ‘Quick and Dirty’...”
58
“...‘dirty’ is remembered long after ‘quick’ is forgotten.”
![Page 59: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/59.jpg)
Desiree Sy’s Approach
59
![Page 60: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/60.jpg)
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
60
![Page 61: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/61.jpg)
Exercise 3: The Challenge Game
Divide into two teams Challenge team creates potential probs/challenges
Solution team creates features & strengths of the product
Challenge team selects a card from the deck and plays it face up
Solution team tries to find a card that can provide a solution to it. If the Solution team can’t play a reasonable solution card,
the Challenge team gets a point. Otherwise, the point goes to the Solution team.
Work together on each challenge to find that solution.
61
![Page 62: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/62.jpg)
Culture of Your Community
62
![Page 63: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/63.jpg)
What did we learn today?
Summary
63
![Page 64: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/64.jpg)
64
In preparing for battle, I have always found that plans are useless...
...but planning is indispensable.—Dwight Eisenhower
“
”
![Page 65: Nailing It Down: Detailed Design to Preserve the UX Vision](https://reader034.vdocuments.us/reader034/viewer/2022051608/544530cdb1af9f4f6c8b46f0/html5/thumbnails/65.jpg)
So...
65
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.