SlideShare a Scribd company logo
Building Design Systems
That Work for Design and
Dev
SCALING BEST PRACTICES
Parisa Bazl
Head of UX
May 2024 © Commvault 2024
© Commvault 2023 2
[redacted screenshot of v15]
© Commvault 2023 3
[redacted screenshot of v32]
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
Getting Buy-in
© Commvault 2024 5
Everybody’s opportunity but mostly our problem
© Commvault 2024 6
Stakeholder Buy-in
Efficiency
Efficacy
Learnability
Likability
© Commvault 2024 7
Developer Buy-in
SCALE
SCALE
SCALE
SCALE
SCALE
© Commvault 2024 8
M
O
D
I
U
L
A
R T
Y
Key Partners
© Commvault 2024 9
We gotta start somewhere
© Commvault 2024 10
The Right People
© Commvault 2024 11
The Right Pages
Landing
page
Add
N
ew
Step 1:
Access Node
Step 2:
Plan
Step 3:
Cluster
Step 4:
App Group
Step 5:
Summary
Add New Data Cluster for Backup
Deriving Patterns
© Commvault 2024 12
Abstracting example pages into replicable templates and flows
• 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…
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
[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 object
Editing cluster details = Updating an object
© 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)
© Commvault 2024 17
© Commvault 2024 18
Accepting Reality
© Commvault 2024 19
Creating opportunities and overcoming challenges
© 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
© Commvault 2024 21
[redacted screenshot of page with no page title]
i.e. you won’t win every battle
© 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
Leveraging Benefits
© Commvault 2024 23
Creating opportunities and overcoming challenges
© Commvault 2024 24
Long-term Stability
Thank You
© Commvault 2024

More Related Content

Similar to Building Design Systems that Work for Design and Development

Dell Technology World - IT as a Business - Multi-Cloud Strategy is your Product
Dell Technology World - IT as a Business - Multi-Cloud Strategy is your ProductDell Technology World - IT as a Business - Multi-Cloud Strategy is your Product
Dell Technology World - IT as a Business - Multi-Cloud Strategy is your Product
Manuel "Manny" Rodriguez-Perez
 
Cloud Adoption Framework Phase one-moving to the cloud
Cloud Adoption Framework Phase one-moving to the cloudCloud Adoption Framework Phase one-moving to the cloud
Cloud Adoption Framework Phase one-moving to the cloud
Anthony Clendenen
 
Should That Be a Microservice ?
Should That Be a Microservice ?Should That Be a Microservice ?
Should That Be a Microservice ?
Rohit Kelapure
 
A Framework to Measure and Maximize Cloud ROI
A Framework to Measure and Maximize Cloud ROIA Framework to Measure and Maximize Cloud ROI
A Framework to Measure and Maximize Cloud ROI
RightScale
 
IRJET- Cloud Migration Research: Concept
IRJET-  	  Cloud Migration Research: ConceptIRJET-  	  Cloud Migration Research: Concept
IRJET- Cloud Migration Research: Concept
IRJET Journal
 
Patterns of evolution from monolith to microservices
Patterns of evolution from monolith to microservicesPatterns of evolution from monolith to microservices
Patterns of evolution from monolith to microservices
Karina Mora
 
Get Mapped: Using Value Stream Mapping to Create a DevOps Adoption Roadmap
Get Mapped: Using Value Stream Mapping to Create a DevOps Adoption RoadmapGet Mapped: Using Value Stream Mapping to Create a DevOps Adoption Roadmap
Get Mapped: Using Value Stream Mapping to Create a DevOps Adoption Roadmap
IBM UrbanCode Products
 
Data governance and discoverability at AO.com | Jon Vines, AO.com and Christo...
Data governance and discoverability at AO.com | Jon Vines, AO.com and Christo...Data governance and discoverability at AO.com | Jon Vines, AO.com and Christo...
Data governance and discoverability at AO.com | Jon Vines, AO.com and Christo...
HostedbyConfluent
 
Appendix C – Project Close-out ChecklistSection 1.General Inf.docx
Appendix C – Project Close-out ChecklistSection 1.General Inf.docxAppendix C – Project Close-out ChecklistSection 1.General Inf.docx
Appendix C – Project Close-out ChecklistSection 1.General Inf.docx
festockton
 
Oracle Cloud Maintenance Product Update.pdf
Oracle Cloud Maintenance Product Update.pdfOracle Cloud Maintenance Product Update.pdf
Oracle Cloud Maintenance Product Update.pdf
WalidShoman3
 
Presentation cim1309 v cat 3.0 operating a v-mware cloud
Presentation   cim1309 v cat 3.0 operating a v-mware cloudPresentation   cim1309 v cat 3.0 operating a v-mware cloud
Presentation cim1309 v cat 3.0 operating a v-mware cloud
xKinAnx
 
Presentation cim1309 v cat 3.0 operating a v-mware cloud
Presentation   cim1309 v cat 3.0 operating a v-mware cloudPresentation   cim1309 v cat 3.0 operating a v-mware cloud
Presentation cim1309 v cat 3.0 operating a v-mware cloud
solarisyourep
 
Performance Testing
Performance TestingPerformance Testing
Performance Testing
vodQA
 
Presentation from sap virtualization to hybrid clouds
Presentation   from sap virtualization to hybrid cloudsPresentation   from sap virtualization to hybrid clouds
Presentation from sap virtualization to hybrid clouds
solarisyourep
 
Making Your Apps Cloudy - Migrating to Microservices
Making Your Apps Cloudy - Migrating to MicroservicesMaking Your Apps Cloudy - Migrating to Microservices
Making Your Apps Cloudy - Migrating to Microservices
Cloudify Community
 
Elecosoft 4D BIM for CIOB Guildford
Elecosoft 4D BIM for CIOB GuildfordElecosoft 4D BIM for CIOB Guildford
Elecosoft 4D BIM for CIOB Guildford
Ben Taunt
 
TUNI: Business-driven Cloud Adoption
TUNI: Business-driven Cloud AdoptionTUNI: Business-driven Cloud Adoption
TUNI: Business-driven Cloud Adoption
Tero Peltola
 
July 30: How User-Centered Design Drives Impactful Products and Services
July 30: How User-Centered Design Drives Impactful Products and ServicesJuly 30: How User-Centered Design Drives Impactful Products and Services
July 30: How User-Centered Design Drives Impactful Products and Services
VMware Tanzu
 
DevOps KPIs as a Service: Daimler’s Solution
DevOps KPIs as a Service: Daimler’s SolutionDevOps KPIs as a Service: Daimler’s Solution
DevOps KPIs as a Service: Daimler’s Solution
VMware Tanzu
 
Curve chart.pptx
Curve chart.pptxCurve chart.pptx
Curve chart.pptx
HoussemLoudhabachi
 

Similar to Building Design Systems that Work for Design and Development (20)

Dell Technology World - IT as a Business - Multi-Cloud Strategy is your Product
Dell Technology World - IT as a Business - Multi-Cloud Strategy is your ProductDell Technology World - IT as a Business - Multi-Cloud Strategy is your Product
Dell Technology World - IT as a Business - Multi-Cloud Strategy is your Product
 
Cloud Adoption Framework Phase one-moving to the cloud
Cloud Adoption Framework Phase one-moving to the cloudCloud Adoption Framework Phase one-moving to the cloud
Cloud Adoption Framework Phase one-moving to the cloud
 
Should That Be a Microservice ?
Should That Be a Microservice ?Should That Be a Microservice ?
Should That Be a Microservice ?
 
A Framework to Measure and Maximize Cloud ROI
A Framework to Measure and Maximize Cloud ROIA Framework to Measure and Maximize Cloud ROI
A Framework to Measure and Maximize Cloud ROI
 
IRJET- Cloud Migration Research: Concept
IRJET-  	  Cloud Migration Research: ConceptIRJET-  	  Cloud Migration Research: Concept
IRJET- Cloud Migration Research: Concept
 
Patterns of evolution from monolith to microservices
Patterns of evolution from monolith to microservicesPatterns of evolution from monolith to microservices
Patterns of evolution from monolith to microservices
 
Get Mapped: Using Value Stream Mapping to Create a DevOps Adoption Roadmap
Get Mapped: Using Value Stream Mapping to Create a DevOps Adoption RoadmapGet Mapped: Using Value Stream Mapping to Create a DevOps Adoption Roadmap
Get Mapped: Using Value Stream Mapping to Create a DevOps Adoption Roadmap
 
Data governance and discoverability at AO.com | Jon Vines, AO.com and Christo...
Data governance and discoverability at AO.com | Jon Vines, AO.com and Christo...Data governance and discoverability at AO.com | Jon Vines, AO.com and Christo...
Data governance and discoverability at AO.com | Jon Vines, AO.com and Christo...
 
Appendix C – Project Close-out ChecklistSection 1.General Inf.docx
Appendix C – Project Close-out ChecklistSection 1.General Inf.docxAppendix C – Project Close-out ChecklistSection 1.General Inf.docx
Appendix C – Project Close-out ChecklistSection 1.General Inf.docx
 
Oracle Cloud Maintenance Product Update.pdf
Oracle Cloud Maintenance Product Update.pdfOracle Cloud Maintenance Product Update.pdf
Oracle Cloud Maintenance Product Update.pdf
 
Presentation cim1309 v cat 3.0 operating a v-mware cloud
Presentation   cim1309 v cat 3.0 operating a v-mware cloudPresentation   cim1309 v cat 3.0 operating a v-mware cloud
Presentation cim1309 v cat 3.0 operating a v-mware cloud
 
Presentation cim1309 v cat 3.0 operating a v-mware cloud
Presentation   cim1309 v cat 3.0 operating a v-mware cloudPresentation   cim1309 v cat 3.0 operating a v-mware cloud
Presentation cim1309 v cat 3.0 operating a v-mware cloud
 
Performance Testing
Performance TestingPerformance Testing
Performance Testing
 
Presentation from sap virtualization to hybrid clouds
Presentation   from sap virtualization to hybrid cloudsPresentation   from sap virtualization to hybrid clouds
Presentation from sap virtualization to hybrid clouds
 
Making Your Apps Cloudy - Migrating to Microservices
Making Your Apps Cloudy - Migrating to MicroservicesMaking Your Apps Cloudy - Migrating to Microservices
Making Your Apps Cloudy - Migrating to Microservices
 
Elecosoft 4D BIM for CIOB Guildford
Elecosoft 4D BIM for CIOB GuildfordElecosoft 4D BIM for CIOB Guildford
Elecosoft 4D BIM for CIOB Guildford
 
TUNI: Business-driven Cloud Adoption
TUNI: Business-driven Cloud AdoptionTUNI: Business-driven Cloud Adoption
TUNI: Business-driven Cloud Adoption
 
July 30: How User-Centered Design Drives Impactful Products and Services
July 30: How User-Centered Design Drives Impactful Products and ServicesJuly 30: How User-Centered Design Drives Impactful Products and Services
July 30: How User-Centered Design Drives Impactful Products and Services
 
DevOps KPIs as a Service: Daimler’s Solution
DevOps KPIs as a Service: Daimler’s SolutionDevOps KPIs as a Service: Daimler’s Solution
DevOps KPIs as a Service: Daimler’s Solution
 
Curve chart.pptx
Curve chart.pptxCurve chart.pptx
Curve chart.pptx
 

More from UXDXConf

Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
UXDXConf
 
Design-Driven Leadership: Transforming Organizations through Creative Thinking
Design-Driven Leadership: Transforming Organizations through Creative ThinkingDesign-Driven Leadership: Transforming Organizations through Creative Thinking
Design-Driven Leadership: Transforming Organizations through Creative Thinking
UXDXConf
 
Improving Product Design with Futurism at ORACLE
Improving Product Design with Futurism at ORACLEImproving Product Design with Futurism at ORACLE
Improving Product Design with Futurism at ORACLE
UXDXConf
 
Motion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in TechnologyMotion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in Technology
UXDXConf
 
Transforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UXTransforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UX
UXDXConf
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
UXDXConf
 
Server-Driven User Interface (SDUI) at Priceline
Server-Driven User Interface (SDUI) at PricelineServer-Driven User Interface (SDUI) at Priceline
Server-Driven User Interface (SDUI) at Priceline
UXDXConf
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
UXDXConf
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
UXDXConf
 
Improving UX Research Quality with Cross-Department Collaboration
Improving UX Research Quality with Cross-Department CollaborationImproving UX Research Quality with Cross-Department Collaboration
Improving UX Research Quality with Cross-Department Collaboration
UXDXConf
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
UXDXConf
 
We're Agile. So why haven't our outcomes improved?
We're Agile. So why haven't our outcomes improved?We're Agile. So why haven't our outcomes improved?
We're Agile. So why haven't our outcomes improved?
UXDXConf
 
Breaking Silos_The Shift from a Software Delivery to a Product Development Mi...
Breaking Silos_The Shift from a Software Delivery to a Product Development Mi...Breaking Silos_The Shift from a Software Delivery to a Product Development Mi...
Breaking Silos_The Shift from a Software Delivery to a Product Development Mi...
UXDXConf
 
How Intercom built ‘Fin’, a GPT-4 powered chatbot_Fergal Reid_UXDX_EMEA_2023
How Intercom built ‘Fin’, a GPT-4 powered chatbot_Fergal Reid_UXDX_EMEA_2023How Intercom built ‘Fin’, a GPT-4 powered chatbot_Fergal Reid_UXDX_EMEA_2023
How Intercom built ‘Fin’, a GPT-4 powered chatbot_Fergal Reid_UXDX_EMEA_2023
UXDXConf
 
Leveling Up Design Maturity in a Large-Scale Organisation_ Daniel Heaslip_ U...
Leveling Up  Design Maturity in a Large-Scale Organisation_ Daniel Heaslip_ U...Leveling Up  Design Maturity in a Large-Scale Organisation_ Daniel Heaslip_ U...
Leveling Up Design Maturity in a Large-Scale Organisation_ Daniel Heaslip_ U...
UXDXConf
 
Continuous-Research_Mike Brown_UXDX_ EMEA_2023
Continuous-Research_Mike Brown_UXDX_ EMEA_2023Continuous-Research_Mike Brown_UXDX_ EMEA_2023
Continuous-Research_Mike Brown_UXDX_ EMEA_2023
UXDXConf
 
Crafting Digital Products for Connected Appliances and Other Stories_ Alexis ...
Crafting Digital Products for Connected Appliances and Other Stories_ Alexis ...Crafting Digital Products for Connected Appliances and Other Stories_ Alexis ...
Crafting Digital Products for Connected Appliances and Other Stories_ Alexis ...
UXDXConf
 
Integrating AI _King's journey of Technology Transformation_Steven Collins_ U...
Integrating AI _King's journey of Technology Transformation_Steven Collins_ U...Integrating AI _King's journey of Technology Transformation_Steven Collins_ U...
Integrating AI _King's journey of Technology Transformation_Steven Collins_ U...
UXDXConf
 
Seamless UX: Invisible Transactions_Sudev Balakrishan_UXDX_EMEA_2023
Seamless UX: Invisible Transactions_Sudev Balakrishan_UXDX_EMEA_2023Seamless UX: Invisible Transactions_Sudev Balakrishan_UXDX_EMEA_2023
Seamless UX: Invisible Transactions_Sudev Balakrishan_UXDX_EMEA_2023
UXDXConf
 

More from UXDXConf (20)

Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Design-Driven Leadership: Transforming Organizations through Creative Thinking
Design-Driven Leadership: Transforming Organizations through Creative ThinkingDesign-Driven Leadership: Transforming Organizations through Creative Thinking
Design-Driven Leadership: Transforming Organizations through Creative Thinking
 
Improving Product Design with Futurism at ORACLE
Improving Product Design with Futurism at ORACLEImproving Product Design with Futurism at ORACLE
Improving Product Design with Futurism at ORACLE
 
Motion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in TechnologyMotion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in Technology
 
Transforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UXTransforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UX
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Server-Driven User Interface (SDUI) at Priceline
Server-Driven User Interface (SDUI) at PricelineServer-Driven User Interface (SDUI) at Priceline
Server-Driven User Interface (SDUI) at Priceline
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Improving UX Research Quality with Cross-Department Collaboration
Improving UX Research Quality with Cross-Department CollaborationImproving UX Research Quality with Cross-Department Collaboration
Improving UX Research Quality with Cross-Department Collaboration
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
We're Agile. So why haven't our outcomes improved?
We're Agile. So why haven't our outcomes improved?We're Agile. So why haven't our outcomes improved?
We're Agile. So why haven't our outcomes improved?
 
Breaking Silos_The Shift from a Software Delivery to a Product Development Mi...
Breaking Silos_The Shift from a Software Delivery to a Product Development Mi...Breaking Silos_The Shift from a Software Delivery to a Product Development Mi...
Breaking Silos_The Shift from a Software Delivery to a Product Development Mi...
 
How Intercom built ‘Fin’, a GPT-4 powered chatbot_Fergal Reid_UXDX_EMEA_2023
How Intercom built ‘Fin’, a GPT-4 powered chatbot_Fergal Reid_UXDX_EMEA_2023How Intercom built ‘Fin’, a GPT-4 powered chatbot_Fergal Reid_UXDX_EMEA_2023
How Intercom built ‘Fin’, a GPT-4 powered chatbot_Fergal Reid_UXDX_EMEA_2023
 
Leveling Up Design Maturity in a Large-Scale Organisation_ Daniel Heaslip_ U...
Leveling Up  Design Maturity in a Large-Scale Organisation_ Daniel Heaslip_ U...Leveling Up  Design Maturity in a Large-Scale Organisation_ Daniel Heaslip_ U...
Leveling Up Design Maturity in a Large-Scale Organisation_ Daniel Heaslip_ U...
 
Continuous-Research_Mike Brown_UXDX_ EMEA_2023
Continuous-Research_Mike Brown_UXDX_ EMEA_2023Continuous-Research_Mike Brown_UXDX_ EMEA_2023
Continuous-Research_Mike Brown_UXDX_ EMEA_2023
 
Crafting Digital Products for Connected Appliances and Other Stories_ Alexis ...
Crafting Digital Products for Connected Appliances and Other Stories_ Alexis ...Crafting Digital Products for Connected Appliances and Other Stories_ Alexis ...
Crafting Digital Products for Connected Appliances and Other Stories_ Alexis ...
 
Integrating AI _King's journey of Technology Transformation_Steven Collins_ U...
Integrating AI _King's journey of Technology Transformation_Steven Collins_ U...Integrating AI _King's journey of Technology Transformation_Steven Collins_ U...
Integrating AI _King's journey of Technology Transformation_Steven Collins_ U...
 
Seamless UX: Invisible Transactions_Sudev Balakrishan_UXDX_EMEA_2023
Seamless UX: Invisible Transactions_Sudev Balakrishan_UXDX_EMEA_2023Seamless UX: Invisible Transactions_Sudev Balakrishan_UXDX_EMEA_2023
Seamless UX: Invisible Transactions_Sudev Balakrishan_UXDX_EMEA_2023
 

Recently uploaded

OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 

Recently uploaded (20)

OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 

Building Design Systems that Work for Design and Development

  • 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 I U 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 N ew 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 object Editing 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)
  • 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