From fragmentation to triumph: The game-changing potential of design systems
Navigating the path to adoption, overcoming roadblocks, and cultivating a collaborative design ecosystem
Here's what you'll learn:
Adopting a design system requires a significant mind shift
This is not a one-size-fits-all approach
Continuous iteration, collaboration, and communication are key
and much more…
Let’s dive in…
In today's landscape, providing customers with an intuitive and seamless interaction across every touchpoint, spanning all devices, is not just a luxury but a necessity for survival. Failing to prioritize a successful CX and intuitive experience jeopardizes the very existence of a brand in an unforgiving marketplace.
All teams, both product, and marketing, need to start acknowledging the idea of uniting their effort under one experience, whatever it takes. In last week’s Shapping Design newsletter, we dove into the fact that design systems that are often misunderstood and their success or failure depends on various factors.
Let’s unpack this a little… or a lot 🙃.
First steps, first
Many designers sell or advocate their 1, 2, 3 step approach to a design system adoption strategy.
I call BS.
From having designed, built, scaled, and implemented numerous design systems in my career across small/medium to enterprise companies with over 700+ products, adopting a design system is not a one size fits all approach.
Trying to convince you otherwise is well… not cool.
Alberto Vitullo explains that the first roadblock to overcome is a change of mindset.
In companies where the value of design, designing at scale, and customer experience isn’t fully understood, concepts like collaboration, consistency, and unified experiences are rarely well implemented
Leadership's active involvement is essential for the successful implementation of a Design System. They must lead the way, serving as the brain that guides and directs the organization, rather than being influenced by others.
When a company embraces a Design System, it becomes crucial to transform the culture of relying on personal preferences, guesswork, and subjective interpretation, regardless of the challenges it may present.
See a design system like a dictionary, with those words you can write any sort of poetry ✍️!
A hard pill to swallow for most but… Teams actually have a choice to use a system. We need to make it easier for them to use it than not and allow them to see the value in this system, in order for them to accept it.
Experiences that match content, functionality, and a coherant brand presonality to user expectations, tasks, and context across touchpoints. — Forrester
Why? Why? Why? Why? Why?
You’ll get asked a lot of questions and will have to repeat over and over and over again your mission and your why. Here are 3 ideas to consider in your why.
Cohesive customer experience
Less time is spent designing the same solutions over and over again. More time to focus on real UX problems.
A vision everyone can stand behind - marketing, brand & product. Successful systems require both fixed and fluid elements of expressions.
Ok, here are my two cents on the why behind a design system:
Unity, not conformity.
Unifying the portfolio experiences.
The second roadblock: Adoption
Trying to sell you “the one way to adopt and think” or “how to sell a design system” is not the proper way to go so instead, I’ll explain some of the important pieces to consider.
A plethora of online advice often emphasizes the importance of starting a UI audit or securing executive buy-in when embarking on the path toward developing a triumphant design system. Rather, opt for constructing a modest yet practical foundation, swiftly delivering value, and continuously refining what proves effective.
Defining the foundations is the first step of the process, and just like a house, it is crucial to have solid foundations if you don’t want the system to collapse later on.
A no brainer right?
One would think so… yet, many jump in and create a button, move it to a Figma component, and think they created a design system 🤦.
Most online articles will tell you something like this:
Unveil the brand's design language DNA
Perform a thorough UI assessment
Outline design tenets
Construct a library of components and patterns
etc. etc. etc. etc.
In reality, the first step you should define is what you actually need. Maybe you do just need a Figma component library (no, that is not a design system) or, maybe you need something more robust with guidance and examples or maybe you need a full-blown system with a website, guidance, documentation, office hours, etc.
Things to consider in your quest 🧙♂️
You need to convince a wide range of people — from the bottom to the top of the chain of command — that it’s worth it. In order to evade encountering constant rejection, it is imperative to master the art of articulating the worth of design systems.
Take baby steps.
Anticipate and be proactive.
Identify the problems you’re trying to solve.
Small yet impactful designs and build stuff that gets people excited.
Make friends (so important). Build a following of people excited to work with you.
Name it. Brand it. Make a T-shirt for it.
Adjust your pitch to your audience.
Earn trust and support. Trust is earned… it is not forced.
Be an advocate and a guardian. Lead with inspiration.
Creating a design system is a process and it takes time, effort, and money. It’s a long-haul game but well worth it if done correctly.
Find your partner(s). Sell a vision that everyone can buy into. Build something small and useful: Big bang (all at once) or, incremental (over time)?
Design is relationships. Your design system is only as strong as your relationships with the teams who use it. A good design system won’t be designed and built by only a few people, it will be a collective effort.
Third roadblock: Who, what, how?
Teams adopt systems at different rates. New products are easy: use the system as a foundation to achieve complete adoption from the start. For existing products, it’s more complicated.
1️⃣ Understand what you are about to get into
Who are your users? Creating a comprehensive map of the individuals affected by the product will assist in considering all user groups and identifying key leadership teams that need to be aligned and supportive.
What teams could use your design system?
What products are being worked on? Who works on it, and how often do they deploy updates? What platform do they use?
What I’m I building? Are we creating a full design system? How many products are expected to be adopting this system? Are we doing a multi-brand design system? If so, this opens up a whole other conversation.
2️⃣ Plan your system adoption process
No, you can’t just wing it. You must have a plan in place and yes, that plan can change along the way.
Adoption plan: Big bang approach or through small incremental phases. Identify every phase of the adoption process. It is also a great idea to map out:
When, Goal, Potential issues, Tools, and Product verticals involved
Users: What exists and what will you need to create? Consider very carefully what they need or require to be successful in their jobs. Every gap you fail to fill is a missed opportunity and a potential loss of confidence. Are there any gaps in how you offer your users support?
Support: What do designers need to get started? What designs, components, examples, or documentation are required to support them?
The first component: everybody and their moms have an opinion on this but there is no one-size-fits-all here. There are ideal situations, but every product is unique. Providing your stakeholders with a strategy takes the guessing work out. You can illustrate the process of adoption by portraying the journey from an initial commitment to complete adoption through incremental accomplishments based on specific criteria.
Nathan Curtis - Progress Through Achievement Levels
3️⃣ Your first users
The first team to adopt your design system will be the hardest but, they will become your biggest advocates.
Take advantage of every single opportunity you have to get them excited and stand behind your vision and mission 🚀.
Team kickoff: Identify key contributors and collaborators.
Create a Slack channel: Cause we really do need another one right?! Jokes aside… communication is a big reason behind launching and failing.
Collecting feedback - early and often: Office hours, co-working sessions, etc.
Co-create your documentation: By designers for designers.
Work with your garage door open type of mindset: Anybody and everybody should be able to see the current as-is and what is coming down.
Every win counts: Showcase the great work your colleagues are doing.
Contribution model (this will be an entire newsletter): Allow designers to contribute back to the system.
4️⃣ Observe. Reflect. Make. Iterate.
A design system is NEVER completed. Your goal is to ensure continuous iteration and improvement throughout the journey. It comprises three iterative stages: Observe (Understand), Reflect (Explore), and Make (Materialize), each playing a crucial role in crafting user-centric solutions.
You as the design system team should be committed to helping members of the community be successful.
Things that have worked great for me in the past 🤓:
Work with your garage door open type of mindset. An opportunity to see the tasks from the Design system team, what they are currently working on, and what is on deck next. A great way to get designers, developers, or PMs to ask for updates, changes, and new components.
Carbon and IDL bi-weekly design playbacks: You’ve got some work in progress and you’re ready to open it up and share it with a broader audience for honest (and caring!) feedback. Sign up to share, or come along to see other work in progress and learn that way.
Design system office hours: A once-a-sprint meeting for teams building with your design system to ask questions, learn about best practices, and bring up things the design system team can do to make their jobs easier.
Design pin-upsContact us to schedule: Put your screens up in Figma (or what you use) and step through the flow and page designs with the Design system designers. Great for assessing the overall flow, page layouts, the best choices, and use of components, and content—everything from the big picture to the smallest detail! Usually two or more hours.
5️⃣ Communication
This is where you can never communicate enough. Overcommunicating is actually recommended.
Consider how our users are aware of the product, the new components, or updates. Takes this and turn it into a communication strategy.
Bi-weekly Slack blasts or emails to the entire organization.
Make sure to highlight the achievements as everyone loves to be recognized.
Make it live.
Final words
The journey may be arduous, the roadblocks daunting, but the rewards are immense—a harmonized ecosystem that empowers designers, streamlines workflows, and delivers unparalleled value to users. So, dare to redefine the rules, break free from the shackles of fragmented experiences, and embark on the transformative voyage of adopting a design system. The future of design awaits those who are audacious enough to seize it.
Pascal & Mitchell
Links to geek out on:
Hey, Mitchell & Pascal here! Thanks for checking out this week’s free edition of the Shaping Design newsletter. We strive to send you the best tips and our very own unique perspective each week. Subscribe to get each article!
If you enjoy this newsletter, we’d love to know!
Thanks for sharing, Pascal. I really love your ways of demonstrating the nuances and challenges when adopting a design system.
I wonder if you have any suggestions when applying a built design system (Material Design, Ant, Salesforce, etc.) to your own product? How to choose one? One of my challenges is that I could not find a "one thing fits all" system and sometimes have to detach the example component to make additional edits - which I know is not ideal.