Embed Size (px)
Citation preview
Creating and Scaling an Enterprise Design SystemBrian McLaughlinChief Experience Officer
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
WE ARE THE WAY BUSINESSES PAY AND GET PAIDOur solutions make complex business payments simple, secure and seamless
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
10,000+
Global Customers
1,600+
Employees Worldwide
Award-Winning Technology &
Patents
Across the Globe
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
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
9
10
11
12
13
14
15
16
17
This was a successful, revenue-generating product.
MULTI-DISCIPLINE
TEAM
THE DESIGN SYSTEM IS < 2
YEARS OLD
GREW TEAM BY 50+
IN 5 YEARS
AWARD WINNING UX
Since 2011
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
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.
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.
Getting to one…
Date Picker File Upload Data Grid Form Elements Navigation Widgets
Getting to one…Bottomline’s Design System
VISUAL DESIGN PROTOTYPE
UX CONVERGENCE
TEAM
SPECIFICATIONS GLU
Convergence: The merging of distinct technologies,Industries, or devices into a unified whole.
merriam-webster.com
• 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
• 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
Design System Tools
Adobe CSInteraction
Adobe CSInteraction
UXPinInteraction
UXPinInteraction
UXPinInteraction
AtlassianDocument
GluDesign System
Line of Business
Solutions
Design Prototype Document Develop
UX ConvergenceInvolvement
Visual Design
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
Prototype
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
Specifications
Specifications
• Use design specs with UI Dev and QA but not everyone
• You can only spec so much
GLU
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
• 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
Results
