0
Nailing It Down       Detailed Design to Preserve the UX Vision       STC Summit 2011       Joe Sokohl       @mojoguzzi   ...
Agenda   What “detailed design” is   Where it breaks down   What some solutions are                        @mojoguzzi  ...
A bit about me            http://www.uxaustralia.com.au/conference-2010/design-thinking-is-this-our-ticket-to-the-big-tabl...
Who this talk applies to   Agencies   Independent UXers   Highly regulated areas: healthcare, government,       militar...
Who this talk might not apply to   Heterogenous teams   UXers who also do the front-end       development of their apps ...
@mojoguzzi   #dtlDesign   6Tuesday, May 17, 2011
So what’s the big deal, anyway?  Determining what the problem is                                    7Tuesday, May 17, 2011
Typical documentation approaches   Research artifacts such as competitive reviews,       heuristic analysis, mental model...
Typical documentation approaches   Research artifacts such as competitive reviews,       heuristic analysis, mental model...
What is Detailed Design?  Looking at different processes                                   10Tuesday, May 17, 2011
VIEWW Summary             VISION                        INCEPTION                      ELABORATION                        ...
FiveDs Summary           Discover                         Design                  Define                   Develop        ...
FiveDs Summary           Discover                         Design                  Define                   Develop        ...
User Experiences Go Beyond the User Interface   Expectations frame users’   experiences through brand   perception and pri...
Detailed design      codifies      empathy.                        @mojoguzzi   #dtlDesign   15Tuesday, May 17, 2011
Detailed Design Activities   Detailed sketches   Detailed scenarios with branching   User-centered use cases   Visual ...
What’s the difference between reqs & specs?   Requirements       Requirements cannot be “gathered”       Requirements a...
What’s Your Definition?  • My definition? A detailed design is      • The body of information that conveys             suf...
Where do they break down?                              19Tuesday, May 17, 2011
Where do they break? Why             Spec need                                                   Team proximity or regulat...
Two Sides of the Problem               ??                                 !!                        @mojoguzzi   #dtlDesig...
Requirements masquerading as specifications  Traditional approach  1.1.1.      The system shall allow the teacher to    c...
Requirement: Turn indicators            1.3.2.5a: The system shall            include the ability for the            opera...
Requirement: Turn indicators                        @mojoguzzi   #dtlDesign   24Tuesday, May 17, 2011
Maybe a bit tooooo much....                                                                                               ...
A bridge to nowhere?                        @mojoguzzi   #dtlDesign   26Tuesday, May 17, 2011
“That is not it at all,That is not what I meant,at all. . . . . .                                ”                        ...
Why Data Architecture Is UX Design                        @mojoguzzi   #dtlDesign   28Tuesday, May 17, 2011
Big, grandiose statement                        Anything that specifies user                        behavior or activities...
Big, grandiose statement                        Anything that specifies user                        behavior or activities...
Who Does What      Typical roles on a project                                      PO          Product owner             ...
Sometimes specs fall into the wrong hands                        @mojoguzzi   #dtlDesign   32Tuesday, May 17, 2011
Special order 191          Major Taylor will proceed to Leesburg, Va., and arrange for transportation of the sick and     ...
http://www.civilwar.org/battlefields/antietam/maps/antietammap3.html                        @mojoguzzi   #dtlDesign       ...
Solutions  More detail at the right time                                  35Tuesday, May 17, 2011
What Are Some Solutions   Frameworks   Style guides and pattern libraries   Accurate diagrams and traceable notes   A ...
Frameworks and design principles   NextGen Design Principles & Frameworks: a Case       Study   Windows Presentation Fra...
Style guides and pattern libraries   Apple HI Guidelines   YUI!   Search Patterns from Peter Morville   NeXTStep Style...
Let’s Talk Traceability               Along the Natchez Trace                        @mojoguzzi   #dtlDesign   39Tuesday, ...
Old School is So Old School                        @mojoguzzi   #dtlDesign   40Tuesday, May 17, 2011
Display All Taxes & Fees - Currency                                                                                       ...
Display All Taxes & Fees - Currency                                                                                       ...
Integrating Detailed Specs with Wireframes or Prototypes                        @mojoguzzi   #dtlDesign             43Tues...
Integrating Detailed Specs with Wireframes or Prototypes                        @mojoguzzi   #dtlDesign             44Tues...
But...but...what about Agile?                        @mojoguzzi   #dtlDesign   45Tuesday, May 17, 2011
Case Study: Agile and an FDA-Compliant Company      “One can never get away from needing to provide      objective evidenc...
“The Problem with ‘Quick and Dirty’...”                                                  “...‘dirty’ is remembered long af...
Desiree Sy’s Approach                        @mojoguzzi   #dtlDesign   48Tuesday, May 17, 2011
Find a way to detail your design   You can’t develop a user-centered product from       user stories   You can use perso...
Culture of Your Community                        @mojoguzzi   #dtlDesign   50Tuesday, May 17, 2011
Summary  What did we learn today?                             51Tuesday, May 17, 2011
“ In preparing for battle, I have always        found that plans are useless...                             ...but plannin...
So...     Detailed design is...         The body of information that conveys sufficient               detail to communica...
Many thanks!      Joe Sokohl      Joe@RegularJoeConsulting.com      1.804.873.6964      @mojoguzzi      @RegJoeConsultsTue...
Upcoming SlideShare
Loading in...5
×

Detailed design: Nailing it Down

1,245

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,245
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Detailed design: Nailing it Down"

  1. 1. Nailing It Down Detailed Design to Preserve the UX Vision STC Summit 2011 Joe Sokohl @mojoguzzi #dtlDesign at #STC11 CONFIDENTIALITY The concepts and methodologies contained herein are proprietary to Regular Joe Consulting LLC. Duplication, reproduction or disclosure of information is this document without the express written permission of Regular Joe Consulting is prohibited. Enjoy the work. We hope you find it useful.Tuesday, May 17, 2011
  2. 2. Agenda  What “detailed design” is  Where it breaks down  What some solutions are @mojoguzzi #dtlDesign 2Tuesday, May 17, 2011
  3. 3. A bit about me http://www.uxaustralia.com.au/conference-2010/design-thinking-is-this-our-ticket-to-the-big-table @mojoguzzi #dtlDesign 3Tuesday, May 17, 2011
  4. 4. 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 @mojoguzzi #dtlDesign 4Tuesday, May 17, 2011
  5. 5. Who this talk might not apply to  Heterogenous teams  UXers who also do the front-end development of their apps  Co-located, nimble teams who don’t have a need to retrace steps Then again.... @mojoguzzi #dtlDesign 5Tuesday, May 17, 2011
  6. 6. @mojoguzzi #dtlDesign 6Tuesday, May 17, 2011
  7. 7. So what’s the big deal, anyway? Determining what the problem is 7Tuesday, May 17, 2011
  8. 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... @mojoguzzi #dtlDesign 8Tuesday, May 17, 2011
  9. 9. 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... @mojoguzzi #dtlDesign 9Tuesday, May 17, 2011
  10. 10. What is Detailed Design? Looking at different processes 10Tuesday, May 17, 2011
  11. 11. VIEWW Summary VISION INCEPTION ELABORATION WORK WEB Discover the project goals, Design the information Refine the User Experience Develop the application, Deploy the finished define requirements, and structure and system Design & System Design so integrating front end and application into production, frame the initial scope of architecture of the an application can be built. back end systems. transfer ownership to an application. application. support and maintenance teams. Activities Activities Activities Activities Activities • Gather Input on Business, • Create High-Level User • Usability Testing • Create Deployment Plan • Initial Data Load User and System Experience Design • User POC • Update Detailed Design • Deployment Requirements • Create User Proof-of-Concept Document • Create Detailed User • Create Administrative Guide • Define Business • Conduct Usability Testing Experience Design • Develop Components Requirements • Develop User Education (Component Source) • Create High-Level System • Assess and Select Manual • Define User Requirements Architecture Technologies • Conduct Code Review • Transition to Maintenance • Develop Creative Brief • Create Technical Proof-of- • Deployment Plan Team • Define System Requirements Concept • Detailed Architecture FUNCTIONAL • Develop Initial Deployment TESTING RESULTS • Create Technical POC USER ACCEPTANCE Specification REQUIREMENTS TESTING RESULTS • Coding Standards DOCUMENT • Plan and Implement HIGH-LEVEL Development Environment DESIGN DOCUMENT DETAILED DESIGN DOCUMENT @mojoguzzi #dtlDesign 11Tuesday, May 17, 2011
  12. 12. 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 @mojoguzzi #dtlDesign 12Tuesday, May 17, 2011
  13. 13. 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 @mojoguzzi #dtlDesign 13Tuesday, May 17, 2011
  14. 14. User Experiences Go Beyond the User Interface Expectations frame users’ experiences through brand perception and prior experience Users achieve goals by performing tasks They accomplish tasks by interacting with content, Powerful Interactions features, and functions in the agent portal and other applications, software and tools User interfaces bring the User Rich Internet Application Solutions Single, reliable view of the Single View of the user experience alive, Interfaces Customer user’s entire relationship providing simplified, with the enterprise supports enjoyable online interactions Distributed Content business processes critical to and instant feedback in and Functionality the delivery of a seamless Web Sites Software / Tools Applications experience flexible, intuitive and forgiving workspaces Business Information Identity Processes Delivery Transactional Analytics Management Loosely joined customer- facing and internal business Content Reporting and Notification Syndication processes support quick and Management Monitoring continuous experience improvement Marketing Campaign Authentication and Workflow Others Management Authorization Reliable content Experience and data form the Enablers foundations of a strong user experience product / service meta data analytic data user content & data ••• Beautiful experiences are more than pixel deep @mojoguzzi #dtlDesign 14Tuesday, May 17, 2011
  15. 15. Detailed design codifies empathy. @mojoguzzi #dtlDesign 15Tuesday, May 17, 2011
  16. 16. 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? @mojoguzzi #dtlDesign 16Tuesday, May 17, 2011
  17. 17. 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.” @mojoguzzi #dtlDesign 17Tuesday, May 17, 2011
  18. 18. 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. @mojoguzzi #dtlDesign 18Tuesday, May 17, 2011
  19. 19. Where do they break down? 19Tuesday, May 17, 2011
  20. 20. Where do they break? Why Spec need Team proximity or regulatory need (or both) @mojoguzzi #dtlDesign 20Tuesday, May 17, 2011
  21. 21. Two Sides of the Problem ?? !! @mojoguzzi #dtlDesign 21Tuesday, May 17, 2011
  22. 22. Requirements masquerading as specifications Traditional approach 1.1.1. The system shall allow the teacher to click a control which displays the first answer in the lesson. NOTE: Subsequent answers can be accessed by User story approach As a clinician and/or front desk assistant, I need to record the writer, provider(s), assistant(s), as well as the date and time of entry for every clinical note, so that I can maintain accurate clinical records. @mojoguzzi #dtlDesign 22Tuesday, May 17, 2011
  23. 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. @mojoguzzi #dtlDesign 23Tuesday, May 17, 2011
  24. 24. Requirement: Turn indicators @mojoguzzi #dtlDesign 24Tuesday, May 17, 2011
  25. 25. Maybe a bit tooooo much.... Planning Track Dev Project IPM Officer Manager Manager QA Manager Once, at start of project Org Process Guidance Project Process Instance Tailoring Guidelines Project Plan Vision Statement Master Schedule Personas Risk Management Strategy Plan Project BaselineCM Project Commitments Master Schedule Test Metrics Test Approach Release Manager Define-Update Test Approach Track Complete Test Approach once per project CM Guidelines CM Plan Baseline CM Guidelines Configuration BaselineCM CM Access Control Policy Management CM Baseline Report Every iteration Scenario List Scenario List Create a Scenarios BaselineCM Scenario Architect Business Analyst UATs Every iteration Iteration Start QoS Req List scenarios Create a Quality of BaselineCM QoS Requirements @mojoguzzi Lifestyle Snapshot #dtlDesign Service Requirement 25Tuesday, May 17, 2011 User Subject
  26. 26. A bridge to nowhere? @mojoguzzi #dtlDesign 26Tuesday, May 17, 2011
  27. 27. “That is not it at all,That is not what I meant,at all. . . . . . ” http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2009/3/30/1238371335802/TS-Eliot-003.jpg @mojoguzzi #dtlDesign 27Tuesday, May 17, 2011
  28. 28. Why Data Architecture Is UX Design @mojoguzzi #dtlDesign 28Tuesday, May 17, 2011
  29. 29. Big, grandiose statement Anything that specifies user behavior or activities that affect users belongs to the user experience team @mojoguzzi #dtlDesign 29Tuesday, May 17, 2011
  30. 30. Big, grandiose statement Anything that specifies user behavior or activities that affect users belongs to the purview of the user experience team @mojoguzzi #dtlDesign 30Tuesday, May 17, 2011
  31. 31. Who Does What Typical roles on a project  PO Product owner  PM Project manager  IA Information architect  IxD Interaction designer  VisD Visual designer  TW Technical writer  BA Business analyst  SA Systems architect  DA Data architect  DBA Database analyst  Dev Developer  QA Quality assurance analyst @mojoguzzi #dtlDesign 31Tuesday, May 17, 2011
  32. 32. Sometimes specs fall into the wrong hands @mojoguzzi #dtlDesign 32Tuesday, May 17, 2011
  33. 33. 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. @mojoguzzi #dtlDesign 33Tuesday, May 17, 2011
  34. 34. http://www.civilwar.org/battlefields/antietam/maps/antietammap3.html @mojoguzzi #dtlDesign 34Tuesday, May 17, 2011
  35. 35. Solutions More detail at the right time 35Tuesday, May 17, 2011
  36. 36. What Are Some Solutions  Frameworks  Style guides and pattern libraries  Accurate diagrams and traceable notes  A proverbial seat at the table. @mojoguzzi #dtlDesign 36Tuesday, May 17, 2011
  37. 37. Frameworks and design principles  NextGen Design Principles & Frameworks: a Case Study  Windows Presentation Framework  HTML5  CSS @mojoguzzi #dtlDesign 37Tuesday, May 17, 2011
  38. 38. Style guides and pattern libraries  Apple HI Guidelines  YUI!  Search Patterns from Peter Morville  NeXTStep Style Guide @mojoguzzi #dtlDesign 38Tuesday, May 17, 2011
  39. 39. Let’s Talk Traceability Along the Natchez Trace @mojoguzzi #dtlDesign 39Tuesday, May 17, 2011
  40. 40. Old School is So Old School @mojoguzzi #dtlDesign 40Tuesday, May 17, 2011
  41. 41. Display All Taxes & Fees - Currency References Functionality of this page is based on the current reservation review, reserve, and confirmation pages. It covers reservations made in currency amounts. The GCCI free Use Case: 3.3 night reservation confirmation wireframe appears on the next page. Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4 All modified items should be consistent with existing functionality and visual standards. Site Map: site_map_display_all_fees Base Wireframe: 4.1,4.2,4.3,4.4,4.5 1 Separated Rooms and Fees The room stay is separated by first the total for all rooms reserved, without any taxes or fees. Then the estimated taxes and fees 1 appears, followed by the total stay amount. If taxes and fees are included in the rate, use the term “included”. 2 Breakdown of Taxes and Fees 2 The system breaks out and identifies all taxes, separate from any optional service charges. The CPM system provides the tax and fee information. If taxes and fees are included in the rate, use the 3 term “included in reservation amount”. 3 Optional Service Charges If the property assesses any additional yet optional charges, they appear here. If there are no optional charges, do not display anything. 4 4 Additional Confirmations The Reservation Amount module appears the same on the following pages: • Reservation Confirmation Email • Change Reservation • View Reservation • Cancel Reservation It contains the same information as the Reservation summary, just in a different layout. Best Western International Web Release I (AR0637) E,W, W Keane Architecture Services 41Tuesday, May 17, 2011
  42. 42. Display All Taxes & Fees - Currency References Functionality of this page is based on the current reservation review, reserve, and confirmation pages. It covers reservations made in currency amounts. The GCCI free Use Case: 3.3 night reservation confirmation wireframe appears on the next page. Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4 All modified items should be consistent with existing functionality and visual standards. Site Map: site_map_display_all_fees Base Wireframe: 4.1,4.2,4.3,4.4,4.5 1 Separated Rooms and Fees The room stay is separated by first the total for all rooms reserved, without any taxes or fees. Then the estimated taxes and fees 1 appears, followed by the total stay amount. If taxes and fees are included in the rate, use the term “included”. 2 Breakdown of Taxes and Fees 2 The system breaks out and identifies all taxes, separate from any optional service charges. The CPM system provides the tax and fee information. If taxes and fees are included in the rate, use the 3 term “included in reservation amount”. 3 Optional Service Charges If the property assesses any additional yet optional charges, they appear here. If there are no optional charges, do not display anything. 4 4 Additional Confirmations The Reservation Amount module appears the same on the following pages: • Reservation Confirmation Email • Change Reservation • View Reservation • Cancel Reservation It contains the same information as the Reservation summary, just in a different layout. Best Western International Web Release I (AR0637) E,W, W Keane Architecture Services 42Tuesday, May 17, 2011
  43. 43. Integrating Detailed Specs with Wireframes or Prototypes @mojoguzzi #dtlDesign 43Tuesday, May 17, 2011
  44. 44. Integrating Detailed Specs with Wireframes or Prototypes @mojoguzzi #dtlDesign 44Tuesday, May 17, 2011
  45. 45. But...but...what about Agile? @mojoguzzi #dtlDesign 45Tuesday, May 17, 2011
  46. 46. 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.” @mojoguzzi #dtlDesign 46Tuesday, May 17, 2011
  47. 47. “The Problem with ‘Quick and Dirty’...” “...‘dirty’ is remembered long after ‘quick’ is forgotten.” @mojoguzzi #dtlDesign 47Tuesday, May 17, 2011
  48. 48. Desiree Sy’s Approach @mojoguzzi #dtlDesign 48Tuesday, May 17, 2011
  49. 49. 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 @mojoguzzi #dtlDesign 49Tuesday, May 17, 2011
  50. 50. Culture of Your Community @mojoguzzi #dtlDesign 50Tuesday, May 17, 2011
  51. 51. Summary What did we learn today? 51Tuesday, May 17, 2011
  52. 52. “ In preparing for battle, I have always found that plans are useless... ...but planning is indispensable. ” —Dwight Eisenhower @mojoguzzi #dtlDesign 52Tuesday, May 17, 2011
  53. 53. So... Detailed design is...  The body of information that conveys sufficient detail to communicate that which can be coded.  Just enough detail to enable the developer to understand the UX designer’s intent.  The codification of our empathy with users. @mojoguzzi #dtlDesign 53Tuesday, May 17, 2011
  54. 54. Many thanks! Joe Sokohl Joe@RegularJoeConsulting.com 1.804.873.6964 @mojoguzzi @RegJoeConsultsTuesday, May 17, 2011
  1. A particular slide catching your eye?

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

×