Design System implementation use case, and discussing the challenge - and value - of implementing Design Systems in large, enterprise organizations.

1. Design System
A modular approach
to alignment
and communication

2. 2
Ran Liron
Head of UX at CyberArk
UX studies program academic manager
at the Technion’s continues education unit
UX Mentor at Google Launchpad

3. Who we are
Leading provider of
Privileged Access Security management
4K+ customers, include most of the
Fortune 100 companies
1000+ employs

4. PM
UI & UX
R&D
With whom do we need to communicate?
Visual Designers
R&D Managers
UX Experts UX Researchers
Product
Managers
Front-End Developers

5. Axure PowerPointWord
Long ago…
Photoshop

6. Problem #1: No “Single version of the truth”
•Findability
•Ownership

7. Mapping our deliverables in

8. Layouts
Mapping our deliverables in
Main title
Form Step Title
Content
Steps
Entity Content
Main title
Entity title
Bulk actions panel
Main Content title
Main Content

9. Components
Mapping our deliverables in
Action menu Donut chart Step unit

10. Repeatable elements
Mapping our deliverables in
Confirm password

11. Mapping our deliverables in
General guidelines
 Behavior patterns
 Cursors
 General message
 Keyboard support
 Loaders
 Responsiveness
 Writing (microcopy)
 …

12.  Layouts
 Components
 Repeatable elements
 General guidelines
 Pages
Mapping our deliverables in
Secondary Primary

13. 1. name
2. Short description
3. Dependencies
4. Owners (+ Status and Link to Location)
 UX
 UI
 DEV
Mapping our deliverables in
13

14. Component list table
14
N/A
N/A
N/A
N/A
N/A
N/A
N/A
N/A
N/A

15. Problem #1:
No “Single version of the truth”
15


16. Additional Problem: inefficiency
•UI - Work efficiency
•UX - Communication efficiency

17. Ps
Improving our UI deliverables
Hand Made style guide
17

18. Improving our UI deliverables
Hand Made style guide
18
Ps Sketch
vs. “Live” style guide

19. Improving our UI deliverables
Hand Made style guide
19
Ps Sketch
vs. “Live” style guide

20. Ps
From Photoshop Sketch
 Took a lot of effort
 Mac is… Mac
 More efficient
20
Sketch

21. Improve our UX deliverables
We used se to have long, wordy documentation
The problem:
Nobody like to read it.
The Solution:
Use different media.
21

22. Improve our UX deliverables
For components: Design patterns in Confluence
22

23. Improve our UX deliverables
For components: Design patterns in Confluence
23

24. Component design pattern structure
24
Style guide

25. Component design pattern structure
25

26. Component design pattern structure
26

27. Component design pattern structure
27

28. Component design pattern structure
28

29. Component design pattern structure
29Live Demo

30. The FED repository
30

31. Improve our UX deliverables
For components: Design patterns in Confluence
31

32. Improve our UX deliverables
For Pages UX: Confluence  Axure
32

33. Improve our UX deliverables
33

34. Improve our UX deliverables
34

35. Problem #2:
Efficiency
35
Problem #3:
Communication



36. Bottom line:
We are using our design system
as a modular approach for Internal
alignment and communication
36

37. Bottom line:
Are we done?
this is not the end.
It is not even the beginning of the end.
But it is, perhaps, the end of the beginning.
37