Nailing It DownDetailed Design to Preserve the UX VisionInformation Architecture Summit ’11Joe Sokohl@mojoguzzi@RegJoeCons...
Agenda What is “detailed design,” anyway? What’s the problem What are some solutions                                   ...
Agenda What is “detailed design,” anyway? What’s the problem What are some solutions                                   ...
Schedule      Intros      What is detailed design? Who does it?      Where does it break down? Why?      Break      What a...
A bit about me                 4
A bit about me    http://www.uxaustralia.com.au/conference-2010/design-thinking-is-this-our-ticket-to-the-big-table       ...
A bit about me                 4
What about you? What’s your story?                                     5
What about you? What’s your story?                                     5
Who this workshop applies to Agencies Independent UXers Highly regulated areas: healthcare, government,  military Anyo...
Who this workshop might not apply to Heterogenous teams UXers who also do the front-end  development of their apps Co-l...
Who this workshop might not apply to Heterogenous teams UXers who also do the front-end  development of their apps Co-l...
8
So what’s the big deal, anyway?Determining what the problem is                                  9
Typical documentation approaches Research artifacts such as competitive reviews,  heuristic analysis, mental models/affin...
Typical documentation approaches Research artifacts such as competitive reviews,  heuristic analysis, mental models/affin...
Exercise 1: Create your own details Look at the wireframe. You need to let the development team know how to  realize thi...
What is Detailed Design?Looking at different processes                                 12
VIEWW Summary         VISION                      INCEPTION                      ELABORATION                          WORK...
FiveDs Summary     Discover                  Design                   Define                   Develop                 Del...
FiveDs Summary     Discover                  Design                   Define                   Develop                 Del...
User Experiences Go Beyond the User InterfaceExpectations frame users’experiences through brandperception and priorexperie...
Detailed designcodifiesempathy.                  17
Sketches provide documentation                                 18
Sketches provide documentationThe genius in our styling department is that they not only have agreat feel for design, but ...
Detailed sketches                    19
Embeded specifications                         20
The finished product                       21
Prototypes help, too                       22
Detailed Design Activities Detailed sketches Detailed scenarios with branching User-centered use cases Visual design s...
What’s the difference between reqs & specs? Requirements  Requirements cannot be “gathered”  Requirements are not featu...
Who Does What Typical roles on a project  IA     Information architect  IxD    Interaction designer  VisD   Visual des...
Exercise 2: RACI Decide what role does which task RACI   Responsible: Does the task   Accountable: Signs off the work ...
What’s Your Definition?• My definition? A detailed design is  • The body of information that conveys     sufficient detail...
Where do they break down?                            28
Two Sides of the Problem                           29
Two Sides of the Problem     ??                           29
Two Sides of the Problem     ??                    !!                                29
Maybe a bit tooooo much....                                                                                               ...
Every iterationMaybe a bit tooooo much.... a                       Create                                                 ...
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Some Examples of Data Disjunct                                 31
Where do they break? Why                           32
Where do they break? Why    Spec need                           Team proximity or regulatory need (or both)               ...
Where do they break? Why    Spec need                           Team proximity or regulatory need (or both)               ...
Requirements masquerading as specificationsTraditional approach1.1.1.     The system shall allow the teacher to click a c...
Requirement: Turn indicators    1.3.2.5a: The system shall    include the ability for the    operator to indicate a change...
Requirement: Turn indicators                               34
A bridge to nowhere?                       35
“ is not it at all,ThatThat is not what I meant,at all. . . . . .          ”              http://static.guim.co.uk/sys-ima...
Sometimes specs fall into the wrong hands                                            37
Special order 191                    38
Special order 191   Major Taylor will proceed to Leesburg, Va., and arrange for transportation of the sick and   those una...
http://www.civilwar.org/battlefields/antietam/maps/antietammap3.html                                                      ...
BA’s Doing UX  In the 10+ companies I  consulted for in the past 6  years, only one had UX  professionals contributing to ...
Upcoming SlideShare
Loading in...5
×

Nailing It Down: Detailed Design to Preserve the UX Vision

2,746

Published on

Slides for my IA Summit '11 workshop. Detailed design codifies empathy.

Published in: Technology, Design
1 Comment
7 Likes
Statistics
Notes
  • Excellent beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog web site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear concept... All the best.Regards,classifieds
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,746
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
62
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • 00:00-00:15Intros\n 00:15-01:00What is detailed design? Who does it?\n 01:00-01:30Where does it break down? Why?\n 01:30-01:45Break\n 01:45-02:35What are some solutions? How do we work within our projects?\n 02:35-02:45Break\n 02:45-03:15How does Agile fit in?\n 03:15-03:30Open discussion, Q&A\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Typical UX documentation approaches we use:\nResearch artifacts such as competitive reviews, heuristic analysis, mental models/affinity diagrams, and personas\nUser requirements matrixes\nAnnotated wireframes\nConcept models\n\n
  • Typical UX documentation approaches we use:\nResearch artifacts such as competitive reviews, heuristic analysis, mental models/affinity diagrams, and personas\nUser requirements matrixes\nAnnotated wireframes\nConcept models\n\n
  • Typical UX documentation approaches we use:\nResearch artifacts such as competitive reviews, heuristic analysis, mental models/affinity diagrams, and personas\nUser requirements matrixes\nAnnotated wireframes\nConcept models\n\n
  • Typical UX documentation approaches we use:\nResearch artifacts such as competitive reviews, heuristic analysis, mental models/affinity diagrams, and personas\nUser requirements matrixes\nAnnotated wireframes\nConcept models\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Unfortunately, documentation fails usually at the point that documentation goes to developers. Rarely can developers code from wireframes, even detailed annotations...because they’re not specific enough.\n\n
  • Unfortunately, documentation fails usually at the point that documentation goes to developers. Rarely can developers code from wireframes, even detailed annotations...because they’re not specific enough.\n\n
  • Unfortunately, documentation fails usually at the point that documentation goes to developers. Rarely can developers code from wireframes, even detailed annotations...because they’re not specific enough.\n\n
  • Unfortunately, documentation fails usually at the point that documentation goes to developers. Rarely can developers code from wireframes, even detailed annotations...because they’re not specific enough.\n\n
  • Unfortunately, documentation fails usually at the point that documentation goes to developers. Rarely can developers code from wireframes, even detailed annotations...because they’re not specific enough.\n\n
  • Unfortunately, documentation fails usually at the point that documentation goes to developers. Rarely can developers code from wireframes, even detailed annotations...because they’re not specific enough.\n\n
  • Unfortunately, documentation fails usually at the point that documentation goes to developers. Rarely can developers code from wireframes, even detailed annotations...because they’re not specific enough.\n\n
  • Unfortunately, documentation fails usually at the point that documentation goes to developers. Rarely can developers code from wireframes, even detailed annotations...because they’re not specific enough.\n\n
  • What’s wrong with this “specification”?\nIt’s written by a BA. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Cindy\n
  • Cindy\n
  • This is the best of both worlds.\nYou rapidly and iteratively create interactions, but you specify the behavior as you go.\nThis approach keeps spec close to the IxD. What’s important is that you define the behaviors as you define the layout, the visual design, and the IA.\n
  • Thsi is the best of both worlds.\nYou rapidly and iteratively create interactions, but you specify the behavior as you go.\nThis approach keeps spec close to the IxD. What’s important is that you define the behaviors as you define the layout, the visual design, and the IA.\n
  • \n
  • \n
  • \n
  • \n
  • The Porsche 914 was a mashup of Porsche and VW teams. Arguably one of the worst cars ever to make it to market.\n
  • one approach: have the UX team designing a sprint/cycle ahead of the implementation team. Yet this approach needs to have a strong sense of design documentation, doesn’t it? Not only is the team working on the current sprint, it’s also designing for the next one.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Nailing It Down: Detailed Design to Preserve the UX Vision

    1. 1. Nailing It DownDetailed Design to Preserve the UX VisionInformation Architecture Summit ’11Joe Sokohl@mojoguzzi@RegJoeConsults 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.
    2. 2. Agenda What is “detailed design,” anyway? What’s the problem What are some solutions 2
    3. 3. Agenda What is “detailed design,” anyway? What’s the problem What are some solutions 2
    4. 4. 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
    5. 5. A bit about me 4
    6. 6. A bit about me http://www.uxaustralia.com.au/conference-2010/design-thinking-is-this-our-ticket-to-the-big-table 4
    7. 7. A bit about me 4
    8. 8. What about you? What’s your story? 5
    9. 9. What about you? What’s your story? 5
    10. 10. 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
    11. 11. 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
    12. 12. 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 Then again.... 7
    13. 13. 8
    14. 14. So what’s the big deal, anyway?Determining what the problem is 9
    15. 15. 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
    16. 16. 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
    17. 17. 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
    18. 18. What is Detailed Design?Looking at different processes 12
    19. 19. VIEWW Summary VISION INCEPTION ELABORATION WORK WEBDiscover the project goals, Design the information Refine the User Experience Develop the application, Deploy the finisheddefine 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 toan 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 13
    20. 20. 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 14
    21. 21. 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 15
    22. 22. User Experiences Go Beyond the User InterfaceExpectations frame users’experiences through brandperception and priorexperience Users achieve goals by performing tasksThey accomplish tasks byinteracting with content, Powerful Interactionsfeatures, and functions in theagent portal and otherapplications, software andtoolsUser interfaces bring the User Rich Internet Application Solutions Single, reliable view of the Single View of theuser experience alive, Interfaces Customer user’s entire relationshipproviding simplified, with the enterprise supportsenjoyable online interactions Distributed Content business processes critical toand instant feedback in and Functionality the delivery of a seamless Web Sites Software / Tools Applications experienceflexible, intuitive andforgiving workspaces Business Information Identity Processes Delivery Transactional Analytics ManagementLoosely joined customer-facing and internal business Content Reporting and Notification Syndicationprocesses support quick and Management Monitoringcontinuous experienceimprovement Marketing Campaign Authentication and Workflow Others Management AuthorizationReliable content Experienceand data form the Enablersfoundations of a stronguser experience product / service meta data analytic data user content & data ••• Beautiful experiences are more than pixel deep 16
    23. 23. Detailed designcodifiesempathy. 17
    24. 24. Sketches provide documentation 18
    25. 25. Sketches provide documentationThe genius in our styling department is that they not only have agreat feel for design, but also for the fact that the design needs tofunction properly on a motorcycle. That melding of functionality andstyling is what makes our motorcycles very, very special. 18
    26. 26. Detailed sketches 19
    27. 27. Embeded specifications 20
    28. 28. The finished product 21
    29. 29. Prototypes help, too 22
    30. 30. 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
    31. 31. 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
    32. 32. 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 analyst 25
    33. 33. 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
    34. 34. 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
    35. 35. Where do they break down? 28
    36. 36. Two Sides of the Problem 29
    37. 37. Two Sides of the Problem ?? 29
    38. 38. Two Sides of the Problem ?? !! 29
    39. 39. 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 Lifestyle Snapshot Service Requirement 30
    40. 40. Every iterationMaybe a bit tooooo much.... a Create Scenario List Scenarios Scenario List BaselineCM Scenario Architect Business Analyst UATs Every iteration Iteration Start QoS Req List scenarios Create a Quality of BaselineCM QoS Requirements Lifestyle Snapshot Service Requirement User Subject Experience Matter Architect Expert QoS Requirements Every iteration Functional Requirements Create UI Flow Model Product BaselineCM Operational Requirements Once at the start of a project Requirements Domain Model and on-going at start of each iteration Reference Solution Service Specifications Application Diagram System Diagram Create Solution Deployment Diagram Existing Architecture Logical Data Center Diagram Architecture BaselineCM Selection Justification Lead Developer Threat Model Application Architect Performance Model Infrastr… Architect Build Engineer Once per iteration Integration Sequence Rationale for Integration Sequence Vision Statement Support Docs for Integration Environment Establish Product Integration Criteria BaselineCM EnvironmentsOrg Coding Guidelines Static Analysis GuidelinesPeer Review Feedback Static Analysis Rules Coding Guidelines 30
    41. 41. Some Examples of Data Disjunct 31
    42. 42. Some Examples of Data Disjunct 31
    43. 43. Some Examples of Data Disjunct 31
    44. 44. Some Examples of Data Disjunct 31
    45. 45. Some Examples of Data Disjunct 31
    46. 46. Some Examples of Data Disjunct 31
    47. 47. Some Examples of Data Disjunct 31
    48. 48. Some Examples of Data Disjunct 31
    49. 49. Some Examples of Data Disjunct 31
    50. 50. Some Examples of Data Disjunct 31
    51. 51. Some Examples of Data Disjunct 31
    52. 52. Some Examples of Data Disjunct 31
    53. 53. Some Examples of Data Disjunct 31
    54. 54. Where do they break? Why 32
    55. 55. Where do they break? Why Spec need Team proximity or regulatory need (or both) 32
    56. 56. Where do they break? Why Spec need Team proximity or regulatory need (or both) 32
    57. 57. Requirements masquerading as specificationsTraditional 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 byUser 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. 33
    58. 58. Requirement: Turn indicators 1.3.2.5a: The system shall include the ability for the operator to indicate a changed direction of travel 34
    59. 59. Requirement: Turn indicators 34
    60. 60. A bridge to nowhere? 35
    61. 61. “ is not it at all,ThatThat 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 36
    62. 62. Sometimes specs fall into the wrong hands 37
    63. 63. Special order 191 38
    64. 64. 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 Jacksons 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 Harpers Ferry. IV. General Longstreets 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 Harpers Ferry, and by Friday morning possess himself of the Maryland Heights and endeavor to capture the enemy at Harpers Ferry and vicinity. 38
    65. 65. http://www.civilwar.org/battlefields/antietam/maps/antietammap3.html 39
    66. 66. 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 40
    67. 67. ` 41
    68. 68. 42
    69. 69. SolutionsMore detail at the right time 43
    70. 70. Big, grandiose statement Anything that specifies user behavior or activities that affect users belongs to the user experience team 44
    71. 71. Big, grandiose statement Anything that specifies user behavior or activities that affect users belongs to the purview of the user experience team 45
    72. 72. What Are Some Solutions Frameworks Style guides and pattern libraries Accurate diagrams and traceable notes A proverbial seat at the table. 46
    73. 73. What Are Some Solutions Frameworks Style guides and pattern libraries Accurate diagrams and traceable notes A proverbial seat at the table. 46
    74. 74. Frameworks and design principles NextGen Design Principles & Frameworks: a Case Study Windows Presentation Framework HTML5 CSS 47
    75. 75. Style guides and pattern libraries Apple HI Guidelines YUI! Search Patterns from Peter Morville NeXTStep Style Guide 48
    76. 76. Let’s Talk Traceability 49
    77. 77. Let’s Talk Traceability Along the Natchez Trace 49
    78. 78. Old School is So Old School 50
    79. 79. Old School is So Old School 50
    80. 80. Display All Taxes & Fees - Currency ReferencesFunctionality of this page is based on the current reservation review, reserve, andconfirmation pages. It covers reservations made in currency amounts. The GCCI free Use Case: 3.3night reservation confirmation wireframe appears on the next page. Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4All 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 51
    81. 81. Display All Taxes & Fees - Currency ReferencesFunctionality of this page is based on the current reservation review, reserve, andconfirmation pages. It covers reservations made in currency amounts. The GCCI free Use Case: 3.3night reservation confirmation wireframe appears on the next page. Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4All 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 52
    82. 82. ReferencesFunctionality of this page is based on the current reservation review, reserve, andconfirmation pages. It covers reservations made in currency amounts. The GCCI free Use Case: 3.3night reservation confirmation wireframe appears on the next page. Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4All 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 52
    83. 83. Integrating Detailed Specs with Wireframes or Prototypes 53
    84. 84. Integrating Detailed Specs with Wireframes or Prototypes 54
    85. 85. But...but...what about Agile? 55
    86. 86. Even Agile Projects Need Detail 56
    87. 87. Even Agile Projects Need Detail 56
    88. 88. 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
    89. 89. “The Problem with ‘Quick and Dirty’...” 58
    90. 90. “The Problem with ‘Quick and Dirty’...” “...‘dirty’ is remembered long after ‘quick’ is forgotten.” 58
    91. 91. Desiree Sy’s Approach 59
    92. 92. 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
    93. 93. 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
    94. 94. Culture of Your Community 62
    95. 95. SummaryWhat did we learn today? 63
    96. 96. “ In preparing for battle, I have always found that plans are useless... 64
    97. 97. “ In preparing for battle, I have always found that plans are useless... ...but planning is indispensable. ” —Dwight Eisenhower 64
    98. 98. So... 65
    99. 99. 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. 65
    100. 100. Many thanks!Joe SokohlJoe@RegularJoeConsulting.com1.804.873.6964@mojoguzzi@RegJoeConsults
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×