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.

1. Own the Experience
Co-design with your engineers
Eric Benoit
eric@goinvo.com
@ebenoit

2. Wipers
Splash Guards Lug Nuts
Wheels

3. “I average 108
wiper installs
per hour.”
Wiper Install Guy

4. Copy, Paste
Plan > Sketch > Wireframe > Pixels > Code

5. Research Design Develop
User
Researcher
e Software Assembly Line
Info
Architect
UI
Designer
Graphic
Designer
UI
Engineer
Backend
Engineer
Usability
Specialist

6. Your Designs
You

12. v01 Launched!

15. Here is how to deviate.

16. Software
≠
Assembly Line Process

17. Research Design Develop
User
Researcher
Info
Architect
UI
Designer
Graphic
Designer
UI
Engineer
Backend
Engineer
Usability
Specialist
YOU

18. Technology
Design
Business

19. Technology
Design
Business

20. Design
TechnologyBusiness
Goal
Goal

21. Subject Matter
Expert
Product
Manager
Marketing
CFO
Sales
CEO
+++
Business

22. Design
Information
Architect
Creative
Director
Researcher
Graphic
Designer
Usability
SpecialistUI Designer
+++

23. Technology
Network
Operations
UI Engineer
CTO
Systems
Engineer
Backend
EngineerChief
Architect
+++

25. e Consequences

28. “the species that
survives [...] is
the most adaptable
to change.”
Charles Darwin

30. Evolve...

31. ...or perish!

32. Case Study
3M Hospital Coding

33. Injured
Patient Visit

34. Injured Visits Hospital
Patient Visit

35. Injured Visits Hospital Healed
Patient Visit

36. Injured Visits Hospital Healed Reimbursed
Patient Visit

37. Patient Visit
Injured Visits Hospital Healed Reimbursed

38. “Coders” Review

39. 1 to 1,000+ Pages

40. Identify Dx + Px

41. 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

42. 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 =

43. Review & Reimburse

44. Road to Deployment
Design Design
Prototype
4w 12w
Design
Production Code
36w
More Releases
16w
First ReleaseReality sets in

45. Invo
1 Designer (me)
2 UI Engineers
36w
First ReleaseReality sets in

46. 3M
VP of Product
1 Lead Engineer
5 Backend Engineers
1 Product Manager
1 Domain Expert
36w
First ReleaseReality sets in

47. Design
Technology
Business
Team

48. 4 Tenets

49. Code is Law1

50. Death to Redlining

51. 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

52. Time Available for Coding
Amount of Design Documentation to Read
Nirvana
Too LittleToo Much

53. Be Tactical

54. At 10:04 PM lightning
will hit this rod.
Great but what time do
I need to start driving?

55. Sketch Replaces
Documentation

58. Software is Ever Evolving

60. Expired
79 days ago
Expired
64 days ago
Fresh
3 mins ago

61. Your design and
engineers live and
breathe in code.

62. Photoshop
layers ≠ law

63. Code... it is the law!

64. Strive for a single source
of documentation.

65. 2 Get Intimate

66. Reduce Friction
Friction Normal Force
Weight Force

67. Digital is great...

68. ...but face to face can’t
be replaced.

69. “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)

70. Quality Collaboration + High Frequency
0 5 10 20 40
Distance (ft)
Minimal Collaboration

71. Ben
Me Michael
< 10 ft

74. Before
During
After
Join Technical
Discussions

75. Learn the Lingo
API
JSON
MongoDB
POST

76. Understand the
technology driving
your designs

77. 3M
Open
Power Abstract
Send patient codes to 3rd party software
Finalize and send to insurance company

78. One-Step ProcessTwo-Step Process

79. 3M
Send patient codes to 3rd party software
+
Automatically send codes to insurance company

80. Technology Design
Absorb & Share

81. 3 Shape the Codebase

83. Help Define the API’s

84. What needs to happen in my design?

85. 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

86. What data do I need?

87. Retrieve patient
information

88. 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

89. Formalize
the Data

90. Customer
Presentation
Front-End
Back-End
Application Layers

93. "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

94. Nomenclature
Customer
Presentation
Front-End
Back-End
Patient
Patient
Person
Patient

99. Presentation
Front-EndBack-End
You
Customer

100. 4 Use the Same Tools

101. SVN
=
Version Control
=
Requirement

102. Checkout

103. Edit

104. Commit

105. Update

106. Versions App

107. SCSS
=
Steroids for CSS

108. Variables

109. Darken + Lighten

110. Chrome
Developer Tools
Web Services

115. Chrome
Developer Tools
HTML & CSS

119. JIRA
Tickets & Issues - Oh My!

123. 4 Tenets
1 Code is Law
2 Get Intimate
3 Shape the Codebase
4 Use the Same Tools

124. What were the results?

125. 4 Pieces of Software
Some
Documents
More
Documents
Encoder Power
Abstract
100%
Usage

126. 3 Pieces of Software
All
Documents
Encoder Power
Abstract
100%
Usage
3M

127. From
150 to 225
completed patients a day
per employee
(without NLP)

128. wtf, I’ve got no patients?!

129. Validate our designs
in the real world.

130. Dramatically improved
the products chance for
success.

131. Flirt, Date, Commit

132. Move this div 3 pixels to the left.
Change the button color to #DDD.
Increase H1 font-size to 32px.

133. 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

134. YOU
Integrate feedback
in real-time
YOU
Deploy

135. Document List
Past Present

136. 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

137. “I can’t code, I can’t contribute.”
=
Designer misperceptions of
participating in development

138. Eric Benoit
eric@goinvo.com
@ebenoit
Slides bit.ly/godesign
Credits:
Reshma Mehta
Ben Salinas
Juhan Sonin