The best designers know the value of a good idea. But implementing one’s design systems is another matter entirely. If eureka moments are rare, as bestselling author Steven Johnson once wrote, then realized potential is even harder to come by.
So infrequently does inspiration strike that we must pounce at its arrival. Ideas, after all, are the currency of any creative enterprise. To squander such a precious resource would be a disservice to anyone who has experienced the challenges of making things.
“The role designers play in the implementation of a design system is one of stewardship,” said Mike O’Sullivan, design director at financial services company Beyond Finance. O’Sullivan also emphasized the need for creatives to find an ally within their company’s development team as a crucial step in bringing one’s library of assets to fruition.
“Your design is only as strong as your relationships with the teams who use it,” he explained. “When you take the time to actively strengthen the design system during development, it will be simple for engineers to implement and will look and feel great in the process.”
Turning the gears of progress, in other words, requires collaboration. But it’s through working with others that we can create something enduring. That’s why Built In Chicago spoke with O’Sullivan and Leo Udan, senior product designer at online ticket retailer Vivid Seats, to learn how they bridge the gap between disparate teams to turn ideas into reality.
Once a UX team has created a design system, what are the main barriers to implementation?
Design systems can improve workflow by solving common implementation barriers, such as misaligned priorities, mundane design problems and low code reuse.
A major cause of misaligned priorities is that developers often care more about efficiency, while designers prioritize creativity over other factors. But using the DRY principle — “don’t repeat yourself” — can bring developers and designers into alignment. In software design in particular, this principle reduces the need for repetition of patterns, which can improve system efficiency and design simultaneously.
Mundane design problems, meanwhile, can keep designers from focusing on innovative solutions to common problems like difficult or unusual use cases and patterns. A well-appointed design system should give designers boundaries within which to innovate, dramatically reducing duplication of work.
Finally, productivity and reliable project estimates suffer when code reuse is low. When changing an interface element requires fixing or refactoring multiple instances of the same component, maintenance will be costly. When a design system collects common workflows that solve recurring problems, product teams can work faster, design better and do more with less overhead.
What role do designers have to play in the implementation of a design system?
Designers need to take a lead role in socializing the benefits of a design system. For many in the organization, the concept of design systems may be brand new. Part of the steward’s role is to highlight the specific ways the system will ensure consistency. A consistent approach makes work easier for the team, aids in brand awareness and improves the consumer experience.
Bridging the gap between design and development is critical. During implementation, there will eventually be user experience issues, edge cases or other states not considered during the design process. When that happens, developers will benefit from collaboration with designers to find the best possible solutions.
If you stay flexible and open to team feedback, the system is more likely to meet their expectations.”
What are the ingredients for a successful design system implementation?
Start with a small, focused design system, then scale as needed. By limiting the scope, you can launch quickly and grow gradually. By contrast, mapping an entire system for your company upfront is a monumental amount of work, and completing it before you know what you need can be costly and inefficient.
Next, getting feedback from the designers and developers who use your design system to create products allows you to course-correct as you go. If you stay flexible and open to team feedback, the system is more likely to meet their expectations. It may take multiple iterations to develop the perfect design system — even when you start small.
Finally, the best proof point for a new design system is validating it with a pilot project. For example, at Beyond Finance, we tested a new system with a live web property that was due for an update. Instead of retrofitting presentation code or changing content, we used the new system to optimize its look and feel. After completion, we realized that the presentation code base was simpler and faster. The successful pilot project inspired other teams to introduce design systems into their workflow.
Beyond Finance is a financial services company that helps clients overcome debt.
Once a UX team has created a design system, what are the main barriers to implementation?
Implementation barriers for design systems can include securing — and protecting — development time, as well as establishing an implementation and maintenance process. It’s critical to ensure a company understands and values the importance of a design system. With the day-to-day effort of fixing product bugs and implementing site improvements, it can be a challenge to dedicate an operation specifically for the design system.
Simply put, there is natural competition between the urgent and the important. Implementing a design system is playing the long game instead of investing only in immediate return on investment. At Vivid Seats, we understand the value of a design system in terms of gained efficiency. To make the implementation successful, we have a dedicated squad composed of a designer, developer and product owner who work together to uphold design system standards and success measures.
There is natural competition between the urgent and the important.”
What role do designers have to play in the implementation of a design system? How do those duties fit into the wider collaborative effort?
It’s all about the 3 Cs: communication, contribution and communication.
Communicating internally with other designers is vital to fostering transparency when creating the design system. It is also important that we learn about new components, defects and different design approaches from each other. Equally important is effective communication with external stakeholders to articulate design system practices and present their value with measurements of success.
Whether discussing new components being added or those being fixed, it’s vital that all design team members promote the system’s purpose and effective use. Within highly autonomous and cross-functional teams, designers should be able to see the impact of their work immediately and at scale.
Finally, to gain support from the organization, design teams must evangelize and keep selling the system’s value through partnerships with product and engineering teams. Tight alignment between teams is an essential part of how Vivid Seats continues to innovate while scaling. Full support from the organization is required not just to design the system, but to develop, implement and maintain it as well.
What are the ingredients for a successful design system implementation?
Other than the 3 Cs, you need a dedicated squad, shared ownership, vision with value proposition and complete support from leadership that says, “Not if, but when.”
As designers, we are responsible for the readiness of the design system, and we know the target users will be designers, developers and eventually product teams. The best way to go about implementing or measuring the success of a design system is to pick a pilot project and bring all cross-functional teams together in the effort. Sharing metrics around reusability of components, implementation ease or speed will lead to better adoption of the design systems.
At Vivid Seats, we believe these systems are created and built to evolve. The initiative is never fully completed. With the ever-changing tech landscape, it’s important to design a modular system that supports various processes, methodologies and technologies.
