“A design system is like a pet. It’s easy to like the idea of having one but if you do go ahead and pull the trigger you are taking on a big responsibility,” says Apurv Ray, a design strategy lead. “When it’s a young design system it’s great to play with it, teach it new tricks by adding new components, and it doesn’t take up a lot of your time. But as your design system matures and grows it needs more and more of your time and you’re responsible for anything it breaks. It will always be there with its puppy eyes acting all innocent but remember you’re the one who built it and you have to live with your decisions.”
With more and more organizations ramping up their efforts to build and maintain design systems, how can designers contribute to being responsible “pet owners?” Design systems, by nature, are a collaborative effort, and designers are one part of the equation. What do design systems mean for the role of the designer? Are there specific skills that are helpful for designers to hone as they work on these projects? What activities are designers doing as part of design systems and what contributions do they make?
As part of our ongoing guide to successfully creating a design system, we surveyed 12 designers with experience on design systems and spoke to a variety of experts to learn more about the role of the designer within these projects.
Evolving the role of the designer
Design systems are quite literally creating new, specialized roles for designers as dedicated design systems team members. Organizations like Shopify, Airbnb, and Salesforce are investing in and hiring designers to focus on their design systems. Even at organizations where resources don’t allow for dedicated teams, designers are working on and championing design systems as side-of-desk efforts.
A Design Language System partnership meeting at Airbnb, where designers from around the organization can participate in sharing feedback and systems thinking with the design systems team. Image by Airbnb.Some people have fears that the proliferation of design systems may limit designers’ creativity, and reduce the role to one of assembly. In the most extreme scenarios of this concern, designers simply become interface assemblers, building pages and interactions from predefined blocks and components. Ideally though, design systems divert the designers’ efforts to solving strategic problems, and getting creative on the truly challenging and unique use cases and patterns. Design systems can also provide constraints to innovate within, and radically reduce duplication of effort.
Gavin Harvey, a platform design manager at Google, sees a future where design systems will start to automate and shift parts of the designer’s role. “That’s what makes it so interesting – it’s not just an evolution in terms of making a standard process more efficient. Design systems are a precursor to a revolutionary change in how we design software. The process of building software is about a lot more than assembly, we need designers to look beyond components to usability, task flow, and how the interactions are driving users towards success.”
The skills needed to work on design systems
While full design system automation is not the reality for most teams today, many designers are finding that their skills and day-to-day work are being shaped by their contributions to design systems projects. As design systems gain traction, what are the skills that designers need to foster in order to successfully contribute to these projects? As roles on specialized design systems teams become more common, what skills should interested designers be working on?
In our research, several people highlighted the difference between being an early builder of a design system versus a steward of a more mature system. In the early stages of a system, designers will play more of a craft-oriented role that is focused on creating components and documentation. Over time, this will shift to a stewardship role of supporting the continued growth and evolution of the design system.
How far along a design system is in its maturity will change the degree to which the following skills are flexed. However, the designers we surveyed highlighted the importance of all of the following skills:
Collaboration skills
Design systems won’t work with a lone wolf approach. There needs to be a team effort, and designers need to be collaboration oriented. This enables them to work with developers to articulate, document, and name the system, to understand the needs of the system users, and to contribute to roadmapping the design system’s evolution with product managers. For UX designer Vivian Chung, this means having a “team-oriented approach: you have to be able to collaborate and co-design with other designers, devs, marketing, etc. You need to involve others as early as possible so we can understand their needs and building that into the design system early leads to greater likelihood of the system’s survival and adoption.”
Patience and passion
Complex projects like design systems require an investment in the long game and a willingness to stick with the project even when things get challenging. The themes of tenacity, patience, and personal passion came up over and over as crucial skills for driving these projects forward. Lisa Guo is a product designer at Sensibill, and as she puts it, “Design systems are not for the faint of heart!”
Systems thinking
Design systems demand that designers flex their strategic and systems thinking skills at several levels of magnification. At the brand level designers need to be able to align components and UI into a coherent theme, that work with the overall direction of the brand. This includes all aspects of UI such as weight, color, spacing, and typographic styles. Designers also need to be able to see the bigger picture of the design system and how it serves the organization, for example by anticipating potential use cases and evolutions. Design systems require an ability to “disconnect from the immediate problems of today, looking beyond a single feature or a single product… a system is much larger than any one thing,” says Chris Bettig, design director at Youtube.
Understanding of development and code
Hybrid design/development skill sets really shine in design systems. At a minimum, effective designers are able to talk to developers and collaborate efficiently by building trust and respect. Andrew Couldwell, a designer who has written a book on his experience with design systems, says that having a hybrid skillset is his secret weapon on design systems projects. “Speaking developers’ language will get you really far. And being able to think systematically like a developer is important; for example, being very strict about how many fonts you use.”
Project and product management
It can be easy to get caught up in building a design system for the sake of it, rather than seeing the system as a means to an end. Product management skills, like understanding the problems the system will solve, being able to chunk out the work into a manageable and clear plan, and leveraging research in the right way are all ways that the designers we surveyed contributed to their design systems work. “It’s really important that you actually understand what the problems you are trying to solve are and for who, and that you make sure it’s not design for design’s sake or with only other designers in mind. You also need to be able to make solid business cases for the decisions being made and keep faith even when the public reacts negatively,” says Bettig.
A designer’s day-to-day activities on design system efforts
The day-to-day activities that designers take on related to design systems are varied, and span from the already familiar to some specialized tasks. Again, the maturity of the system will have an impact on the proportion of time being spent on certain types of activities.
Regardless of team structure and the maturity of the design system, there are some key activities that repeatedly came up in our research:
Infographic by Andreea Mica.Designing components
Not surprisingly, all of the designers surveyed mentioned their role in actually designing components. Designers working on design systems are often defining how components like buttons, form fields, and radio buttons are visually styled and presented, along with their interaction models. Adam Glynn-Finnegan is a senior product designer at Airbnb whose role includes being “an active contributor to the design system, scoping, and creating new components.”
Writing documentation
Connected to creating components is writing documentation for the design system. This can be at the component level, or more broadly, can cover things like design principles, accessibility guidelines, UI states, and interactions. In addition, several people stressed the importance of documenting the decisions that led to how the components are built. As part of Soojin Cha’s role as a product designer, she spends time “building design system pages including item definition, usage, the do’s and don’ts or rules for the component, accessibility, UI states, and the style guide.”
Advocating for the design system
Designers’ roles on design systems projects often encompass the messy, human aspects of gaining support for the design system and demonstrating its value. It goes beyond the work of crafting components and interaction models. This includes presenting, demo-ing, and gently reminding team members to use the system, as well as “communication with clients and shareholders on the impact and advantages of the system,” says Samuel Yeung, a UX/UI designer and UI developer.
Collaborating with developers on creation and adoption
Design systems require close-knit collaboration between designers and developers, both in building the system and in maintaining it. Working together to define naming conventions and ensuring that design assets and code are staying up-to-date with each other can only happen through this collaboration. This is another part of Cha’s role, “collaborating with developers on which items in the design system can be built as a component each sprint, by deciding which part is reusable, worth ‘component-ifying’ as well as how we’re going to name the component. Once developers create components, I access the code in reactJS (to check naming and design token coverage) and UI representation on browser.”
Governing the system
The responsibility of stewarding the system as it evolves can fall to designers. For example, vetting contributions from other teams, or being the point person for documentation and owning design files. This also includes providing support and guidance to consumers of the system. For Ray, who shared his design system pet analogy in the introduction, this was part of his last role. “I was part of the design system governance body which helps to maintain the system and decides which new patterns make it in.
It’s hard, but worth it!
Design systems come with a distinct set of challenges. Getting buy-in and the right governance process in place to support the project takes a lot of effort. They are also very time and resource intensive, which can add to designers’ already heavy workloads. Finally, design systems teams are constantly navigating the right balance between how strict and uniform to make the design systems and its use, with how flexible and ‘open to evolution’ they should make it.
Despite these challenges, the ways in which design systems stretch our skill sets, and the uncertainty about how our roles will change, many designers feel optimism and excitement about the potential of design systems. These projects can bring so many benefits, from aligning teams, to reducing duplication of effort and menial tasks, to improving accessibility and consistency of brand and experience across products. You’re solving problems and helping people across an organization to work faster. There’s also the satisfaction of seeing the design system propagate and the consistency it brings. At Wealthsimple, Senior Product Designer Eric Akaoka has seen this first hand. “A well-maintained design system has the capacity to greatly speed up both the design and development processes by taking advantage of reusable components; it makes handoffs so much easier; and it even allows designers to skip low-fidelity wireframing where appropriate.”
Most exciting of all, designers get to see the impact of their work across an organization, at scale. As Samuel put it, “being able to see your work getting adopted across an entire platform is so exciting. You can see the impact that has been made for both developers and designers! It’s easier for developers to build pages faster, and it allows designers to have more time for critical design decisions instead of ‘how big should this button be?’”
Continue to part three: Building Accessibility into Your Design System.
Thank you to all of the people who participated in research, interviews and surveys, and shared their deep knowledge and expertise. For more on design systems, download the Adobe and Idean e-book ‘Hack the Design System.’
Header illustration by Andreea Mica.