Your organization is considering creating a design system, or has already developed one. How does it evolve over time? What about content? How do we measure success? How can we demonstrate that a design system impacts the bottom line?

1. Copyright 2019 Virtru Corporation
Beyond Components:
Spacing, Measurement & More
Jim Lane
UX Advisor @ Virtru
jlane@virtru.com
@JimLaneNoVA
/in/jimlane

2. Copyright 2019 Virtru Corporation
Virtru Email Protection
- Gmail (browser extension)
- Outlook (native app)
- iOS & Android (native app)
Google Drive Encryption (browser
extension)
Secure Reader (web app)
Administrative Dashboard (web app)
… and more
Image (up to 480px X 540px)
Design & Product at Virtru
2
We help more than
5,000 organizations
worldwide protect
data wherever it’s
created or shared so
they can collaborate
with confidence.

3. Copyright 2019 Virtru Corporation 3
+ + =
Virtuoso Design System
^ Tip: Synchronize updates via Slack
SKETCH ABSTRACT STORYBOOK

4. Copyright 2019 Virtru Corporation
Atoms
No interactions
Organisms
> 1 interaction
Molecules
Only 1 interaction
A OM
4
Terminology Grounded in Interactions
Color
Shape
Typography
Icons
Buttons
Fields
Checkboxes
Radio
Headers
Footers
Navigation
Forms

5. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation
Spacing
5
Designing the Invisible: Spacing in Design Systems
Art Klepchukov

6. Copyright 2019 Virtru Corporation
Space affects every interface:
- Margins
- Paddings
- Borders & radii
- Shadow depths
- Gutters
- Default widths & heights
But often chosen ad-hoc for any
given interface
Image (up to 480px X 540px)
Applying a spacing scale
6

7. Copyright 2019 Virtru Corporation
Image (up to 480px X 540px)
Conscious spacing
Geometric Progression: 24px base
7

8. Copyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL
default spacer = default line height
establishes
vertical
rhythm
Tip: Change Sketch nudging so it
fits your spacing scale.
8

9. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation
Content
9

10. Copyright 2019 Virtru Corporation
Typography
Capitalization
10
Content is the Foundation of an Experience

11. Copyright 2019 Virtru Corporation
Typography
Capitalization
Content Patterns
Editorial Style Guidelines
Brand, Voice & Tone
Product Lexicon
Design System Documentation
Information Architecture
11
Content is the Foundation of an Experience

12. Copyright 2019 Virtru Corporation 12
Creating a Copy System Along with Your Design System
Bobby Wood
https://uxdesign.cc/creating-a-copy-system-along-with-your-design-system-58afd89c3c12

13. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation
Extensibility
13

14. Copyright 2019 Virtru Corporation 14

15. Copyright 2019 Virtru Corporation 15
White-labeling; Internationalization; Verticalization; Accessibility & Inclusion

16. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation
Governance
16

17. Copyright 2019 Virtru Corporation 17
Governance: Managing a Design System
● Create new component locally
● Review with team
● Update in Virtuoso
● Notify design team; dedicated Slack channel
● Verify design implementation
● Notify engineering
● Review engineering implementation

18. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation
Measurement
18

19. Copyright 2019 Virtru Corporation
“You don’t succeed when you launch
a living style guide or release a code kit.”
19
Measuring Design System Success
Nathan Curtis
https://medium.com/eightshapes-llc/measuring-design-system-success-d0513a93dd96

20. Copyright 2019 Virtru Corporation
Consistency
20
What are we trying to accomplish? What are our OKRs?
Adoption, Commitment, Recency
Measuring Design System Success
Nathan Curtis
https://medium.com/eightshapes-llc/measuring-design-system-success-d0513a93dd96
Speed of delivery
Cross-team alignment
Capacity, Velocity, Sponsorship
Participation, Commits, Employee Satisfaction

21. Copyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL 21
Measuring the Impact of a Design System
Cristiano Rastelli
https://medium.com/@didoo/measuring-the-impact-of-a-design-system-7f925af090f7

22. Copyright 2019 Virtru Corporation
Questions? Thank you!
Jim Lane
UX Advisor @ Virtru
jlane@virtru.com
@JimLaneNoVA
/in/jimlane