SlideShare a Scribd company logo
How can we get better designs?
How do we improve product development?
Experience Engineering and UX
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.
Sum of the Parts Speaker Series - Experience Engineering and UX
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 validation
Iterating in the technology we’re using let’s us know what’s possible
Sum of the Parts Speaker Series - Experience Engineering and UX
Prototyping
Functional Specs
Design Conceptualization
Concept/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)
Sum of the Parts Speaker Series - Experience Engineering and UX
Improve Product Development
How do we
improve product
development?
Speed up development process – more control over where the code
expresses itself as the experience
Build 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.

More Related Content

PDF
Balancing UX Consistency and Developer Productivity in a Design System
PPTX
UX Process - Mariana García
PDF
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
PDF
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
PPTX
Role of UX Design in Building Products: How I Stopped Designing and Started t...
PPTX
GHA Lean UX presentation
PDF
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
PDF
Agile Prototyping Best Practices
Balancing UX Consistency and Developer Productivity in a Design System
UX Process - Mariana García
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
Role of UX Design in Building Products: How I Stopped Designing and Started t...
GHA Lean UX presentation
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
Agile Prototyping Best Practices

What's hot (20)

PPTX
Product UX Integration
PPTX
UX Design process, #UX, #Design Process, #Agile UX
PDF
Becoming A User Advocate
PDF
UX Tools for Agile Teams – Design Mission
PDF
Contributing to Drupal: It's Not as Hard as it Looks
PDF
Design systems: accounting for quality and scalability
PDF
Integrating Design and Development in Your Workflow
PDF
Prototyping invision vs axure
PDF
Scaling Products With Design Systems
PPTX
UX and UI Workshops - User Journey
PPTX
Creating and Scaling an Enterprise Design System
PDF
Building a UX Process at Salesforce that Promotes Focus and Creativity
PPT
Logo designs
PDF
Design Thinking for Eduhacks 2017
PPTX
i/o extended: Intro to <UX> Design
PPTX
Don’t Guess It, Test It!
PDF
I'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
PPTX
Fundamentals of UX Design
PDF
Designers are from Venus - Presentationas Given to CD2
PDF
Developing A Succesful UX Strategy
Product UX Integration
UX Design process, #UX, #Design Process, #Agile UX
Becoming A User Advocate
UX Tools for Agile Teams – Design Mission
Contributing to Drupal: It's Not as Hard as it Looks
Design systems: accounting for quality and scalability
Integrating Design and Development in Your Workflow
Prototyping invision vs axure
Scaling Products With Design Systems
UX and UI Workshops - User Journey
Creating and Scaling an Enterprise Design System
Building a UX Process at Salesforce that Promotes Focus and Creativity
Logo designs
Design Thinking for Eduhacks 2017
i/o extended: Intro to <UX> Design
Don’t Guess It, Test It!
I'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
Fundamentals of UX Design
Designers are from Venus - Presentationas Given to CD2
Developing A Succesful UX Strategy
Ad

Similar to Sum of the Parts Speaker Series - Experience Engineering and UX (20)

PDF
The Experience Design Framework: A Design Thinking Guide for Product Success ...
PDF
10 Truths to Great Product Experiences
PPTX
An Introduction to User Experience for Dev's & Techies
PPT
Why Usability Should Never Come First
PPT
Upa why usability shouldn't come first
PDF
UX Overview for Agile Engineering-Driven Organizations
PDF
Utah PMA Quarterly Meeting, June, 2010
PPTX
Trends & Tools in UX
PPTX
ux_standards_slides
PDF
User Experience 101 - A Practical Guide
PPTX
Introduction & Course Overview: Design Thinking for User Experience Design, P...
PPT
User Experience as a Strategic Advantage
PPSX
UX Explained
PDF
Designing Experiences that Drive Consumer Engagement
PPTX
Ux Overview
PDF
Top Three Modern Product Trends
PDF
User Experience and Prototyping
PDF
UX Basics
PDF
What is User Experience?
PDF
Demystifying User Experience - General Assembly
The Experience Design Framework: A Design Thinking Guide for Product Success ...
10 Truths to Great Product Experiences
An Introduction to User Experience for Dev's & Techies
Why Usability Should Never Come First
Upa why usability shouldn't come first
UX Overview for Agile Engineering-Driven Organizations
Utah PMA Quarterly Meeting, June, 2010
Trends & Tools in UX
ux_standards_slides
User Experience 101 - A Practical Guide
Introduction & Course Overview: Design Thinking for User Experience Design, P...
User Experience as a Strategic Advantage
UX Explained
Designing Experiences that Drive Consumer Engagement
Ux Overview
Top Three Modern Product Trends
User Experience and Prototyping
UX Basics
What is User Experience?
Demystifying User Experience - General Assembly
Ad

Recently uploaded (20)

PPTX
Orthtotics presentation regarding physcial therapy
PPT
UNIT I- Yarn, types, explanation, process
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PDF
intro_to_rust.pptx_123456789012446789.pdf
PPT
Machine printing techniques and plangi dyeing
PPTX
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
PPTX
EDP Competencies-types, process, explanation
PDF
Pongal 2026 Sponsorship Presentation - Bhopal Tamil Sangam
PPTX
Evolution_of_Computing_Presentation (1).pptx
PDF
ART & DESIGN HISTORY OF VEDIC CIVILISATION.pdf
PPTX
2. Competency Based Interviewing - September'16.pptx
PDF
The Basics of Presentation Design eBook by VerdanaBold
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PDF
Chalkpiece Annual Report from 2019 To 2025
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PPTX
rapid fire quiz in your house is your india.pptx
PPT
robotS AND ROBOTICSOF HUMANS AND MACHINES
PPTX
Special finishes, classification and types, explanation
PDF
Introduction-to-World-Schools-format-guide.pdf
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
Orthtotics presentation regarding physcial therapy
UNIT I- Yarn, types, explanation, process
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
intro_to_rust.pptx_123456789012446789.pdf
Machine printing techniques and plangi dyeing
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
EDP Competencies-types, process, explanation
Pongal 2026 Sponsorship Presentation - Bhopal Tamil Sangam
Evolution_of_Computing_Presentation (1).pptx
ART & DESIGN HISTORY OF VEDIC CIVILISATION.pdf
2. Competency Based Interviewing - September'16.pptx
The Basics of Presentation Design eBook by VerdanaBold
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Chalkpiece Annual Report from 2019 To 2025
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
rapid fire quiz in your house is your india.pptx
robotS AND ROBOTICSOF HUMANS AND MACHINES
Special finishes, classification and types, explanation
Introduction-to-World-Schools-format-guide.pdf
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx

Sum of the Parts Speaker Series - Experience Engineering and UX

  • 1. How can we get better designs? How do we improve product development? Experience Engineering and UX
  • 2. How can we get better designs? How do we improve product development?
  • 3. How can we get better designs? How do we improve product development? We had this nagging problem…
  • 4. The spec The result
  • 5. How can we get better designs? How do we improve product development? …and this one too…
  • 6. Can we get a prototype? Sorry. 24 points left this week.
  • 8. What is the right question?
  • 9. How can we get better designs? How do we improve product development?
  • 10. How do we get better design? How do we improve product development? IxD, UR, VxD, Experience Engineering, LxD
  • 11. What are other companies doing?
  • 12. Leah Buley: The Modern UX Organization (Forrester Research) https://vimeo.com/121037431
  • 13. Dan McKinley, Etsy - Lean Startup Conference 2014
  • 14. “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
  • 16. How do we get better design?
  • 17. Excellent Experience Requires Iterative Design Prototypes allow for high-confidence design and user validation Iterating in the technology we’re using let’s us know what’s possible
  • 24. 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)
  • 27. How do we improve product development?
  • 28. Speed up development process – more control over where the code expresses itself as the experience Build 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)
  • 29. 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
  • 30. The spec The result We had this nagging problem…
  • 31. .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
  • 33.  Awesome team!  HTML, Javascript, CSS  Experience Engineer in UX Team and Skills
  • 34.  UX Dev Server  Source control: Github  Deployment: S3, cloudfront, Jenkins Infrastructure
  • 35.  Mimic production source control and deployment process Dev Process
  • 36.  Rigor around testing protocol: Usertesting.com  Hypothesis and experiment definition User Testing
  • 37. How can we get better designs? How do we improve product development?
  • 38. 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.

Editor's Notes

  • #2: Hello everyone. Thank you Courtney and Carbon 5 for hosting this event and the folks at Autodesk (Eric Fain) who have partnered with Carbon 5 to sponsor this speaker series. It’s a real pleasure for me to be here at Carbon 5 tonight. It’s a nice full-circle moment for me. We engaged Carbon 5 a little over a year ago…that experience opened the door for new ways for our UX team to work. They sort of got the engines started and the car is still running a year later. So it’s great to be back to talk about our experience. This talk is a practical nuts and bolts talk. It’s a case study in how we have integrated experience engineering and its associated tools, process and skills into our team. And the changes that afforded our team through this engagement. Let me tell you a little about what my team does and how we got to where we are now.
  • #3: We work on the AutoCAD web product. It’s a one page web app pretty much. CAD drawing in a browser. We have the usual UX suspects: visual designers, interaction designers, researchers, learning designers. And we had a team of developers and we pretty much followed and still follow agile development methodology (the Pivotal flavor). BUT…
  • #5: Through my own experience working on web teams I had a pretty good idea we had to be able to solve this. Designers who code is a one way.
  • #7: I knew we needed to be able to build some working prototypes but it was almost always impossible to get development resource to dedicate some cycles to something not relevant to the immediate needs of the product. Sometimes you can get those resources, but only on a handful of markee top priorities and with a lot of advanced planning. I knew UX needed to have some role in speeding up the dev process by being able to make edits directly into the code and they also needed to be able to do quick prototypes. So I set out to try to make a change on our team to address this problem. And I stepped right into this controversy.
  • #8: Luckily this was not controversial for our team of designers. They dove right in head first – got training. We were getting the skills but having a hard time practicing them in the real code. We also knew we needed a dedicated prototyping resource that was more skilled, but weren’t sure how that person was going to integrate into our team. That’s when we brought in Carbon 5 to help.
  • #9: This is where they helped us figure out what the real long-term goal was and what the potential impact for UX and really the whole development team was.
  • #11: This is what we came up with.
  • #12: So we also looked at what other companies are doing…here’s a few data points that are signposts as we thought about this.
  • #13: Now I’d like to step back and talk reflect on what some of the greater UX community thinks about this.
  • #14: Now some of you may already be doing this on your teams. Autodesk is a 30 year old desktop company so this sort of “in the wild” prototyping and testing was not really possible and not much on the radar.
  • #15: I like that last quote the most about HTML, etc. being a design tool.
  • #18: It all comes down to prototyping…which is really just another word for iterating. We all do this and various levels of fidelity from talking, to paper, to click-through prototypes, to high fidelity prototypes Understand technology we’re using: Sometimes the only way to iterate a design is in the actual technology it is being built.
  • #19: So we built a prototyping environment. Carbon 5 helped us build a flexible environment and pushed us to have the exact same release and repository process and tools as the “real” code environment. That way we would have the confidence to push real code when it was ready. We also made sure we hosted this “development” server publicly so we could send users to it without any special logins. I won’t go into the details of how this environment was set up, but Carbon 5 helped us build this. It’s a playground for designers, but under the hood, it’s really no different than the environments the developers are working in. Carbon 5 added some bootstrap-like libraries and the good news is that we haven’t had to add any more. Open to public Built on same technology as the production app Uses same deployment tools Uses same code repository process
  • #20: So here are the 3 categories of prototyping we do.
  • #21: Built by our designers
  • #24: 2 day user validation. 1 hour to code/design. An afternoon to set up the test. Runs overnight and results in the morning.
  • #25: Here’s an example of a test we did.
  • #26: Now that we’re not reliant on PM or SWD to do some of this experimentation…there is actually a gap in those areas knowing what we’re doing. SO we put these up. So that’s how we’re working to get better designs. All of this is lower case experience engineering.
  • #27: Now I get into the role of Experience Engineering.
  • #28: The previous answer sort of answers this question. By having designers who code (which is really experience engineering), We DO speed up dev process.
  • #29: Apologies for any inadvertant stereo typing going on with these avatars. Except for the designers…they really do look like that. These “experience engineering” skills we’ve developed as designers really do help us speed up. They give us more control over where experess. And it builds empathy, BUT to really to optimize this new skill on the UX team is to make this a separate role.
  • #33: Keys to making experience engineering a success.
  • #38: Just like a potter at the wheel who understands the limits and possibilities of the physical clay they are working with, UX (for web at least) needs to understand the technology they are designing in.