You'll learn: How to structure, govern, and maintain a design system How to improve design consistency, productivity, and quality with React How to avoid design debt in short-term and long-term projects

1. Balancing UX Consistency and
Developer Productivity in a
Design System
Daniel O’Connor

2. Hello!
1. 2013-2017: UI Engineer @ Optimizely
2. 2017: UI Developer @ Thumbtack

3. Hello!
1. 2013-2017: UI Engineer @
Optimizely
2. 2017: UI Developer @ Thumbtack
● ~2 UI Engineers on the design team
● 2015: Created OUI, a collection of
components in HTML/CSS
● 2016: Began creating React UI
components
● Supporting ~5 designers and 30
engineers.

4. Hello!
1. 2013-2017: UI Engineer @
Optimizely
2. 2017: UI Developer @ Thumbtack
● ~2 UI Developers on front-end
infrastructure team
● 2017: Created Thumbprint UI, a
collection of components in
HTML/CSS
● Present: Creating React UI
components
● Supporting ~15 designers and 100
engineers.

5. Learning #1
Make it easy to implement high quality UIs.

13. Learning #2
Design debt that makes it to production should not be seen as the fault of the
engineer that implemented it, but rather a sign that our tools failed to meet their
needs.

14. Balancing UX Consistency and Developer Productivity

15. Balancing UX Consistency and Developer Productivity
1. Programmatically encouraging design consistency
2. When consistency and productivity clash
3. Living in a component world

16. 1. Programmatically encouraging design consistency
2. When consistency and productivity clash
3. Living in a component world
Balancing UX Consistency and Developer Productivity

18. Inline Styles
<button style="background: #E50000; color: #fff; font-size: 14px;">
Delete Draft
</button>
Programmatically encouraging design consistency

19. Atomic CSS
<button class="bg-red white f4">
Delete Draft
</button>
Programmatically encouraging design consistency

22. CSS Classes
<button class="btn btn--danger">
Delete Draft
</button>
.btn {
background: $color--blue;
color: $color--white;
font-size: $font-size--text;
}
.btn--danger {
background: $color--red;
}
Programmatically encouraging design consistency

25. Components
Programmatically encouraging design consistency
<Button theme="danger">
Delete Post
</Button>
import React from 'react';
const Button = (props) => (
<button className={`btn btn-${props.theme}`}>
{ props.children }
</button>
);

26. Learning #3
Reduce HTML duplication to programmatically encourage design consistency.

27. 1. Programmatically encouraging design consistency
2. When consistency and productivity clash
3. Living in a component world
Balancing UX Consistency and Developer Productivity

28. When consistency and productivity clash: Button

29. Inline Styles
<button style="
background: #E50000;
color: #fff;
font-size: 14px;
font-weight: 700;
">
Delete Draft
</button>
When consistency and productivity clash: Button

30. Atomic CSS
<button class="bg-red white f4 fw7">
Delete Draft
</button>
When consistency and productivity clash: Button

31. CSS Classes: Update Sass
<button
class="btn btn--danger btn--bold">
Delete Draft
</button>
.btn {
background: $color--blue;
color: $color--white;
font-size: $font-size--text;
}
.btn--bold {
font-weight: 700;
}
When consistency and productivity clash: Button

32. CSS Classes: Utility Classes
<button
class="btn btn--danger weight--bold">
Delete Draft
</button>
.btn {
background: $color--blue;
color: $color--white;
font-size: $font-size--text;
}
When consistency and productivity clash: Button

33. Components
<Button
theme="danger"
isBold={true}>
Delete Post
</Button>
When consistency and productivity clash: Button
import React from 'react';
const Button = ({theme, isBold}) => (
<button
className={`
btn
btn-${theme}
${isBold && 'btn--bold'}
`}
>
{ props.children }
</button>
);

34. Modifying a component? Bake the code changes into the component.
Learning #4

35. Evolution of OUI at Optimizely
● Before OUI: Collection of Sass files, within monolith, without documentation
● OUI v1: Collection of Sass files, separate repo, versioned, great documentation
● OUI v2: Added React components with great documentation
When consistency and productivity clash: OUI

36. Learning #5
Write documentation but assume that no one will read it.

37. Learning #6
Present documentation to the right people at the right time.

38. Learning #7
Use your documentation as the development environment to keep it up to date.

39. Evolution of the Token component: Part 1
When consistency and productivity clash: Token component

40. Evolution of the Token component: Part 2
When consistency and productivity clash: Token component

41. If we wanted to redesign our Tokens...
1. Find every place we use the Token component
2. (Hope that we found all of them.)
3. Remove the previously added helper class and other one-off implementations
4. Rewrite our Token CSS to:
a. Use the new style
b. Support features that we previously implemented as one-offs
5. Visually verify every page that use a Token component
6.
When consistency and productivity clash: Token component

42. Evolution of the Token component: Part 3
When consistency and productivity clash: Token component
<div class="token">
<div class="token__num">1</div>
<div class="token__handle"></div>
<div class="muted">Experience for:</div>
<div class="token__text">
Added item to cart
<button class="token__close">
<svg>...</svg>
</button>
</div>
</div>
import { Token } from 'ui-library';
<Token num={1} label="Experience for">
Added item to cart
</Token>

43. Learning #8
One-off implementations are expensive. Optimize for long-term productivity when
possible.

44. 1. Programmatically encouraging design consistency
2. When consistency and productivity clash
3. Living in a component world
Balancing UX Consistency and Developer Productivity

45. Benefit of Components
1. Productivity Improvements
2. Consistency Improvements
3. Quality Improvements
Living in a component world

46. Productivity Improvements
Living in a component world
<div class="token">
<div class="token__num">1</div>
<div class="token__handle"></div>
<div class="muted">Experience for:</div>
<div class="token__text">
Added item to cart
<button class="token__close">
<svg>...</svg>
</button>
</div>
</div>
import { Token } from 'ui-library';
<Token num={1} label="Experience for">
Added item to cart
</Token>

50. Benefit of Components
1. Productivity Improvements
2. Consistency Improvements
3. Quality Improvements
Living in a component world

51. Benefit of Components
1. Productivity Improvements
2. Consistency Improvements
3. Quality Improvements
Living in a component world

53. Danger of Components
1. Building global components too early may lead to wrong abstraction
2. Allowing developers to pass in their own classes and styles
Living in a component world

54. Only create global components when they are needed in two or more places.
Creating the wrong abstraction is way more costly than duplicating code.
Learning #9

55. Learning #10
Make it difficult—not impossible—to introduce one-offs.

58. Thank You!
daniel@danoc.me