Design system principles: a foundation for reusability
Healthy collaboration and progress towards a shared vision happens when we assume uncommon ground and document the way forward. Face ambiguity head on even if it’s uncomfortable. Work through potential conflict together to build up common ground. Here’s how we found common ground as a team working on U.S. Bank’s design system.
Get assumed common ground down on paper
Writing principles creates a shared mindset on large teams and across organizations over time. Principles set up common ground that groups can stand on to make logically connected decisions towards a collective vision. They might be called design principles, values or a number of terms, but they always serve to help individuals navigate in the same direction.
It’s easy to think we’re all on the same page, but what I’ve found is that as soon as a group of people tries to write out what it is we think everyone knows, disconnects pop up left and right.
If I could leave you with one idea it would be this — it’s better to assume uncommon ground and document the way forward.
Finding decisions and documenting them is the core role a design system plays. If you don’t document a decision or perspective, it’s bound to be re-made, and you’ll be lucky if you know about the change. If we assume common ground, change is highly likely. Assumed common ground quickly shifts underneath our feet. It’s better to assume uncommon ground, and document a way forward, together.
At U.S. Bank, our design system guiding principles define the philosophy of our design system and reusability practice as a organization. Our design system serves as the foundation for all the products we make, and our guiding principles serve as the bedrock beneath that foundation. We need something stable underneath it all to build with confidence.
Without further ado, our guiding principles:
Shield Design System guiding principles
In the Shield Design System, we believe purpose-driven components, patterns and themes are the foundation for enabling teams to build scalable solutions, faster.
Build with intention.
- Purposeful. Everything we create helps clients and business lines accomplish their goals.
- Clear. We tackle complex concepts in simple ways. We strive to be concise and consistent across design, code and documentation.
- Refined. We take familiar conventions and ensure they meet our highest standards. Our system is accessible, bug-free and ready to support multiple contexts and themes.
Listen and learn.
- Collaborative. We learn from each other to keep our design system growing and evolving. We work together to build requirements based on data and audience needs.
- Helpful. We guide system adoption, provide support, and find answers to the most challenging questions together.
Welcome change.
- Flexible. We strike the right balance between flexibility and scalability. Our system adapts to a range of brands, devices and platforms to create user experiences that are intuitive, familiar and expected.
- Dynamic. Our system constantly adapts and evolves to meet the changing demands of our business and our supporting technology.
Best practices
Throughout our work to define our guiding principles as a team, we surfaced conflicting ideas and went through many rounds of revisions. We embraced ambiguity and discomfort head on to turn uncommon ground into a shared mindset. Here are a few of the methods that worked well which might be helpful if your team is considering similar activities.
Make space for collaboration
Because these principles guide our entire team (and beyond), they must be built by our entire team. The very first step was to make a space where the whole team could collaborate. We set up a board to share ideas and left it open for a week to gather insights from everyone on the team without adding another meeting. We defined the mission and purpose for creating principles and included examples for inspiration. And of course, we left lots of open space for contributions in the form of adjectives.
Get inspired by others
To get inspired, we looked at industry leading design systems like Carbon (IBM), Polaris (Shopify) and Gestalt (Pinterest). These systems use principles or values to capture the purpose and mission of their design system, which is unique for each organization.
From our competitive research, we found that some of these sets of principles apply to the whole organization in how they generally create products (ex: Shopify’s experience values), and some are specific to the system (ex: Carbon’s guiding principles). Some are a blend of both. Our goal was to create a set of guiding principles to compliment our existing U.S. Bank design principles and clarify how we approach reusability and system architecture. Taking inspiration from other systems helped us to define our mission clearly and distinctly.
Embrace the chaos
We gathered lots of ideas and reactions in an unstructured way. The mess was embraced. It confirmed some expected trends while also leading to some surprising results. We saw the benefits of organized chaos in action.
With the raw data gathered, the next step was to find the strongest themes that could stand up to the test of time. We grouped common ideas, edited language and kept adding along the way. Things were still messy, but headed towards logic and structure. Embracing chaos helped us gather more ideas and input, which was easy to clean up and analyze after the fact.
Finally, make it visible
This is one of those projects that will never be done. We will always be able to make it better, and our organization will continue to change and grow. Our purpose will shift, and these guiding principles will adapt along the way. We decided to share these principles in our documentation site to get our DNA down on paper and make it visible to the teams that use our design system. We want to be held accountable to deliver according to our own standards and ethos, and we want to help the community understand what we value above all else.
What’s next?
Creating the principles is the easy part, if you ask me. The harder and more impactful work comes after we’ve put the flag in the ground. Now we need to build these principles into our language and planning conversations to see the real fruit of all this labor. When we bring work to critique, we’ll work to frame questions from these approaches. If we hit a tough trade off during planning and aren’t sure of the way forward, these principles can give us that oh-so-valuable common ground. When we have differences in opinion around a particular decision, these principles can help us weigh multiple ways forward. Next we will apply the test of time, refine and keep finding ways to do better as a team.
p.s. thank you, team!
Everything here was a collaboration across our team and included all disciplines from initial ideation to the final product. I can’t take credit for any specific part of this work, but I wanted to share our outcome and lessons learned in case it proves helpful to any other teams taking on similar projects. This is definitely work that cannot be done in a vacuum and requires input from across the team. I’m grateful for the team I’m a part of, and wanted to take a moment to brag about the awesome folks I get to work with. Thank you, team, for embracing the chaos and pouring passion into this work!
And, last but not least, a huge thank you to our Content Design team who gave the work underlying logic and tirelessly iterated to achieve a high level of quality.
Cheers!
