own the experience; co-design with your engineers
DESCRIPTION
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.TRANSCRIPT
Wipers
Splash Guards Lug Nuts
Wheels
“I average 108 wiper installs per hour.”Wiper Install Guy
Copy, Paste
Plan > Sketch > Wireframe > Pixels > Code
Research Design Develop
User Researcher
e Software Assembly Line
Info Architect
UI Designer
Graphic Designer
UI Engineer
Backend Engineer
Usability Specialist
Your Designs
You
v01 Launched!
Here is how to deviate.
Software≠
Assembly Line Process
Research Design Develop
User Researcher
Info Architect
UI Designer
Graphic Designer
UI Engineer
Backend Engineer
Usability Specialist
YOU
Technology
Design
Business
Technology
Design
Business
Design
TechnologyBusiness
Goal
Goal
Subject Matter Expert
Product Manager
Marketing
CFO
SalesCEO
+++
Business
Design
Information Architect
Creative Director
Researcher
Graphic Designer
Usability SpecialistUI Designer
+++
Technology
Network Operations
UI Engineer
CTO
Systems Engineer
Backend EngineerChief
Architect
+++
e Consequences
“the species that survives [...] is the most adaptable to change.”Charles Darwin
Evolve...
...or perish!
Case Study3M Hospital Coding
Injured
Patient Visit
Injured Visits Hospital
Patient Visit
Injured Visits Hospital Healed
Patient Visit
Injured Visits Hospital Healed Reimbursed
Patient Visit
Patient Visit
Injured Visits Hospital Healed Reimbursed
“Coders” Review
1 to 1,000+ Pages
Identify Dx + Px
273.90Disorder of bone and cartilage, unspecified 603.10
Infected hydrocele
45.40Excision of lesion or tissue of large intestine
Identify Dx + Px
Marty McFly
273.90Disorder of bone and cartilage, unspecified
45.40Excision of lesion or tissue of large intestine
603.10Infected hydrocele
Submit to Insurer
$692.00 =
$1,215.00 =
$585.00 =
Review & Reimburse
Road to Deployment
Design DesignPrototype
4w 12w
Design Production Code
36w
More Releases
16w
First ReleaseReality sets in
Invo1 Designer (me)2 UI Engineers
36w
First ReleaseReality sets in
3MVP of Product
1 Lead Engineer5 Backend Engineers1 Product Manager1 Domain Expert
36w
First ReleaseReality sets in
Design
Technology
Business
Team
4 Tenets
Code is Law1
Death to Redlining
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
Time Available for Coding
Amount of Design Documentation to Read
Nirvana
Too LittleToo Much
Be Tactical
At 10:04 PM lightning will hit this rod.
Great but what time do I need to start driving?
Sketch Replaces Documentation
Software is Ever Evolving
Expired79 days ago
Expired64 days ago
Fresh3 mins ago
Your design and engineers live and breathe in code.
Photoshop layers ≠ law
Code... it is the law!
Strive for a single source of documentation.
2 Get Intimate
Reduce FrictionFriction Normal Force
Weight Force
Digital is great...
...but face to face can’t be replaced.
“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)
Quality Collaboration + High Frequency
0 5 10 20 40Distance (ft)
Minimal Collaboration
BenMe Michael
< 10 ft
Before
During
After
Join Technical Discussions
Learn the Lingo
API
JSON
MongoDB
POST
Understand the technology driving
your designs
3M
OpenPower Abstract
Send patient codes to 3rd party software
Finalize and send to insurance company
One-Step ProcessTwo-Step Process
3M
Send patient codes to 3rd party software
+
Automatically send codes to insurance company
Technology Design
Absorb & Share
3 Shape the Codebase
Help Define the API’s
What needs to happen in my design?
Send patient codes to Power Abstract application
Retrieve next patient encounter
Save codes to patient encounter
Retrieve hold optionsRetrieve code catalog
Retrieve patient information
Retrieve patient documents
What data do I need?
Retrieve patient information
Patient UIDFirst nameLast nameDate of BirthGender
Encounter NumberAdmit DateDischarge DateLength of Stay
Patient TypeFacilityFinancial ClassLocation
Retrieve Patient Information
Formalize the Data
Customer
Presentation
Front-End
Back-End
Application Layers
"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
Nomenclature
Customer
Presentation
Front-End
Back-End
Patient
Patient
Person
Patient
Presentation
Front-EndBack-End
You
Customer
4 Use the Same Tools
SVN=
Version Control=
Requirement
Checkout
Edit
Commit
Update
Versions App
SCSS=
Steroids for CSS
Variables
Darken + Lighten
ChromeDeveloper Tools
Web Services
ChromeDeveloper Tools
HTML & CSS
JIRATickets & Issues - Oh My!
4 Tenets
1 Code is Law2 Get Intimate3 Shape the Codebase4 Use the Same Tools
What were the results?
4 Pieces of Software
SomeDocuments
MoreDocuments
Encoder PowerAbstract
100%Usage
3 Pieces of Software
AllDocuments
Encoder PowerAbstract
100%Usage
3M
From150 to 225completed patients a day per employee(without NLP)
wtf, I’ve got no patients?!
Validate our designs in the real world.
Dramatically improved the products chance for
success.
Flirt, Date, Commit
Move this div 3 pixels to the left.Change the button color to #DDD.Increase H1 font-size to 32px.
Document feedbackSend email/ticket to engineerEngineer reads and (hopefully) understands your feedbackEngineer fits your feedback into their scheduleEngineer integrates your feedbackYOU review it (possibly restart, do not pass go!)Engineer deploys
YOU Integrate feedback in real-time
YOUDeploy
Document List
Past Present
300 seconds to contribute a CSS cleanup ...commit code1800 seconds and clean up js ...commit code3600 seconds and clean up one, small aspect of visual design ...commit graphics and code
“I can’t code, I can’t contribute.”=
Designer misperceptions of participating in development
