BUILDING
MASTER ROUTES
Visibility & Planning - Pilot Program
Get Slider Revolution 200+ Templates 25+ Addons Object Library And Much More!
Due to a Non-Disclosure Agreements, the information on this project is limited. The Nine Pillars of Creating a Design Culture
Introduction
During the GE to Wabtec merger, things became complex. Creating usable, everyday experiences—ranging from standard tools to foundational elements in core products and new initiatives—requires systematic design thinking. We recognized that this approach was essential to scaling our communication methods and building better solutions.
We believe that design teams should adopt scalable models and embrace a more open design process. This doesn’t mean “designing by committee,” but rather avoiding the inefficiencies and duplication that come from designing in isolation—especially in a large organization. When teams grow, when your company produces a family of products for diverse markets, and when your customer base is broad and varied, it’s essential to empower people to create in unison, driving both innovation and cohesion in the market.
So, what’s the problem?
The alignment process can be dauntingly complex, especially for those new to it. Enabling more designers and teams to effectively contribute across multiple moving parts is a significant challenge. This isn’t collaboration for its own sake; it’s a strategic investment in design, offering designers the chance to solve complex problems that benefit teams company-wide.
With this collaborative model in mind, how do we build and implement a strategic design system that fosters co-creation, supports our new business areas, and adapts to digital workflows? Our system must address customer needs and the rapid demands of emerging technologies.
The main problems this product aims to solve are:
- Living Systems: When should a design team build out a design system?
- Tooling: What tools are essential for making a design system effective?
- Scaling: How do you scale a design system from a small team of 10 to over 100?
Additionally, how does this approach fit within the team’s model of collaboration?
Responsibilities
- Leading and scaling the Volt design system: Directed the development and expansion of the design system to align with Wabtec’s digital transformation goals, ensuring consistency and usability across platforms.
- Fostering cross-functional collaboration and user-centered design: Coordinated with diverse teams to align on design system application, prioritizing research-driven, user-centered decisions and promoting continuous improvement.
Team members involved
- Cross-functional collaboration: Partnered with UX/UI designers, developers (Angular and React), and (3) project managers to ensure seamless implementation and adoption of the design system.
- Engagement with stakeholders and senior leadership: Incorporated feedback from product teams and leadership to enhance the design system’s effectiveness and alignment with organizational goals.
Skills and tools
- Proficient in design system development, leadership and collaboration across cross-functional teams, user-centered and research-driven design, and effective stakeholder management to align with strategic goals.
- Figma, Adobe XD, Zero Height, Jira, Confluence, Microsoft Teams, InVision, and GitHub for design, prototyping, documentation, project management, and collaboration.
Timeline & structure summary
- The design system rollout spanned an 8-month period, with key elements developed and implemented in stages to progressively deliver value to teams. This phased approach allowed for iterative improvements and ensured alignment with team needs and project goals throughout the timeline.
Understanding a
Living System
As we embrace co-creation with openness, today’s pace demands that we adapt. Static policies can’t keep up; design systems must stay responsive to new behaviors, technologies, businesses, and ways of working. This adaptability is how designers become invaluable partners, cutting through the noise to make our environments approachable, logical, and accessible.
Design is, at its core, a verb — to think, to make, to create. For design systems to scale effectively, we need to evolve from the lone visionary to a design collective. This isn’t just a system for designers; it’s a system for collaborators — constantly adapting, sharing, and improving.
In our post-COVID, fully digital world, where face-to-face interaction is less frequent, collaboration relies more than ever on digital tools. This shift has driven a surge in the adoption of digital solutions across our legacy transportation products, making it critical that we design better, together.
Intake 2020
The increase of digital output as we move into our new normal of a digitized infrastructure.
Now looking back at when I first started with the team here at Wabtec When I first joined Wabtec I had a very structured understanding of what a design system is and how an organization can embrace all its use cases, I mean that’s why they brought me in and this were the standards that our own team understood. But as we started to look outside our circle, we soon realized that many within the organization confused visual style guides, component library, design language, or design system, all within the same scope of artifacts or structures (Spoiler: that’s not what a design system is.)
As seen with many larger enterprise design teams once growth goes into effect, it became evident that only a shared library of components was not going to cut it.
As our product catalogue was thriving the system was never really brought to scale across the vast organization of all digital products. We also know that we could not continue to power great customer experiences without improving the day-to-day workflows and tools for the designers and or developers alike. Once we realized this, we started to work on what would make the most impact over time, this was creating a comprehensive design system.
Back then, the team was running into problems with our library of styles and components hosted on Box or master Sketch files. Because designers were each trying to move fast and make an impact, they would rarely check if the component in a Box folder was the latest, or even the right one for their needs. Or designers would assume their use-case was unique enough to warrant a completely custom design. A new designer would often take over an existing project and lose much of the history or context behind It was becoming difficult to know who to talk to about a project, and the library of shared folders was growing rapidly, becoming more complex and disorienting every week.
As a design team scales past just a handful of individual contributors, what you need is a complete design system.
A healthy design system will make it easier to scale design patterns and components alongside a growing design team. It will ensure consistency and quality across all experiences, and increase the speed as well as creativity of designers without losing best practices or consistency within the product.
There’s plenty of resources available online to learn more about design systems and how to build them, but there are things these resources and articles tend to overlook which can be invaluable when building out your design system. There are 9 areas of focus to account for when scaling design to multiple teams, or enterprises.
1 -
Core Principles
2 -
Ethical Touchstones
3 -
Team Structure
4 -
Design System
5 -
Process & Methodology
6 -
Generative Research
7 -
Behavioral Analytics
8 -
Measurable ROI
9 -
Evangelism & Outreach
One
Core Principles
By articulating our core principles, we ensure that everyone who practices design, or design thinking, is grounded in a common set of agreements. It’s easiest to think of this as a creative mission statement. Core principles aren’t about tactics or execution, they’re about a team’s dominant aspiration.
Considering a diverse set of examples can be elucidating, so to create the system we had to get our teams “WHY’S” straightened out – why did we need to spend this time and effort – money to do this? What could this support and how could we motivate our superiors or investors to actually go for this. So today we knew that development of our user centered focus was our main priority based on the result of our legacy broken engagement with what our clients needed and the speed to market but also developing valuable tools and products that could evangelize the success and partnerships that we needed. And this goes with a vast amount of time spent in each product and learning that the cohesion and consistency did not share a common language.
So, we figured if we aligned design and engineering by introducing this common language for all we could then solve this problem and in the process of doing so we could support our Design Thinking processes with paired Research driven alignment with our clients, account for faster time to market and introduce a change management within the way our teams would work and continue to support the product team’s autonomy while keeping a tighter grip on how our teams share and collaborate. Which in return drives innovation to a larger audience both internally but for the growth our digital products externally as well.
Two
Ethical Touchstones
Without a code of ethics, creative and UX design quickly devolve into a seedy underworld of psychological hacks and dark patterns. Dark Patterns are interactive techniques designed to trick or deceive a user into taking action. Because usability testing puts such a ruthless focus on action, a/b testing will often conclude that these patterns are a holy grail of effectiveness. As a result, almost every company has a few dark patterns in place. Developing our ethical principles is just as important as sustaining our core principles in a field where we try to view design as a force for good in the world.
Some of our inspirations came from our legacy Digital General Electric models and design systems called Predix – where components could be shared within various UI experience but had very narrow margins of evolution. So as our research expanded with our counterparts we began to understand that this specific system did not complete all our or users’ needs and actually limited our model to innovate within our specific area of interest (transportation and logistics) which also blocked our need to provide a limitless yet simple and effective interaction on multiple devices but also be as user friendly for all our non-tech savvy users.
So like all brave and future centric teams does, we continued our explorations in finding ways that we could expand our narrative within our newly upcoming Design System through other systems like the Shopify Polaris – Link and varied component models from IBM’s Carbon – link and Google Materials – Link which expressed a need for open source structures and deliverables.
Three
Team Structure
Nathan Curtis founder of, eight shapes provided an excellent overview of team models for scaling design systems in 2015. His conclusions are broadly applicable to design culture in general. Curtis identified three primary design team models that our team also embraced and built our teams structure from.
Solitary Model
Centralized Model
Federated Model
The Solitary Model
Coming from a previously structured model at GE we know we could not go back to a Solitary model mainly because our insights were too large and we were no longer within the common to startups or smaller team structures, plus we had to many steeler designers researchers and developers already amazing work within our design system so we had to look at what other models could allow us to grow and also allow teams to evolve. As in all things scalable, delegation is a necessary side-effect of growth.
The Centralized Model
This is probably the most common design team setup. One that we previously originated from and had various instances where only the centralized team could make design decisions. We at times found ourselves unable to maintain effective control over a sprawling ecosystem (All of GE products). This in returned created friction between the design team and other powerful stakeholders, who may begin to exhibit a disdain for the out of touch authority or simple and rapid change. Which in the long run resulted in both strategic and executional inconsistency, expressed as fragmented design decisions and quality control issues between sub-brands.
The Federated Model
The next model de-centralizes the practice of design while consolidating its direction by way of a style guide or design system. Federated design teams are collaborative by nature and constantly evolving based on the needs of a project or challenge. The core design system group maintains a design system while individual product teams are free to interpret, extend, and contribute back to it. One example is Google’s “Committee by Design” is the federated system with the most visibility in the design world, thanks to Material Design. It differs substantially from Apple’s HIG model, which is based on a centralized system run by Johnny Ive. – Similar to our new teams’ structure within Wabtec this model was just the perfect fit.
Four
Design System
When scaling design, diverse creative interpretations can very quickly move from being an asset to a liability. Stakeholders need to know that when they work with a creative studio the assigned team will use a consistent and repeatable process that results in a predictable quality of work. Teams also need to minimize their time-to market as a matter of competitive advantage, which is an area that has often bottlenecked with creative and UX.
So as we set our goals, we needed tools that made these experiences a reality. Invision, and Sketch, and GitHub were our starting points, but as in all collaborative teams we needed a tool or set of tools that allowed us to continue our social practices especially within a worldwide pandemic. Features like built-in collaboration, enhanced prototyping attributes and avenues to provide full length documentation both internally and externally were the areas that made it extremely important for us to be able to move forward and not have to reinvent the wheel.
We did what any good product team would do we turned to the users/customers within our larger transportation industry and our makers within our digital products, to get a deeper understanding on where the system would benefit them. And what we uncovered is that a successful system can only become a trusted authority for digital product design if it could be easy to access and clearly provide content and visibility into the work that is happening and also foster communication and the exchange of our ideas between teams with pre-coded objects, so layouts can be generated much more quickly by developers. As well as sticking to the foundation of a good design system which is restrictive by nature but flexible in application and able to equip the teams with the tools to elevate the craft and focus on the innovation and not the trying to solve design problems or designing things right.
Developing a design system is a specialized undertaking. Simply looking at Material Design and saying “we want one” is too big a challenge out of the gate. A design system is realized in stages, over time. Hiring a designer with prior experience building one is a good first step.
Five
Process & Methodology
Adopting an effective process & methodology can take years, even for an experienced leadership team. The larger the company, the more difficult the task becomes; which is why growing companies are well advised to begin early and revise often. Creative and strategic process are as much about negotiation with other business units as internal dynamics. Identifying a working model means balancing the requirements of a company’s development methodology with the reality of a team’s creative process.
One of the best examples of this can be understood through the history of Lean UX (Jeff Gothelf, 2013). User experience design is, by nature, a very waterfall practice. Its practitioners are most comfortable when a nearly omniscient level of user research has been distilled into a concise strategy before a creative execution is attempted. Agile, on the other hand, thrives within the cone of uncertainty and executes small, rapid changes to an existing product. The two approaches were fundamentally incompatible and after years of friction, Lean UX was the game-changing result. To a classic UX Designer, however, Lean is still a very uncomfortable process to learn.
As a company develops its own methodology, discomfort is an expected side-effect. Learning to manage that discomfort among designers, developers, and stakeholders without causing a corporate civil war is nearly as critical as articulating the process itself.
This is why we structured a value proposition which would inform our MVP which was made up of three key parts which we hope would set us up to deliver the maximum impact while we started to develop and run this new process in an 8-month stretch. We agreed that we would tackle and roll out each part progressively to be able to provide incremental value to teams and then fold it all up within our internal website and external website which in itself would serve as a living and breathing example of the system.
Wabtec’s Design System
We named our Design system Volt, built on community and user in minds: Our developers, designers, project managers, and customers. What made us success was not only the tools and resources we provided but also the baseline we set for how people work with the system as well as interact with it.
For our developer community we looked to keep up with the growing and evolving technology in digital. Volt was built off of Google Material and future web standards. Volt consists of framework agnostic components with an emphasis of support to our Angular and React teams.
So to do this we used our Design tools to set up projects (Adobe XD + Figma) and Zero height along with our internal shared platforms Teams to setup guidelines to perform key workflows such as prepping files for production or doing research or user testing.
We also established an ongoing dialogue with all product teams through the use of public forms as in Jira/Confluence, Slack, and Microsoft Teams or biweekly walkthroughs or standups always managing the content that would be relevant to them.
Whoever now used the processes established by Volt were elevated from thinking about mundane UI interactions and instead get to focus on the holistic experience, the user flows, and the content. Volt defines the nuances which unlocks the creativity shift from “How should this button be designed” to “How do I create the most impactful experience that makes this product great?”
Six
Generative Research
In design, exploratory research teaches us about our potential audience and evaluative research tells us how they feel about existing solutions. Generative research, on the other hand, tells us what might be possible. It’s the formal study of nearly all impossible things and what can possibly come out of that research “ staying open minded-rather than having guard rails”. A healthy design culture spends a lot of time in the yellow circle (below).
Generative Research in Design Education. Link for additional content
This form of research is all about discovering the right questions to ask and gaining unexpected perspectives as a result. By involving our customers directly in the human-centered design process we were able to remove many of our preconceived biases from the result.
Once we had our discovery and participatory design work streams in place, we took a look at the various products we shipped and asked the question, what do all these have in common? And how do we share those characteristics for others to draw from and use on any product? So as we audited our component than abstracted those characteristics into our design system library to set a baseline set of styles within our core colors and typography standards.
So, within this process we made sure to validate them to check that they all tied back to the core brand and/or that of an rebranded Wabtec experience Like Reds = primary color and Secondary down to all other baseline colors which had specific actionable attributes within real world use cases in the digital experiences. But at the same time making sure to simplify the view port for all users, auditing tools and justifying the allocation of the attributes that made the baseline style within the design system.
Also to call out some other practices we studied here: The Google Ventures Design Sprint a direct descendent of this practice (it requires good generative research and is a participatory ideation — though it’s not technically a generative activity). But here is the baseline example described above: Generative Research Methods.
Seven
Behavioral Analytics
The fundamental difference between fine art and design is intent. Design conveys a specific message and requires a consistent interpretation if it is to be considered successful. Intent is measured through the observation of behavioral change when comparing two or more versions of a creative execution. It follows that analytics to measure behavioral change within a system are a critical component of any scalable design system. We are unable to optimize what we cannot see, and without behavioral analytics our team would be blind. And just to confirm we did not have an in-house data science team of any kind, so we needed to bring in tools like User-Testing.com, and good old fashioned screen time with straight forward demos of A/B testing and before the pandemic hit spending a lot of time on sight at various customer locations to simply verify if we were getting closer to our outcomes.
Culture
Values
Symbols
Eight
Measurable ROI
At a certain point, a company will need a way to quantify investment levels among one of more design teams based on the actual business value they provide. A lazy set of metrics might take a ruthless approach to conversion (did the design sell more products?)
A well-considered metric will account for things like speed of iteration, responsiveness to change, user satisfaction, stakeholder satisfaction, positive buzz, and adherence to the core principles and ethical touchstones established in harmony with the larger brand.
And this is where Design Tokens came into effect to ensure that these qualities are made painless to use and maintain and can also connect code to design seamlessly in and out of each variable our product teams needed. Our single source of truth is at everyone’s fingertips.
In addition we looked beyond the traditional UI qualities to establish a similar source of truth for two other known pain points, the first was how we communicate as a brand within the digital products “our design principles” with then drove awareness on how to engage with the larger community delivering a scaled contribution and governance model within all shared products. In all making complex pain points much more simplified and adding real personality within our process.
And as we took these building blocks and further enhanced them we started to build out a set of guidelines showing how to combine these components to solve common UX problems, “like how should a notification appear on a dashboard”? or “what does a table interaction look like”? And the goal here was to simply make it easy for day one designer or someone outside our team to be able to pick up the system which equally shows scale and a specific measure within return on investment.
Nine
Evangelism & Outreach
No matter how well a company’s design culture has been articulated, communicating it to a diverse set of teams will make or break the effort. Every division of an enterprise has its own goals to achieve and if they don’t understand how good design is helping them, it’ll feel like extra work that doesn’t have a relevant outcome.
So, all of this is centralized into on hub that is external facing hosted by Zero Height – Volt Design System : as we were extremely excited as a team that we were able to release this in early 2020 and expect it to grow and evolve just as our principles stand true and as Wabtec continues to innovate within the transportation and logistics marketplace.
As we continue to improve the value and the overall state of the Volt Design System, in this article we look back at what areas we were able to touch and create change for the greater good.
• Customers = “8 targeted external personas”
As design scales, so must the education and outreach program. The board of directors isn’t the only team that needs to understand the ROI of good design. Communicating our value to a every corner of the company is the life blood of a healthy and innovative culture.
Readiness Matrix
And also a few items for all to take and understand and ask yourself and your teams that might read this. How do you know if a Design System is what your organization needs and are they ready and able for all the change that comes with it? So, seek these questions out is your organization investing in their user experiences to be more effective and cohesive?
Are you the meeting customers at key touch points? Are they growing their design capabilities, not just on a component level but also a tools level? Are the principles in place, to ship great work at speed? Then I would have to say that these are clear examples of a place for a new Design system to flourish within your organization.
is a Product:
In this journey we have moved really fast and have iterated multiple times, like yeah, a lot of times!!!! We have learned that we need to treat Volt as a living a breathing product and never making the mistake that one solution can fit everyone’s needs there just no one size fits all just as we see with our product needs and roadmaps.
To make your design system a success you need to know your users and you need to understand what impacts their work the most. Their needs will inform your roadmap and will be the base to understanding the efforts needed to execute on it and also understanding that you are not going to get it right the first time around. So, make the time you leave room for iteration and encourage your users to give feedback and this is very important because without your users you don’t get the right type of system your organization needs.
The second thought here is that a design system needs to be relevant to your users, to make the most of this you need to understand that not all users have the same level of maturity, this is something that your team doesn’t want to learn the hard way, designers and developers you would think can just pick this content up and roll with it but it’s not that simple. Some will need more support than others and just simply planning out, how to roll out that support for the Design System is equally as important as advocating for it and making people understand that it exists.
So knowledge is not the same as usage and a Design System is only useful if it is only being used across your entire organization.
Resources
