own the experience; co-design with your engineers

Own the ExperienceCo-design with your engineers

Eric Benoiteric@goinvo.com@ebenoit

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

Eric Benoiteric@goinvo.com

@ebenoitSlides bit.ly/godesign

Credits:Reshma Mehta

Ben SalinasJuhan Sonin