Building Design Systems that Work for Design and Development

This talk explores the methodologies and strategies essential for developing effective design systems that bridge the gap between design and dev.

Key Topics Covered:

1. Introduction to Design Systems

- The importance of design systems in modern digital product development
- Personal experiences and challenges faced in implementing design systems


2. Gaining Stakeholder Buy-In

- Strategies for communicating the value of UX to different types of stakeholders
- Techniques to quantify the benefits of UX in terms of efficiency, efficacy, learnability, and likability


3. Establishing Key Partnerships

- Identifying and collaborating with key teams within an organization
- Focusing on critical user flows and high-impact areas to drive the initial adoption


4. Deriving and Organizing Patterns

- Utilizing object-oriented design principles to create reusable and scalable patterns
- Abstracting specific use cases into general patterns applicable across different scenarios


5. Challenges and Realities

- Navigating the complexities of implementing design systems in large organizations
- Overcoming obstacles and managing phased approaches to system implementation

1. Building Design Systems
That Work for Design and
Dev
SCALING BEST PRACTICES
Parisa Bazl
Head of UX
May 2024 © Commvault 2024

2. © Commvault 2023 2
[redacted screenshot of v15]

3. © Commvault 2023 3
[redacted screenshot of v32]

4. 1.Getting buy-in
2.Key partners
3.Deriving Patterns
4.Accepting Reality
5.Leveraging Benefits

HOW WE ACTUALLY DID IT AND HOW YOU MIGHT TOO
© Commvault 2024 4
Scaling for Change

5. Getting Buy-in
© Commvault 2024 5
Everybody’s opportunity but mostly our problem

6. © Commvault 2024 6
Stakeholder Buy-in
Efficiency
Efficacy
Learnability
Likability

7. © Commvault 2024 7
Developer Buy-in
SCALE
SCALE
SCALE
SCALE
SCALE

8. © Commvault 2024 8
M
O
D
IU
L
A
R T
Y

9. Key Partners
© Commvault 2024 9
We gotta start somewhere

10. © Commvault 2024 10
The Right People

11. © Commvault 2024 11
The Right Pages
Landing
page
Add
New
Step 1:
Access Node
Step 2:
Plan
Step 3:
Cluster
Step 4:
App Group
Step 5:
Summary
Add New Data Cluster for Backup

12. Deriving Patterns
© Commvault 2024 12
Abstracting example pages into replicable templates and flows

13. •The object type is EMPLOYEE
•It consists of a variety of attributes
•Whenever we switch out the values we create a
unique instance
•Re-populating this object type to create multiple
unique instances means we don’t have to code a
new object for every single employee
•In this case, Parisa is the unique instance of the
employee object
THE FOUNDATION FOR DIGITAL APPLICATIONS
© Commvault 2024 13
Data Objects in the Backend
EMPLOYEE
EMAIL
Pbazl@commvault.
com
FIRST NAME Parisa
LAST NAME Bazl
ROLE Head of UX
ETC… Etc…

14. Create
•A user is adding a new instance to the application
Retrieve
•A user is searching, filtering, and viewing a specific instance or group of instances
Update
•A user is editing the values of an instance
Delete
•A user is removing an instance from the application
ACRONYM THAT ENCOMPASSES ALL POSSIBLE ACTIONS
© Commvault 2024 14
CRUD Workflows

15. [redacted screenshot of delete
confirmation]
[redacted screenshot of modal]
[redacted screenshot of grid][redacted screenshot of wizard]
Viewing group of clusters = Retrieving an object set
© Commvault 2024 15
Data Objects in the Front-end
Configuring for backup = Creating an object
Deleting a plan= Deleting an objectEditing cluster details = Updating an object

16. © Commvault 2024 16
Categorizing Components
Redacted screenshot of detail page
Pink: layout component (invisible)
Purple: container components (tile)
Blue: attribute components (dropdown)
Green: action components (button)

17. © Commvault 2024 17

18. © Commvault 2024 18

19. Accepting Reality
© Commvault 2024 19
Creating opportunities and overcoming challenges

20. © Commvault 2023 20
Timeline
2019 2020 2021 2022 2023
•Established UX team
•Stakeholder trust
•Onboarding and
learning
•Key partners
•Object-oriented
training
•Initial React research
•Implementation with
key partners
•Pattern classification
•Component mapping
•App-wide component
and pattern adoption
•Design system site
•Site enhancements
•Dark theme/UI
updates

21. © Commvault 2024 21
[redacted screenshot of page with no page title]
i.e. you won’t win every battle

22. © Commvault 2024 22
[redacted screenshot of page with slightly different components]
i.e. some teams take longer and so the app may have slightly different UX throughout

23. Leveraging Benefits
© Commvault 2024 23
Creating opportunities and overcoming challenges

24. © Commvault 2024 24
Long-term Stability

25. Thank You
© Commvault 2024