1. Barbarians at the Gates
How to Bring Engineers into Your UX Department in
order to Lower Coordination and Transaction Costs
Stephen M. James • @tweetllama • DevWorkshop 2015

2. Survey of audience

6. Introducing:
user-centered,
front-end
engineers
in your UX dept

7. User-Centered Engineering is a cross-disciplinary
practice that takes the goals of User Centered
Design, supports the designers in their
learning, and implements this learning in
consumable code.

8. User-Centered Design is more nuanced, but is
typically the process you see in UX—that is
research, sketching, prototyping, and
iterating.

10. Despite UX following UCD, yet most digital products
are mediocre or even substandard. And things won’t
get easier. As interactions progress from clicks to taps
and other gestures, traditional UCD processes will face
even greater challenges.
“Great user experiences requires great front-end development,” UX Matters

11. Who you report to determines
your priorities

12. New features are barnacles.
Can’t get them off, once they’re on.
- @billwscott

13. Engineering is traditionally
about feature delivery,
not about learning about the user.
Most organizations have a culture of delivery.

14. We want great experiences. More or less features
doesn’t matter. Engineering often sees prototyping
as outside of engineering.
Make prototyping a first class member of your tech stack in order to…

15. Cultivate a culture of learning.

16. UX Architecture Goals

17. Minimize creating UI
specs and PowerPoint
presentations for
meetings.
Kill the large spec PDF!

18. Our team will enable
rapid experimentation and
design iteration

19. - @billwscott

20. Our team will increase
collaboration between UX
designers and all FEDs

21. Our team will strengthen the link
between UX and product
engineering teams
see both sides of the discussion

22. Lower coordination and transaction costs
and accelerate product development
Resolving disconnects later in the product life cycle requires more time and
negotiation, extends deadlines, and frustrates everyone who is part of the
discussion, including UX, Engineering, and Product Management.
If we aren't doing this, then this team isn't doing its job.

23. Designers and FEDs in a common
studio space working together
toward the same goal.
Run past an interaction idea or discuss feasibility of a design. BOOM!

25. Increase perceived performance
Bundling/HTTP requests, critical render path, animation

26. webpagetest.org

28. Schedule frequent knowledge-
sharing sessions on both UX and
front-end topics, so everybody
shares a culture of learning.

29. Emphasis on rapid sketching and fast coding to
maximize your numbers of iterations and
variations.
UXA wants to help inform design direction, not focus on validating already
made design decisions, so we can fix issues earlier in the process.
We don’t want to just be the UX department’s product team.

30. It's never too early to start showing your design
ideas to users, beginning with your first rough
sketches.
Users may even feel more free to comment on sketches. Even try some
internal testing to gain quick insight.

31. Bring cohesiveness to the chaos:
Style guides, themes, design systems,
standard UI controls, pattern libraries

32. Bring cohesiveness to the chaos:
Create re-usable and engineering-
friendly scalable code for across your
system.

33. Two groups of engineers and designers…
came up with the same idea.
+

35. What is a living design system?
An approach for delivering a consistent design
cross-platform.

38. GetFuelUX.com
Bit.ly/smc-theme
LightningDesignSystem.com
For more information
speakerdeck.com/jina/living-design-systems

39. Some things to keep in mind...

40. Lots of meetings.

41. The amount of useable code that the
product team can use varies by time.

43. The type of useable code that the product
team can use varies by type of prototype.

45. The smaller the component we pass along
the likelier it will aid the product team and
make it into production for the upcoming
release.

47. Since the amount of code reuse should
be proportional to the time spent, we
would like to stop using the term
prototype.
!
We have come up with some new names for projects.

52. Once upon a time, in an office far, far way…

55. RPDs focus on what it should look and
function like to the end user.
Smoke and mirrors are allowed…

57. Also…

63. PEGs focus on slaying the tricky UI
dragons and merging that code into
production.

64. Stephen M. James • @tweetllama
Let’s create a culture of learning,
experimentation, and fail fast.
Thanks for listenin’!
Deck eventually available at
slideshare.net/interactivellama/