sum of the parts speaker series - experience engineering and ux

How can we get better designs?

How do we improve product development?Experience Engineering and UX

Vince BohnerSr. UX Manager, Autodesk

How can we get better designs?

How do we improve product development?

How can we get better designs?

How do we improve product development?

We had this nagging problem…

The spec The result

How can we get better designs?

How do we improve product development?

…and this one too…

Can we get a prototype?

Sorry.24 points left this

week.

What is the right question?

How can we get better designs?

How do we improve product development?

How do we get better design?

How do we improve product development?

IxD, UR, VxD, Experience Engineering, LxD

What are other companies doing?

Leah Buley: The Modern UX Organization (Forrester Research)https://vimeo.com/121037431

Dan McKinley, Etsy - Lean Startup Conference 2014

“It’s very difficult in the web to separate design and implementation”

– David Marcotte, Designer and Author

“It’s not just an awareness of what the code can and can’t do, because I believe the only way to figure out what code can and can’t do is to write some, so, kinda yeah, you gotta be able to write it”

– Jeff Veen, VP Product Adobe, Co-Founder Adaptive Path

”But front-end code (just HMTL and CSS; let’s forget Javascript for now) is intrinsically linked to the design process. It’s a design tool just as much as Photoshop.”

– Elliot Jay Stocks, Creative Director Adobe

Better Design

How do we get better design?

Excellent Experience Requires Iterative Design

Prototypes allow for high-confidence design and user validationIterating in the technology we’re using let’s us know what’s possible

Prototyping

Functional SpecsDesign ConceptualizationConcept/User Validation

Functional Specs

Design Conceptualization

Design Conceptualization

Concept/User Validation

Hypothesis: Sticky tools “off” frustrates users when attempting to draw.

”It took me a long time to work out how the different tools worked, I don’t think I would have persevered with them and probably used a different package.”

Time to complete drawing: 14:29

Sticky tools “off”

Sticky tools “on” “I am likely to continue using this, in fact I already have it bookmarked and am ready to share with the company. I love how it works, love the unlimited workspace and how easy it is and the main part is you don’t have to download anything.” Time to complete drawing: 8:53

Concept/User Validation (with Usertesting.com)

Improve Product Development

How do we improve product development?

Speed up development process – more control over where the code expresses itself as the experienceBuild empathy with developers

USER EXPERIENCE ENGINEERING

Concepts (incl. through code), wireframes, visual design

Optimize for concepts, design interactions, overall UX

Back end services connected to stable front end code.Optimize for security, performance, scalability

Front End /Back End Engineers

Rapid prototypes, front end code

Optimize for interaction behaviors, look and feel, innovation

Experience EngineersUX Designers (Visual and IxD)

Experience Engineers in UX

Optimize for UX goals vs Engineering goals UX is responsible for creating experiences that engage and

differentiate in the market. Engineering is responsible ultimately for delivering scalable,

secure, efficient code in a working product. Offer new ways of solving problems that are more viable and

robust rather than simply saying, “that can’t be done.”

Web User Experience = Design + Implementation

The spec The result

We had this nagging problem…

.dropdown .dropdown-menu {  position: absolute;  top: 90%;  left: -18px;  z-index: 1000;  float: left;  min-width: 110px;  width: 120px;  margin: 11px 0px 0px;  list-style: none;  color: #555;  font-size: 10px;  border: 1px solid #adadad;  background-color: #eeeeee; }  .dropdown .dropdown-menu li:not(:last-child) {    border-bottom: solid 1px #adadad; }  .dropdown .dropdown-menu li > a {    display: block;    padding: 7px 10px; }

The new way…

Developer

Keys to Success

Awesome team! HTML, Javascript, CSS Experience Engineer in UX

Team and Skills

UX Dev Server Source control: Github Deployment: S3, cloudfront, Jenkins

Infrastructure

Mimic production source control and deployment process

Dev Process

Rigor around testing protocol: Usertesting.com

Hypothesis and experiment definition

User Testing

How can we get better designs?

How do we improve product development?

Autodesk is a registered trademark of Autodesk, Inc., and/or its subsidiaries and/or affiliates in the USA and/or other countries. All other brand names, product names, or trademarks belong to their respective holders. Autodesk reserves the right to alter product and services offerings, and specifications and pricing at any time without notice, and is not responsible for typographical or graphical errors that may appear in this document.

© 2013 Autodesk, Inc. All rights reserved.