- How to build a design system from scratch - How to audit your product for design consistency - How to structure and communicate a design system to an Agile team

1. The Silver Bullet
of Product
Development
Building a design system. The true story.

2. Hello!
Role: CEO and Co-founder at UXPin. Design Ops team.
Background: UX Design & Psychology
Passion: Design and Development at scale. Product Strategy.
Design Ops. Design Systems.
@marcintreder

3. The Full-Stack UX Platform
Agile UX in one place: design systems, prototyping, and documentation together

4. UXPin in a Nutshell
Mission: To streamline the product development process with the
power of design and collaboration!
Customers: +150 countries. Focus on enterprises (PayPal, Sapient…)
Team: 70 people. 2 offices (Mountain View, CA and Gdansk, Poland)
www.uxpin.com

5. Building a Design System
The Roadmap
Why? What? How?

6. Ready?

7. As always, it all started with the research...

8. +40 interviews with design leaders
“What is the biggest problem your team is facing in the design process?”

9. Sophia Baboolal via Unsplash
The Impossibility of Scale
• UI gradually decays into inconsistency
• User happiness decreases
• Teams become slower and slower

10. The entropy of a sufficiently complex digital
product always increases.

11. Is design doomed?

12. Is design doomed?

13. No.

14. Enter: Design System

15. Yes
No, but we're currently working on one
No, and we aren't working on one
I don't know
0% 10% 20% 30% 40%
Does your company have a pattern library or
design system?
Answered: 3,157

16. Does your company have a pattern library or
design system?
Answered: 3,157
What is a Design System?
And how does it help solve the problem of design inconsistency?

17. “A scalable framework of decisions & team
behaviors across a product portfolio to
converge on a cohesive experience.“
- Nathan Curtis

18. It’s the Process, not the Result

19. What Does it Contain?

20. UI Patterns Hi-Fi
UI Patterns Lo-Fi
Implementation Guidelines
Code snippets/Code reference
Color Palettes
Icon Families
Typographic Scales
Grid/Layout definitions
Brand Guidelines
Design Principles
0% 22.5% 45% 67.5% 90%
Structure of a Design System
Analyzed: 39 systems

21. Let’s get this organized.

22. s
The Structure of a Design System
Color Palettes Typographic Scales Grid Definitions Icons & Assets
Templates Modules Components Elements
Design Principles Implementation Guidelines Editorial Guidelines
Building Blocks
UI Patterns
Rules

23. Patterns? Styleguides?
That’s not new! You've probably heard that many times before.

24. History
Non-extensive, subjective, history of Design Systems
Design Patterns. Elements of
Object-Oriented Software
A Pattern Language
Christopher Alexander
YUI Library
Sass CSS
Bootstrap
Salesforce Lighting
ES6 JS Modules

25. Why Today?
Why this time Design Systems are going to reach scale.
Digital matters: 6/10 top 10 companies in the world are tech companies (Apple, Alphabet,
Microsoft, Amazon.com, Facebook, Alibaba).
Experience matters: Design was never more important. Business value of user experience is
widely recognized.
Technology is ready: Web technology became modular (js modules, and libraries e.g. React,
CSS preprocessors, task managers...)
Is design ready?

26. How?
How can you start building a design system?

27. 1. Accept that building a Design System is
an ongoing process.
Make it part of your product development. Start building it now.

28. “A design system isn’t a project. It’s a product serving products.”
- Nathan Curtis

29. Design system is a process and therefore is
simultaneously always ready and never done.
Design system with one color defined, properly named,
implemented and accepted by an organization is better
than a full static style guide.

30. 2. Form a multidisciplinary design operations team.
Designers, engineers and content managers should run the DesOps house
and gradually solve problems of a product organization related to the
consistency of experience and efficiency of design/development process

31. 3. Build your interface inventory
The Interface Inventory is a neatly organized box with all the pieces of your
product. It shows all the glaring inconsistencies and serves as a kick-off to
the process of building a design system.

32. Do you want to see a real interface inventory?

33. 4. Build your building blocks
Step by step start standardizing your building blocks. Take colors, basic
properties, typography, iconography - improve it, organize it, document and
deliver to your product teams.

34. UXPin Color Palette
From a mess of 116 color variables to a systemic palette

35. Color Research
Our Senior UI Architect counted all the instances
of specific color variables in code.

36. Variables matching
I created a spreadsheet matching new and old colors

37. Naming is Hard
Naming is difficult, yet crucial. Keep one convention!

38. Primary/base colors and other properties:
Secondary/accent colors and other properties
@blue-base: #006cff;
@blue-lighten-15: lighten(@blue-base, 15%); // #4d98ff

40. Typography?

41. Text styles + LESS mixing

42. Now, make it available.

43. Let’s take a look at an actionable design system

44. 6. Accept that in a Design System - Design
and Code go arm in arm

45. One of Your Tools

46. Icons Management - Performance
45 Icons Test 3 Icons test
Median Average Median Average
React.js SVG Icons Component 575ms 583.3ms 558ms 566.5ms
Individual PNG Icons Encoded with Base64 578.5ms 580.3ms 587ms 583.3ms
PNG Sprite 608.5ms 633.1ms 596ms 549.9ms
SVG Loaded as CSS background Data URL 620ms 628.3ms 607ms 630.6ms
SVG Sprite 660.5ms 694.6ms 584ms 651.8ms
Individual SVG Icons Encoded with Base64 666.5ms 671.4ms 580.3ms 580.3ms
Icon Font 973.5ms 1131.2ms 630ms 643.2ms
Individual PNG Icons 1485ms 1514ms 675.9ms 675.9ms
Individual SVG Icons 1550ms 1584ms 680ms 743.6ms

47. 7. Kick off the process of standardizing
and documenting patterns

48. Start Small
Start with elements and go category after category, then
move to components, modules and templates...

49. Putting it all together: Actionable Design System

50. Thank you!