The document outlines the role of a UI designer in developing a design system that enhances product design and implementation across teams. It emphasizes the importance of maintaining consistency, usability, and accessibility in the design process while collaborating with various disciplines. The design system serves as a foundational source of truth that aids scalability and includes guidelines for components, styles, and best practices.

1. Design System
To build an efficient
Fail, Learn, Build, Test
Paya Do

2. In this role, you will be responsible for creating UI components that are part of design-only libraries used by our Product Designers.
You will partner with the overall Product Design team to shape the visual appearance of our Design System, engage with our UX Writer to
document it, and align with UI Engineers for implementation.
You will want to work with us if you like:
Tomorrow’s technology
To think about small details that affect an entire ecosystem of applications
To translate specs and requirements into scalable, visual solutions
To think about colors, typography, and spacings in a systematic way
To contribute, maintain, and help in documenting an always-evolving library of components
To partner with roles that spread across different disciplines, such as Product and Engineering
via ‘Netflix - UI Designer, Design Systems - Content Platform’

3. Design System
By the people, for the people

4. A Design System is the single source of truth
which groups all the elements that will allow the
teams to design, realize & develop a product.

5. Internal Use. No intention of sharing publicly or implementing externally.

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

7. Atomic Design
Atom > Molecule > Organism > Template > Page

8. Internal Use. No intention of sharing publicly or implementing externally.

9. The repository of publicly available design systems and pattern libraries
via ‘https://adele.uxpin.com/’

10. Why do we need
a Design System?

11. 1. Keeping the same look and feel across
the product

12. Does your product has this
Color pallette?
50+ Shades of Gray
...

13. 2. Source of truth, manual of
standards for the product team

14. Design + Code + Documentation
Airbnb Datepicker Library
for the web.
Built on storybook js
https://storybook.js.org/

15. Our Anti-Money Laundering Monitoring tool’s Storybook

16. Figma
Real-time, multiplayer. Code-based components.

18. 3. Product scales.
Design needs to scale, too.

19. People Product
New designers,
developers,...
New trends, new hirings, new teams…
New Styles, Patterns, Ideas…
New Team structures

21. To overcome these challenges thousands of companies
are investing in Design Systems.
So how to get your team on-board?

22. Find the 50 shades of grey moments.
Is everyone happy with the speed of dev & code tasks?
“How do we build this?” “It doesn’t match the design?”
…
Then start with a UI inventory!
And do not give up on talking to people everyday.

23. UI Inventory

24. via ‘The Atomic Workflow - Brad Frost’

25. Build your design system on-top of a mature product.
Do not shoot at multiple targets.

26. Keep the team minimal.
Have a team working full-time on the project.

27. Document your system on top of your design tool.
Figma has worked fine for us.

29. Cross-platform is dreadful to build a design system.
Cross-platform team is recommended. Specify Generic
components then apply them to multiple platforms.
via ‘Design Systems at Deliveroo: Learnings and Frustrations ~Matt Vagni & Raph Guilleminot’

30. Design System > Usability > Accessibility
“Accessible design allows users of all abilities to navigate, understand, and use your UI successfully.”

31. Material UI Guideline

32. Why is this important
for a mature design
system?
Design system acts as a foundation
for our inclusivity efforts.
Look for Web Content Accessibility
Guidelines 2.0 to know more.
red-blind green-blind
More at ‘Accessibility & Mercari - 1000ch’

33. Does your company have a design
system or a pattern library?
UXPin surveyed 3,157 designers,
PMs, and developers

34. Design System ROI for the Developer Team
ROI = Return of investment
$75 per hour. Team of 50 developers.
2.5h/week * 52 weeks * $75 * 50 devs = $487,500/year
via ‘UXPin’

35. Question?