![Page 1: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/1.jpg)
Creating and Scaling an Enterprise Design SystemBrian McLaughlinChief Experience Officer
![Page 2: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/2.jpg)
Enterprise: Enterprise software is used to satisfy the needs of an organization rather than individual users. Such organizations would include businesses, schools, or governments.
Wikipedia
![Page 3: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/3.jpg)
WE ARE THE WAY BUSINESSES PAY AND GET PAIDOur solutions make complex business payments simple, secure and seamless
![Page 4: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/4.jpg)
Portsmouth NHPortland MEProvidence RIWilton CTGarden City NYNew York NYEnglewood Cliffs NJMarlton NJHerndon VAMorrisville NCCharlotte NCAlpharetta GAToronto CAN
Reading UKLondon UK Hertford UKParis, FRHainburg, DEGeneva, CHZurich, CHKosovoIsraelSingaporeMelbourne, AUSydney, AU
Across the Globe
![Page 5: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/5.jpg)
10,000+
Global Customers
1,600+
Employees Worldwide
Award-Winning Technology &
Patents
Across the Globe
![Page 6: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/6.jpg)
A Large Enterprise
Line of Business
Product
Product
Product
Product
Product
Product
Product
Line of Business
Product
Product Product
Product
Product
Line of Business
Product
Product
Product
Line of Business
Product
Product
Product
Product Product
Line of Business
Product
Product
Product Product
Line of Business
Product
Product
Product
Product
Line of Business
Product
Product
Product
Product
Product
Product
Product
Line of Business
Product
Product
Product
Product
Product
Product
Line of Business
Product
Product
Product
Product
Product
![Page 7: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/7.jpg)
![Page 8: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/8.jpg)
The Typical Enterprise Design Challenges
• Disparate components across LOBs • Minimal documentation and specifications • Lack of communication between product teams LOB’s• Little-to-no UX testing• Lack of UX/D version control• Numerous design tools
![Page 9: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/9.jpg)
9
![Page 10: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/10.jpg)
10
![Page 11: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/11.jpg)
11
![Page 12: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/12.jpg)
12
![Page 13: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/13.jpg)
13
![Page 14: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/14.jpg)
14
![Page 15: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/15.jpg)
15
![Page 16: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/16.jpg)
16
![Page 17: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/17.jpg)
17
![Page 18: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/18.jpg)
This was a successful, revenue-generating product.
![Page 19: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/19.jpg)
MULTI-DISCIPLINE
TEAM
THE DESIGN SYSTEM IS < 2
YEARS OLD
GREW TEAM BY 50+
IN 5 YEARS
AWARD WINNING UX
Since 2011
![Page 20: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/20.jpg)
How we got to an award-winning team
• Executive support• Executive presences• Fantastic work• “Punching above our weight”• A unified team of UX and UI Development• Positive customer and market reaction• Positive visible revenue increase
![Page 21: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/21.jpg)
How did we get here
• Executive support• Executive presences• Fantastic work• “Punching above our weight”• A unified team of UX and UI Development• Positive customer and market reaction• Positive visible revenue increase
These are all great.
And they are the things you would expect to hear about at a conference.
![Page 22: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/22.jpg)
How did we get here
• Executive support• Executive presences• Fantastic work• “Punching above our weight”• A unified team of UX and UI Development• Positive customer and market reaction• Positive visible revenue increase
For an Enterprise it’s all about scale.
![Page 23: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/23.jpg)
Getting to one…
Date Picker File Upload Data Grid Form Elements Navigation Widgets
![Page 24: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/24.jpg)
Getting to one…Bottomline’s Design System
VISUAL DESIGN PROTOTYPE
UX CONVERGENCE
TEAM
SPECIFICATIONS GLU
![Page 25: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/25.jpg)
Convergence: The merging of distinct technologies,Industries, or devices into a unified whole.
merriam-webster.com
![Page 26: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/26.jpg)
• Mission and purpose– Think holistically to create ”One”– Communicate and partner with all product team disciplines
• Team composition– UX designers with varying backgrounds– Senior UI development attendance
• Culture– “Humility is not thinking less of yourself, it is thinking of yourself less.”– Respect for each other creates strong partnerships– Communication fosters clarity and efficiency
UX Convergence Team
![Page 27: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/27.jpg)
• Process– Establish a baseline design framework– Design and approval– Governance– Consistency– Maintenance
• The finite details are needed but are not the goal
UX Convergence Team
![Page 28: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/28.jpg)
Design System Tools
Adobe CSInteraction
Adobe CSInteraction
UXPinInteraction
UXPinInteraction
UXPinInteraction
AtlassianDocument
GluDesign System
Line of Business
Solutions
Design Prototype Document Develop
UX ConvergenceInvolvement
![Page 29: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/29.jpg)
Visual Design
![Page 30: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/30.jpg)
Visual Design
• Design with requirements in mind• Establish a baseline to mitigate design churn• Use Photoshop for initial design and experimentation• Leverage UXPin as a design tool not just prototyping• Delegate a smaller, skilled group to govern design
![Page 31: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/31.jpg)
Prototype
![Page 32: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/32.jpg)
Prototype
• Team library: global repository of “approved” components
• High fidelity, branded interactive prototypes
• Usability testing of workflow options and iterations
• Detailed annotations illustrate functional requirements
![Page 33: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/33.jpg)
Specifications
![Page 34: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/34.jpg)
Specifications
• Use design specs with UI Dev and QA but not everyone
• You can only spec so much
![Page 35: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/35.jpg)
GLU
![Page 36: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/36.jpg)
GLU
• Recognized as an internal brand
• Multi-discipline governance team
• Product integration capability
• Rapid development
• Multi-device capable
• AA accessibility compliance
• Able to be white-labeled
![Page 37: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/37.jpg)
• Establish baseline framework• Governance• Foster a judicious and collaborative design culture• Company awareness of the design system• Institute a global design tool set• Implement single design system across all LOBs• Globally available assets at all points of the process• Constant review and maintenance
Overall Design System Take-Aways
![Page 38: Creating and Scaling an Enterprise Design System](https://reader035.vdocuments.mx/reader035/viewer/2022070521/58f9a9de760da3da068b730b/html5/thumbnails/38.jpg)
Results