Own the experience; Co-design with your engineers

346 views

Published on

UXPA 2013 Annual Conference, Friday, July 12, 2013; 3:00-4:00pm ET by Eric Benoit

Learn simple but effective tips for taking your designs into production grade software. The engineering process will be the most critical part of your designs and saying "they didn't build it the way I designed it" should no longer be an excuse. By collaborating during the engineering phase you'll realize and execute fantastic design by experiencing your designs, overcoming the gotchas, and hearing real-world feedback to hone the best possible experience.

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
346
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Own the experience; Co-design with your engineers

  1. 1. Own the Experience Co-design with your engineers Eric Benoit eric@goinvo.com @ebenoit
  2. 2. Wipers Splash Guards Lug Nuts Wheels
  3. 3. “I average 108 wiper installs per hour.” Wiper Install Guy
  4. 4. Copy, Paste Plan > Sketch > Wireframe > Pixels > Code
  5. 5. Research Design Develop User Researcher e Software Assembly Line Info Architect UI Designer Graphic Designer UI Engineer Backend Engineer Usability Specialist
  6. 6. Your Designs You
  7. 7. v01 Launched!
  8. 8. Here is how to deviate.
  9. 9. Software ≠ Assembly Line Process
  10. 10. Research Design Develop User Researcher Info Architect UI Designer Graphic Designer UI Engineer Backend Engineer Usability Specialist YOU
  11. 11. Technology Design Business
  12. 12. Technology Design Business
  13. 13. Design TechnologyBusiness Goal Goal
  14. 14. Subject Matter Expert Product Manager Marketing CFO Sales CEO +++ Business
  15. 15. Design Information Architect Creative Director Researcher Graphic Designer Usability SpecialistUI Designer +++
  16. 16. Technology Network Operations UI Engineer CTO Systems Engineer Backend EngineerChief Architect +++
  17. 17. e Consequences
  18. 18. “the species that survives [...] is the most adaptable to change.” Charles Darwin
  19. 19. Evolve...
  20. 20. ...or perish!
  21. 21. Case Study 3M Hospital Coding
  22. 22. Injured Patient Visit
  23. 23. Injured Visits Hospital Patient Visit
  24. 24. Injured Visits Hospital Healed Patient Visit
  25. 25. Injured Visits Hospital Healed Reimbursed Patient Visit
  26. 26. Patient Visit Injured Visits Hospital Healed Reimbursed
  27. 27. “Coders” Review
  28. 28. 1 to 1,000+ Pages
  29. 29. Identify Dx + Px
  30. 30. 273.90 Disorder of bone and cartilage, unspecified 603.10 Infected hydrocele 45.40 Excision of lesion or tissue of large intestine Identify Dx + Px
  31. 31. Marty McFly 273.90 Disorder of bone and cartilage, unspecified 45.40 Excision of lesion or tissue of large intestine 603.10 Infected hydrocele Submit to Insurer $692.00 = $1,215.00 = $585.00 =
  32. 32. Review & Reimburse
  33. 33. Road to Deployment Design Design Prototype 4w 12w Design Production Code 36w More Releases 16w First ReleaseReality sets in
  34. 34. Invo 1 Designer (me) 2 UI Engineers 36w First ReleaseReality sets in
  35. 35. 3M VP of Product 1 Lead Engineer 5 Backend Engineers 1 Product Manager 1 Domain Expert 36w First ReleaseReality sets in
  36. 36. Design Technology Business Team
  37. 37. 4 Tenets
  38. 38. Code is Law1
  39. 39. Death to Redlining
  40. 40. body { color: #444; font-family: Arial; font-size: 14px; font-weight: bold; padding: 20px; } h1 { font-size: 21px; padding-bottom: 13px; } .help { color: #74B2D6; font-size: 11px; } CSS PDF
  41. 41. Time Available for Coding Amount of Design Documentation to Read Nirvana Too LittleToo Much
  42. 42. Be Tactical
  43. 43. At 10:04 PM lightning will hit this rod. Great but what time do I need to start driving?
  44. 44. Sketch Replaces Documentation
  45. 45. Software is Ever Evolving
  46. 46. Expired 79 days ago Expired 64 days ago Fresh 3 mins ago
  47. 47. Your design and engineers live and breathe in code.
  48. 48. Photoshop layers ≠ law
  49. 49. Code... it is the law!
  50. 50. Strive for a single source of documentation.
  51. 51. 2 Get Intimate
  52. 52. Reduce Friction Friction Normal Force Weight Force
  53. 53. Digital is great...
  54. 54. ...but face to face can’t be replaced.
  55. 55. “When employees work at locations more than approximately 30 meters apart, they have much reduced daily contact and less frequent informal communication.” (e.g., Allen, 1977; Kraut & Streeter, 1995)
  56. 56. Quality Collaboration + High Frequency 0 5 10 20 40 Distance (ft) Minimal Collaboration
  57. 57. Ben Me Michael < 10 ft
  58. 58. Before During After Join Technical Discussions
  59. 59. Learn the Lingo API JSON MongoDB POST
  60. 60. Understand the technology driving your designs
  61. 61. 3M Open Power Abstract Send patient codes to 3rd party software Finalize and send to insurance company
  62. 62. One-Step ProcessTwo-Step Process
  63. 63. 3M Send patient codes to 3rd party software + Automatically send codes to insurance company
  64. 64. Technology Design Absorb & Share
  65. 65. 3 Shape the Codebase
  66. 66. Help Define the API’s
  67. 67. What needs to happen in my design?
  68. 68. Send patient codes to Power Abstract application Retrieve next patient encounter Save codes to patient encounter Retrieve hold options Retrieve code catalog Retrieve patient information Retrieve patient documents
  69. 69. What data do I need?
  70. 70. Retrieve patient information
  71. 71. Patient UID First name Last name Date of Birth Gender Encounter Number Admit Date Discharge Date Length of Stay Patient Type Facility Financial Class Location Retrieve Patient Information
  72. 72. Formalize the Data
  73. 73. Customer Presentation Front-End Back-End Application Layers
  74. 74. "A great carpenter isn’t going to use lousy wood for the back of a cabinet, even though nobody’s going to see it. [...] you’re going to use a beautiful piece of wood on the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through." Steve Jobs
  75. 75. Nomenclature Customer Presentation Front-End Back-End Patient Patient Person Patient
  76. 76. Presentation Front-EndBack-End You Customer
  77. 77. 4 Use the Same Tools
  78. 78. SVN = Version Control = Requirement
  79. 79. Checkout
  80. 80. Edit
  81. 81. Commit
  82. 82. Update
  83. 83. Versions App
  84. 84. SCSS = Steroids for CSS
  85. 85. Variables
  86. 86. Darken + Lighten
  87. 87. Chrome Developer Tools Web Services
  88. 88. Chrome Developer Tools HTML & CSS
  89. 89. JIRA Tickets & Issues - Oh My!
  90. 90. 4 Tenets 1 Code is Law 2 Get Intimate 3 Shape the Codebase 4 Use the Same Tools
  91. 91. What were the results?
  92. 92. 4 Pieces of Software Some Documents More Documents Encoder Power Abstract 100% Usage
  93. 93. 3 Pieces of Software All Documents Encoder Power Abstract 100% Usage 3M
  94. 94. From 150 to 225 completed patients a day per employee (without NLP)
  95. 95. wtf, I’ve got no patients?!
  96. 96. Validate our designs in the real world.
  97. 97. Dramatically improved the products chance for success.
  98. 98. Flirt, Date, Commit
  99. 99. Move this div 3 pixels to the left. Change the button color to #DDD. Increase H1 font-size to 32px.
  100. 100. Document feedback Send email/ticket to engineer Engineer reads and (hopefully) understands your feedback Engineer fits your feedback into their schedule Engineer integrates your feedback YOU review it (possibly restart, do not pass go!) Engineer deploys
  101. 101. YOU Integrate feedback in real-time YOU Deploy
  102. 102. Document List Past Present
  103. 103. 300 seconds to contribute a CSS cleanup ...commit code 1800 seconds and clean up js ...commit code 3600 seconds and clean up one, small aspect of visual design ...commit graphics and code
  104. 104. “I can’t code, I can’t contribute.” = Designer misperceptions of participating in development
  105. 105. Eric Benoit eric@goinvo.com @ebenoit Slides bit.ly/godesign Credits: Reshma Mehta Ben Salinas Juhan Sonin

×