Often, it can be difficult to articulate to others something that you know intuitively. As designers, it is our job not only to create better user experiences but also to explain why they are better, in the simplest terms possible. More often than not, we are not the decision makers within an organization. To see our ideas come to pass, we have to advocate for them to the decision makers. We can’t just be convinced of the value of our ideas; we have to show that value to others.
Design systems feel intuitive to designers. Perhaps this is a byproduct of being problem solvers. We naturally seek out problems and ways to solve them. Design systems feel like a natural solution to the many obstacles that come from working on projects at scale.
Whether formally or not, we have all designed systems with the intent of making our jobs or lives more comfortable and enjoyable. Tapping into this idea is the first step in communicating the value a design system can bring to an organization.
Defining Why Design Systems Are Beneficial
Every organization is unique, both in its offerings and its challenges. Communicating the value and benefit a design system can bring in a relatable way is critical. Approach it as you would a product problem. The first step is to understand the organization, its goals, and challenges, as well as individual roles and the parts they play.
What are the goals of the organization? How can you align user experience goals with those of the broader organization? Who will benefit most from a well-defined system? These are all essential questions to answer.
Three Dimensions of Value
To begin answering these questions, let’s examine the value of a design system in light of who will benefit and how. Generally, you can break it down into three target audiences: the employees of the organization, the users of the product, and the organization itself.
Selling Value at the Employee Level
We will start with the benefits to employees first, because, let’s face it, making employees’ lives comfortable and enjoyable has benefits for all three target audiences. We surveyed 82 people with questions relating to their skills, personal and professional goals, as well as what frustrates them most in their work. We used this data to build simple personas that will help you to understand how each role benefits from a design system.
Designers
Designer Persona
A.K.A. | • UX designer • UX engineer • Interactive designer • Product designer • Multimedia designer |
How I see what I do | • I make sure we are solving the right problems. I use data to understand user needs and motivations as a way of delivering the best experience possible. |
My core skills | • Design • Research • Communication • Collaboration • Problem solving • T-shaped skills: broad knowledge of design concepts with deep knowledge of certain disciplines (e.g., interactive design, research, visual design) |
My personal goals | • Continue to learn and push the quality of my design solutions • Work on design solutions that have a positive impact on people • Keep up with design trends and technologies to remain relevant in the industry |
My professional goals | • Help others see the value and effectiveness of good design • Solve user problems • Create solutions that make a difference in people’s lives • Bring together user experience and visual appeal |
I spend most of my time on | • Meetings • Design discussion/discovery • Documentation • Defending/advocating for my design solutions • Communicating with other teams to better understand the problem |
Things that frustrate me | • Meetings • Out-of-date documentation • Lack of understanding or support for the value of design • Vague requirements • Lack of support/trust from product owners • Pressure to deliver quickly without proper research or discovery |
An established system gives the design team access to styles, shared components, and implementation guidelines. This single source of truth helps the team to work independently of one another while ensuring consistency. Shared design documents allow designers to quickly and accurately put together high-fidelity designs.
Design systems also give designers the opportunity to step outside of their traditional toolset and create prototypes in the browser. Doing so enables them to see what will be in production instead of the “ideal world” within a design tool. Some design systems make components available in the browser, allowing designers to quickly and easily change attributes and behaviors without knowing how to code. Other systems require the use of Git and running the project locally to create prototypes. Designers can quickly learn how to do this on their own or work in tandem with an engineer. Many designers are getting comfortable with component wrapping and styling, learning how to handle these changes without the aid of engineers. A design system brings designers closer to the final product earlier in the process, allowing them to test solutions and iterate faster.
Design systems can make space for innovation and creativity. How can devoting time and energy to a design system make a design team more innovative and creative? It may seem counterintuitive, but, in the end, a well-thought-out design system buys the team time. Designers will have time to dedicate to exploration and idea generation rather than to solving the same set of user-experience problems over and over again. The design team is now in a position to do more user research, explore user journeys, and investigate ways to make the existing experience more intuitive and competitive. The organization, its user base, and the design team all benefit from this ability to dig more deeply into the product.
It will be important to emphasize this, as there will be a trade-off in the beginning. It could potentially take a significant amount of time to establish the design system. Stressing that this is temporary and that the team stands to gain that time back plus some can help soothe these concerns.
Engineers
Engineer Persona
A.K.A. | • Support engineer • Front-end engineer • Web developer • Software engineer • QA • Back-end engineer |
How I see what I do | • I listen to problems and solve them. I troubleshoot all the things and automate everything possible. I create, support, and expand upon solutions. |
My core skills | • Development • Communication • Collaboration • Problem solving • T-shaped skills: broad knowledge of programming and development with deep knowledge of particular languages or problem spaces (e.g., infrastructure, databases, etc.) |
My personal goals | • Keep up with ever-changing tech processes and requirements, to remain relevant in the industry • Encourage mutual interest and respect between collaborating roles • Deliver useful things • Use programming as a creative outlet and get paid for it |
My professional goals | • Minimize customizations while meeting user and business needs • Minimize risk and technical debt • Build scalable, maintainable code |
I spend most of my time on | • Communicating with product managers, project managers, designers, and clients • Clarifying requirements • Meetings • Setting up dev environments • Learning something new for a project I am working on |
Things that frustrate me | • Meetings • Maintaining documentation • Complicated dev environments • Lack of transparency across departments/teams • Bad requirements and lack of discovery • Missing assets |
The design-to-developer handoff is an additional source of frustration for many. Designers often have to create detailed specs, such as redlined designs1, for every design handed off to a developer. Done manually, this is a time-consuming process. With an established system, design specs remain consistent and can be automatically documented and generated. Developers can use these guidelines as a reference during the implementation phase, cutting down on the need for a back and forth with designers. With detailed documentation, developers will be able to copy the code for the component they require and move on.
Product
Product Persona
A.K.A. | • Product owner • Product manager |
How I see what I do | • I work with executive leadership, designers, engineers, and our user base to determine the features that will fulfill the vision and needs of the product. I solve everyday problems. |
My core skills | • Communication • Collaboration • Research • Problem solving • T-shaped skills: broad knowledge of design, engineering, and business concepts with deep knowledge of their particular industry and user base |
My personal goals | • Continually learn about new technologies • Improve my ability to see the bigger picture and direction • Improve my ability to communicate and gain buy-in from key players |
My professional goals | • Solve customer problems while propelling the needs and goals of the business • Understand my users better than anyone else • Understand all the players (design, engineering, sales, executives, etc.) better than anyone else • Understand my industry better than anyone else |
I spend most of my time on | • Product discussion/discovery • Reviewing data • Meeting with customers • Communicating with other teams to keep features and improvements coming |
Things that frustrate me | • Lack of understanding or support for valuable features • Inability to work directly on features or problems (i.e., contribute code or design) |
It isn’t uncommon for product managers and developers to outnumber UX designers at an organization. This situation can sometimes cause tension and, potentially, trust issues, as UX becomes a “blocker” for improvements. As an example, imagine that a product manager has an idea for a feature but the UX team has other priorities. Instead of waiting, the product manager pushes ahead with an MVC (minimal viable content) that contradicts existing patterns. The instinct from UX can be to put their foot down and say, “everything must come through us.”
Well-documented usability patterns and usage guidelines make it easy for product managers to make educated decisions without the burden of UX oversight. A design system does the heavy lifting by making common usability patterns, usage guidelines, and defined styles available at any time. The ability to cross-reference the details of an interface or interaction with those generally used across the application can save hours of time for UX and product managers.
Sales
Sales Persona
A.K.A. | • Sales account manager • Sales representative • Solutions architect • Sales admin • Account manager |
How I see what I do | • I build relationships with people. I make their lives easier by understanding their needs and communicating that back to the organization. |
My core skills | • Communication • Good listening skills • Product knowledge • Prospecting |
My personal goals | • Deliver what customers really want and need • Money is not the most important thing, but it is a motivator for me and my work. • To be liked, respected, and recognized by my peers |
My professional goals | • Solve customer problems while propelling the needs and goals of the business • Dedicate myself to ensuring my client’s success • Make and exceed my sales quotas on a regular basis • Achieve revenue targets |
I spend most of my time on | • Client calls and meetings • Logistics for meetings • Demos • Communicating with marketing and product about ways to increase sales and make the product more valuable to the customer |
Things that frustrate me | • Waiting to get answers to customer questions from product or engineering • Lack of urgency internally and externally • Not having enough time to research and learn |
Marketing
Marketing Persona
A.K.A | • Content marketing associate • Marketing director • Marketing executive • Social media strategist • Brand manager |
How I see what I do | • I work for the organization and the customer. I create a sense of excitement and shape brands through engaging content and targeted campaigns. |
My core skills | • Communication • Good listening skills • Good writing skills • Product knowledge • Market and industry knowledge |
My personal goals | • Maintain a sense of creativity and inspiration in my work • Keep up with the constantly changing landscape of Internet marketing |
My professional goals | • Increase market share • Attract and retain customers • Achieve marketing goals • Build a consistent and compelling brand experience |
I spend most of my time on | • Logistics for campaigns, events, and projects • Market and industry research • Measuring results • Communicating results with the executive team • Understanding the product vision to better represent the brand |
Things that frustrate me | • Lack of urgency internally and externally • When an organization does not follow through on its commitments • Constantly changing targets • Inability to accurately measure results • Impossible deadlines • Not having enough time to research and learn |
In our survey, the sales and marketing groups shared similar goals and frustrations. Both voiced frustration with the lack of opportunity to learn more about the product itself. A design system can be used for onboarding, as it defines common terminology, concepts, and patterns unique to the product. Sales and marketing can utilize the system to learn about and familiarize themselves with the product and organizational language.
Both groups also pointed to a lack of urgency from others as a blocker. It isn’t uncommon for sales prospects to question the future of specific features or request enhancements before committing to the purchase. A design system can be used to quickly answer these concerns and demonstrate to potential buyers the future vision and direction for the product. It showcases the organization’s commitment to continually improving the user experience.
Shared Vision and Language
A good starting point is to emphasize design systems as a language. Each language is unique to the organization and the product. Documenting this language and establishing a clear vision decreases the likelihood of miscommunication and makes it easier for employees across the organization to contribute to better user experiences. The design, product, development, sales, and marketing teams all stand to benefit.
Making this language accessible to all employees increases consistency and empowers all teams to be part of improving the user experience. There is no need for other teams to overstep boundaries or inadvertently work against UX if the design language is available to all.
Note
To learn more about crafting your language, see Chapter 4.
Quick Onboarding for All New Team Members
Whether you are starting on the UX team, joining the engineering department, or beginning in marketing, a design system can be an excellent jumping-off point. It maintains an overview of the application design and terminologies used, while also providing an easy way for anyone to understand the organization’s unique language. For those starting in design or development, readily available components allow you to jump in on day one and contribute.
Selling Value at the Organizational Level
In the beginning, many organizations invest more time and effort into growing features than they do into developing good user interfaces. As designers, it can be frustrating to have a seat at the table but feel no power while in that seat. Pressure to push out results can make you feel as though you are a consultant rather than a partner—a checkbox in a process rather than a driver.
Many of the most successful companies are design-driven or have a deep appreciation for the value good design can bring. A study published by McKinsey & Company2 in 2018 found a strong correlation between how capable a company is at design and how well it performs financially. Apple, Airbnb, Slack, and IBM come to mind quickly. These companies have invested time and resources into design, with design leadership existing in the C-suite.
Unfortunately, this is not a common occurrence. For many of us, design and its concerns in the organization linger in the middle management layer. We have to consistently advocate for design by speaking a shared language.
Speaking in terms of ROI
How can design teams in organizations without executive design leadership effectively make a case for a design system? Work on describing the benefits of a design system in quantifiable terms when selling the idea at the executive level. Many organizations will say that they value user experience, but when it comes down to it, things like the performance and stability of the product are regarded separately and as a higher priority than user experience. Uptime and availability are readily obtainable measurements. It is easy to quantify the return on investment (ROI) for achieving 100% uptime. It can be more challenging to measure user satisfaction accurately.
What does the organization stand to gain from the time and money being spent?
How will a design system increase revenue, customer retention, and productivity?
Select just one of the features and estimate the number of hours it will take to explore, design, and build from scratch.
- Now, estimate the time it would take if you had the following:
Components (design and code, readily available for product, engineering, and UX)
Consistent guidelines and standards, including specs (faster reviews for quality and assurance)
Measure the difference and multiply this number by the total number of features proposed. Some features will be larger, and some will be smaller. Don’t worry about that. We are looking for a rough estimate here. Got it? Good!
Now, multiply the total number of hours by the average designer’s hourly rate.
The result is an estimate of how much time a design system will save and how much money that time is worth to the organization.
There are many ways to show the value of your design system. Finding ways to tie this value into revenue and profit will make a more compelling case. Using the worksheet provided later in this chapter, review your organization’s goals. If a particular feature or feature set represents the anchor for sales and marketing efforts, improving the user experience of this feature is likely to increase retention and revenue. Mapping UX goals to the organizational goals in this way can make it easier to demonstrate the return for investing time and money into a design system.
Get a Baseline from Employees and Users
Establish the current level of satisfaction that users have, through surveys and usability testing. Use a System Usability Scale (SUS)3 template to measure the usability of your product.
Remember: The goals are to highlight the benefits across all user groups. This includes measuring user satisfaction across multiple areas of the product, as well as employee satisfaction with the current system.
Note
For additional information on gathering baseline data, see Chapter 6.
Maintain and Update Data
Have a plan for continued measurement and evaluation.
Compare baseline data from your initial testing with subsequent testing.
Keep track of corrective actions, to ensure they have the desired effect.
Cost and Agility
The need to get to market before the competition has dramatically changed software development. In today’s agile environment, we no longer have the luxury of lengthy discovery and exploration. There is great emphasis placed on speed and cost-effectiveness, so much so that we are often working on discovery, design, and implementation all at once.
There are many ways to cut costs within an organization. It isn’t uncommon for design departments to be the first to feel the pinch when organizations have to cut back. But what appears to provide savings could end up costing the organization a lot more in the long run. Robert Pressman illustrates this point beautifully in his book Software Engineering: A Practitioner’s Approach: “For every dollar spent to resolve a problem during product design, $10 would be spent on the same problem during development, and multiply to $100 or more if the problem had to be solved after the product’s release.”4
Design systems present an opportunity to reduce costs without resorting to layoffs or slashing benefits. Established patterns and guidelines have already been thought out, tested, and used in other areas of the application. Leveraging these patterns will reduce the cycle time from design to implementation and be more likely to provide a superior user experience the first time.
Our experience
Identifying key features or areas of the application that will be improved is one way to quantifiably present value. Pairing work on the design system with organizational goals masks the time involved. You are still putting in the time and effort, but in a way that appears more productive to the rest of the company. Optics are important.
Selling Value at the User Level
Don’t forget the primary beneficiary of a well-thought-out design system: the end user. Delighting users is what will often determine the success of a product. The overall usability of a product, coupled with the benefits it offers a user, is critical.
Happy and more productive employees have more time to work on complex flows and user experience solutions.
Reduced cycle time allows improved experiences to make it into the product faster, increasing feedback and further iteration.
Sales and marketing can appropriately address buyer concerns and questions before users are locked in.
Communication Strategies
Communication is all about balance—a balance between talking and listening, educating and learning. There are many methods and channels you can use to communicate with your team, colleagues, and bosses about your design system. The methods include diplomacy, education, salesmanship, and good public relations (PR). The channels include, but are not limited to, organizational announcements, one-on-one conversations, and updates to guidelines and handbooks. Balancing these methods and channels will give you the greatest likelihood of success.
Diplomacy
Engage with other teams and key players within the company. Most important will be members of product and front-end engineering, as they will be the first to reap the rewards of the system. They may also be your staunchest allies.
Diplomacy is not about politicking or quid pro quos. Diplomacy is about understanding and defining the expectations of both you and your colleagues. Build trust and be flexible. Listen to their needs and make a concerted effort to find the balance between your needs and theirs. Not only will it help ensure support from other departments, it will also help to better inform and shape your design system.
As a part of diplomacy, you’ll have to educate those around you about what it is you are proposing. Don’t assume what others know, or don’t know, about design systems. Practice empathic listening when speaking about your design system. Don’t expect that they have understood what you have said. Try to put yourself in their place and listen from their point of view. Look at their body language and pay attention to the questions they ask. No matter how well you think you are messaging your intentions, they may not be understood.
Use multiple channels to get your message across and get feedback on what others understand from these communications. Use one-on-ones, team meetings, and organizational announcements to advocate how your design system will benefit the organization and its employees.
Education
There are many misconceptions surrounding design systems. Ensuring that you, your team, and the remainder of your organization have a shared understanding of what a design system is will be crucial to its success.
The most common misconception is that style guides and design systems are the same thing. Design systems and style guides do have similar goals, both serve to create a unified and consistent style across an application. However, style guides are just one piece of a whole. They don’t represent a design system in and of itself. A fully realized design system is a language shared amongst an organization. It is composed of the design concepts, terminologies, and the overall approach the organization takes in communicating ideas.
This concept can be challenging to get across, especially for those outside of the design department in an organization. It may be helpful to explain that a design system is a set of connected parts and principles. It will contain the voice and vision for design at the organization. This could roughly be compared to an organization’s mission statement. It will provide the terminology and definitions for UI elements used throughout the product, as well as make available common usability patterns. Once there is a basic understanding of what a design system is, it is easier to communicate the benefits and value it will bring.
Salesmanship: Preparing for the “No”
Preparing yourself for the objections and reservations of others will help you address their concerns and, hopefully, win them over. Be positive, but realistic, about the reactions you are likely to receive.
We don’t have enough resources to devote to this effort. Create a survey to show just how much time employees are spending on fixing UI bugs or how much time developers are spending asking designers to review basic UX paradigms. Show them the wasted resources and explain that the design system will begin to shift these resources to more productive areas.
We can’t stop shipping features to organize. It will never be finished. Recognize that they are right, and it will never be complete, but that’s okay! Improving the user experience should never be finished. You should always be striving for the best product that solves user needs in the most efficient way. Acknowledge the truth of their statement and explain how you can start by building the documentation for areas you are working on now. There is no need to stop the work being done on current features. Simply ensure that, moving forward, all documentation will be done as features are developed.
We don’t see the value. How does this help our product and UX? Design systems focus effort on improving the overall product rather than keeping the focus on redesigning the same features over and over again. Driving efforts toward achieving organizational objectives will, in the end, translate to user experience improvements for the end user. It will align teams using a common language and make design, product, engineering, marketing, and sales all more productive and united. People are more readily able to make autonomous decisions, which means the organization moves faster as a whole.
Good Public Relations!
As you may have already experienced , implementing a design system requires positive PR within your organization. The good news is that design systems have the potential to be PR in and of themselves. Airbnb and Google are excellent examples of this. When you establish a unique design language for your product, people begin to see them as lifestyles instead of just a product they use. They get excited about releases and want to hear about what you are working on.
Many organizations go so far as to open-source their design systems, driving further interest in their product as a resource beyond a service. Good public relations is just one more selling point when trying to get internal buy-in for your design system .
Selling Your System Worksheet
- 1.
What is/are the long-term goal(s) of the organization? Is it an acquisition, going public, etc.?
- 2.
What is the goal of the organization for the coming year? This could be in the form of OKRs (Objective and Key Results), KPIs (Key Performance Indicators), or however your organization tracks and measures success.5
- 3.
What are the current efforts the UX team is making to achieve the organizational goals, both short-term and long-term?
- 4.
Now, look at your answers to 1, 2, and 3. Identify how a design system can support these efforts and write them down. If you are unsure, consult a colleague for insight.
- 5.
Are there specific areas of the product needing work that can be coupled with development of the design system? For example, perhaps you have long settings pages that desperately need to be cleaned up with the use of better spacing, form styling, and sectioning. Work on this area and document the updated spacing, form styles, and sections in the system. Push to have these new usability patterns and styling implemented throughout the product.
- 6.Based on your answers to questions 1–5, who are the people in your organization that would benefit most from a design system? Focus on individual personas, such as a product manager, developer, chief marketing officer, etc. List each persona by title and how they’ll benefit:
Title: How they benefit from the system...
Title: How they benefit from the system...
Title: How they benefit from the system...
Tying It All Together
You need support to make your system successful, which means that getting buy-in before you start is essential. There are three target audiences for a design system: the employees of the organization, the organization, and the users of the product. Approach this in the same way you would a design problem, by understanding each audience’s unique goals and challenges.
Each member of your organization has something to gain from a design system. Designers will benefit from the consistency and availability of centralized solutions. A system will buy them time, allowing them to devote more effort to user experience, research, and exploratory work. Engineers and product managers can gain easy access to specs and assets and can utilize readily available solutions. Sales and marketing can use the system to answer customer questions and demonstrate a future vision to prospective customers.
Use both qualitative and quantitative measurements to establish the ROI of a design system for an organization. Some examples of measurable benefits are productivity, cost savings, sales, and customer satisfaction. It will be important to take baseline measurements and continue to measure results along the way.
You will have to use several methods and channels to communicate with your team and colleagues about your design system. Use the methods outlined in this chapter to further your efforts and gain buy-in within your organization.