Design Systems Handbook
05Expanding your design system
More than the sum of its parts
by Marco Suarez and Sophie Tahran
As mentioned in Chapter 1, early software programming was limited by the speed and capability of hardware. But over time, hardware became increasingly faster and cheaper, and the inefficiency of software became even more noticeable.
As product teams are expected to move faster and faster, speed and efficiency is an ever-growing concern. However, design systems enable teams to find speed, efficiency, and consistency through reusability. As you experience these benefits, other areas of inefficiency that were once unnoticeable become glaring.
Alignment is often one of those areas. Aligning team members, teams, and a company around things like direction, expectations, and quality is critical to moving and scaling quickly. Without alignment, friction increases and velocity slows—something product teams cannot afford.
A design system is a fantastic way to create alignment around interface design and implementation. But beyond components, teams can build alignment with vision, design principles, process, and voice and tone.
Vision
A vision statement moves everyone toward a common destination. Vision is your North Star. It’s a reusable statement that gives context to your work to help your team stay on track and in sync. A vision statement declares what your team, product, or company is attempting to achieve and why it’s worth achieving. It’s comprehensive yet memorable, elevating yet attainable.
Vision creates clarity, making non-essentials easier to identify. Momentum is far easier to build once everyone knows where they’re going and why.
A few years ago, the Starbucks product team was reorganizing and needed to clarify—for themselves and the entire company—their reason for existing. In a corporation as large as Starbucks, it’s vital to clearly and succinctly express the purpose and value of your team.
“We create digital products that make our customers happy and our partners proud.” This statement became their rallying cry. The vision grounded decision-making to improve the experience for customers and partners (baristas, managers, office employees) as well as achieve business goals.
It helped us create a system that, we think, is clear and scalable across the various global markets we serve while still being unique.
Jason Stoff
Starbucks
Informal vision statements for discrete projects also became useful. “Clarity first, then elegance if possible,” was the guiding principle of a recent redesign.
When we had a few design options for a given feature to discuss as a team, we referred back to our goal of clarity at the expense of all else, then worked to find a way (if possible) to make it elegant.
Jason Stoff
Starbucks
Nick Grossman of Union Square Ventures gives several examples of how a North Star impacts company alignment in his talk, “Purpose, Mission & Strategy.” One example he gives is about Foursquare’s product focus moving from the consumer app to the direction of being a location data platform that could power other applications. This was a massive shift in direction. It was the vision “making cities more delightful” that provided a much-needed North Star for employees to accept and embrace this new model. Grossman says, “It was a watershed moment for aligning the company around a new direction.”
Creating your vision statement
To create your vision statement, describe what your team, application, or company should look like in 2 to 5 years. Does the culmination of your present work add up to that description? Is that description worth spending the next several years realizing? If not, adjust your aim. Maybe you need course-correcting or maybe you need to aim higher.
It’s helpful to assess your progress as a team. At Etsy, we held retrospectives after every major launch. A retro is a meeting to celebrate the things that went well and identify the things that didn’t for a particular launch. It’s also an opportune time to check your alignment with your vision.
Design principles
Principles are important for design systems primarily for describing how it was created, and how the makers of it would intend it to be used.
Rich Fulcher
Designers often operate with their own implicit set of standards to evaluate the quality of their work. But when teams grow, explicit standards become necessary to unify all with a shared language and a guide to evaluating the work. How do you define good design? How do you know what’s essential and what’s arbitrary? How do you know when something is ready to ship? How do you know if you’re on the path to achieving your vision?
Figure 1. Lyft’s design principles build upon each other.
A system of principles can provide the answers. Design principles act as a reusable standard for designers to measure their work. They replace subjective ideals with a shared understanding of what design must do for users. Just as guardrails keep you safe and on the road, design principles keep teams on the path to achieving their vision.
Setting the groundwork for your principles
Creating your principles can seem like an overwhelming task. Before getting to work, establish a set of goals your principles must achieve. Here are a few examples:
- Should they describe the output or process?
- Should they be a sentence or a phrase?
- Who should they benefit?
- How should they be used?
Begin your work with a large amount of raw data collected from your team through discussions, survey, or interviews. Then, work through a process of combining, refining, and evaluating until you’ve arrived at a comprehensive and distilled set of principles. Etsy has a great article about their own principles creation process.
Posting your principles on the office walls, creating a computer desktop wallpaper, adding them to your design systems site, or printing them on notebooks are all great ways to keep them top of mind. Task your most senior designers with using them in every design critique to ensure the new language is adopted. This new system of language will become a vital part of your design system because it creates alignment, enabling your design team to scale.
Disagreements happened less and less because we were now aligned.
Steven Fabre
InVision
While designing InVision Studio, the design team realized far too much time was spent debating solutions. So a set of principles was drafted to help navigate the complexity of designing software. These principles were used to guide individual decision-making, help reach agreements faster as a team, and acted as a transcendent standard to create harmony and cohesion throughout the product. The principles were modified over time as Studio evolved and needs changed, but these principles aligned the team and helped them keep the velocity they needed.
Process
It is only in the repetition of the craft that he or she masters the art.
Samuel Avital
mime
Providing a clearly defined process for how user experience problems are approached and solved builds alignment within product teams. This consistency helps to remove friction and build velocity.
Process guide designers through a series of clearly defined milestones, each with different objectives and deliverables. These milestones act as interdependent components that, when used together, improve the probability of arriving at optimal solutions.
A repeatable process offers several key benefits:
- It provides clear expectations within each step, allowing you to focus solely on the tasks at hand without worrying about what to do next
- It builds data within each step that can be referenced and used to inform future iterations or course-correct low performing launches
- It creates an understanding of the roles and responsibilities of each team member involved—bringing the right people in at the right times, making everyone’s involvement beneficial to the quality of the output
A repeatable process will ensure progress is smooth, efficient, and predictable while also improving the quality and consistency of your work.
At InVision, our process has 6 steps:
The InVision design process.
- Understand: First, we use customer research and insights to gain a deep understanding of the problem space and identify how it aligns with our business goals. Product management leads this phase and works with the research team to conduct interviews, gather data, and perform competitive research.
- Explore: The design team then ideates and explores possible solutions. They work with product and research teams to produce wireframes, core flows, and user journeys.
- Define: Once a potential solution has been identified, the product team works to align everyone on what success looks like. The output of this work is a problem statement and defining measurements of success.
- Design: Refining the solution is design team’s responsibility. They work with the research, product, and engineering teams to develop core flows, prototypes, and identify tech requirements.
- Build: Engineering translates the design and prototypes into reality. The product team orchestrates quality assurance, support documentation, and the sales and marketing teams.
- Learn: At this point, we observe the effectiveness of our launched solution. The product team collaborates with the research, design, and engineering teams to gather insights to measure against our success metrics. We use these insights to inform our next steps and start the process over again.
Learn design thinking
Immerse yourself in the Design Thinking Handbook—a primer to help you spark a design transformation
Voice and tone
Sophie Tahran, InVision’s UX Writer, weighs in on the value of writing guidelines—and how to create them.
Great writing is an essential part of great design, but even in-house UX writers aren’t able to edit every single word in a product. That’s where writing guidelines come into play. A source of truth promotes good communication, credibility, and consistency—no matter who’s writing content.
Every writing guide should cover both voice and tone. While your voice generally stays the same (like a personality), your tone shifts according to the situation (like an attitude). Both are an essential part of communication—and you can’t ship a product without effectively communicating it.
Because voice identifies who we are and defines our relationships, building writing guidelines early on is one of the best ways to gain credibility with your users. They’ll begin to recognize you, and know that they can trust you.
Writing guidelines also help evolve your voice. Just as your personality matures over time, your voice will evolve as your company grows. Guidelines define what you should sound like right now, so when you do steer away from them, you’ll know that you’re doing so intentionally. (“I’ll just throw an emoji in this subject line,” turns into, “Hey, let’s test how emoji perform and see if they’re worth adding to our writing guidelines.”)
Without thoughtful writing guidelines, teams risk allowing their voice to be determined by patterns instead of users’ needs, and end up making decisions solely based on what they’ve done in the past.
Building writing guidelines
Start with an audit. Talk to people across (and outside) the company: designers, writers, support agents, co-founders, users, etc. Your goal is to get their impression of the company’s personality. Consider not only conducting interviews, but also creating mood boards—visual collections of colors, people, places, and more—to represent more emotional, intangible qualities.
Define the findings. Have a core group of people, normally writers, narrow down the best words to describe what you found. Is your voice human, real, and bold? Or is it kind, experienced, and empowering? Take into consideration not only how you sound now, but also what you aspire to be and avoid (“InVision is never clickbait-y or pandering”).
Tone can be more difficult to hammer down. It shifts according to the situation, so it’s sometimes more helpful to provide direction than it is to identify characteristics. State your key priorities, like, “Always provide clarity,” and, “Consider the user’s emotional and mental state.” This is also a good place to determine whether humor has a place in your writing, and where you fall on the formality spectrum.
Once you’ve identified the more nebulous aspects of your voice and tone, carry that same thinking into the tangible. What should your different channels look like? Do you use sentence case or title case?
You may find that you have a need for multiple guidelines—voice and tone within your design system, a company-wide style guide focusing on words only, and brand guidelines that also encompass visual design.
Get buy-in. Potentially more important than building voice and tone guidelines is encouraging everyone to follow them. Anyone who works with content should have a chance to sign off.
Find a home. Your guidelines need to be easily found and integrated. If you’re building voice and tone into your design system, follow Mailchimp and Shopify’s lead in giving writing its own section, separate from components, principles, and layers. You can also go one step further by creating a separate list of copy patterns (like Mailchimp did) for grab-and-go words.
Develop. Writing guidelines are living, breathing documents that require maintenance as your company grows. From the start, use an editable Paper or Google Doc—and better yet, schedule monthly check-ins.
Invest time in writing guidelines from the start. Most companies have more people representing their voice than you’d expect, from product designers to support agents. By having a source of truth—and creating it together—you can offer users a better experience.
Conclusion
When you have guidelines that are in conflict, then you have to go back to the principles and decide which are more important.
Lori Kaplan
Atlassian
Just as design is far more than the sum of its parts, your design system can serve as far more than a components-only guide. Vision, principles, process, and voice and tone expand your design system into additional areas where reusability can also increase speed and efficiency.
Design systems have changed the way we design and build applications—so much so that we must look at the future of design through the lens of systems. In a future where design systems gain wide adoption, design could take on many new, exciting forms.
The Design Better Podcast
Join the world’s best designers on the Design Better Podcast to explore product-driven companies
