SERIESSociety of Digital Agencies The Society of Digital Agencies is a global community of digital agency leaders, creative visionaries and technology disruptors. With 100 agencies across 20 countries, SoDA’s members help the world’s most progressive brands imagine and create the future of digital experiences. Learn more.→ XD Ideas / Perspectives / Society of Digital Agencies / The Evolution of a Design System: How to Take It From Crawling to RunningThe Evolution of a Design System: How to Take It From Crawling to Running Rex Carrillo Jan 26, 2020Design systems aren’t necessarily a new concept, but they have become evangelized in the design community in recent years. Having a solid design system is key to any digital product if you want to ensure efficiency and consistency over time. There is no doubt that there is a lot of heavy lifting upfront to get the design system set up properly, but it is just as important to maintain and evolve the design system so that it can withstand organizational changes that may come.This is something that is often overlooked and can lead to wasted time, money, and resources. Lack of clear maintenance of a design system can result in the need for a new design system earlier than necessary. This can be prevented if a proper plan is put in place from the very start of the project.What is the purpose of a design system?Design systems can be a great tool to align design and development teams by simplifying processes and creating efficiency. It can also allow teams to focus on solving more complex problems.Reasons to use a design system:Builds in maintainabilityCreates brand consistency across multiple productsCreates a consistent source of informationFixes design and code debtImproves collaboration and workflow process of teamsBuilds in efficiency and speed, which can reduce costsIncreases communication between development and designBasics of building a design systemBefore you get started, it is important to define the purpose of the system you’re looking to build. This will allow for a clear understanding of where to begin and how to tailor the system for its intended purpose. There are surely many ways to think about this, but the fundamental part is figuring out the needs of the organization and product. This will help you determine the type of design system and level of sophistication needed.Design systems can be as simple as a shared design library, sticker sheet or design management tool or as complex as a fully built-out microsite. These approaches are not one size fits all, and careful consideration must be employed on which approach is best for a particular client or product.Values and principlesAs you get started, it is important to align your brand and system values and define the principles of those values. Principles are the rules of your system’s values. Some examples of values are accessible, powerful, technical, innovative, playful, fast, authentic, honest, fluid. I recommend choosing three or four and sticking to them in perpetuity. Values and principles are a guiding light to remind your team members why they are working so hard.Foundation and structureBuilding a strong foundation and structure at the start of this process is crucial to the success of the system down the road. Think of it as the foundation of a house. You’re building a hurricane-proof house in this case. Before you start thinking about what components you will need in the toolkit, start by identifying the basic foundational elements that will be the baseline you add to. You will unlikely go back from this point, so spend the time here to get it right.Here is a list of some basic foundational elements:Voice and toneMotionPhotography and illustrationIconographyAccessibility standardsCompositionUnits and incrementsResponsive gridType scaleColorComponentsAfter you have built a solid foundation of basic elements and fundamentals, you’ll need to determine what components are needed for a specific product. Set up meetings with a multidisciplinary team, and whiteboard and delegate out your parts list. This kit of components will grow indefinitely over the course of your product’s lifetime, but you’ll want to start with a fairly robust list from the beginning. The most important thing to remember is that this list is fluid and ever-changing.List of potential components:NavigationButtons and linksDialogs and formsFeedback and alertsData displayTablesGovernanceTeamwork makes the dream work. Defining a clear roadmap for who maintains the evolution of the system is paramount. Your governance plan will keep the correct players in the room. Make sure that everyone understands the governance process that was decided on. Design systems will fail or be diluted if there is not an advocate or group updating and maintaining the evolution. Having a set team and chain of command will prevent partners from going rogue. Teach your team how to use and update the system. Understand that building digital design systems is a relatively new practice, and you might be creating a new way to work. Communication is key—set up a cadence to meet with your team. Define a set schedule, and incorporate time for feedback and reflection.CollaborationPerhaps the single most essential part of putting your design system into practice is partnering with development. Include development from the start, and create a cross-functional team. This team can learn and grow together. Design and development oftentimes need to be teachers rather than practitioners. They are their own discipline with individual learnings and best practices. Keeping the communication and collaboration open will ease conversations, allowing for productive iteration. A design system is not fully utilized until its coded out in 1:1 correlation. You will need to get buy-in with developers before they code anything out, so work together to shape and evolve. Be flexible, and understand that code and design are two different disciplines. Design is often more theoretical, so you’ll also need to be willing to compromise.The evolution of a design systemNow that you have the basic understanding of developing a design system, I’d like to stress the importance of maintaining the system and growing it over time. I have witnessed teams struggle over the years and waste many hours of work because they did not properly maintain the system. I myself have built a great system and watched it fail purely based on miscommunication. Design systems develop with time, careful attention, and tireless collaborating. No matter the size of your team or system, you’ll need to push on to make this exercise valuable.A system is not simply a set-it-and-forget-it design manual; it lives and breathes with its caretakers.Rex CarrilloEditing and auditingA core set of components will help a product launch, but an evolving system will help a product grow into maturity. Move forward by auditing regularly and evaluating whether each puzzle piece fulfills business and user needs.Even the largest teams struggle with editing, and a collaborative effort will ease tension as you make wide, sweeping changes. Speed is a necessary part of product design, but I encourage teams to slow down and identify where components have deviated from the system and figure what parts should be included. Be prepared to add, replace, or update assets and anticipate how that will affect the team in the end.As you evaluate the design system over time, don’t feel handcuffed to components that cease to fulfill the needs of the product. Edit for simplicity. Version controls will allow teams to work with what’s developed and build a proof of concept to work in tandem. Be sure to eliminate overlap as you go, and realize that a system is only as good as the team or individual that is maintaining it.DocumentationDocumenting is so important as you build out your design system and continue to maintain it over time. You will be lost in a sea of writing and minutiae if you wait until the last minute to record what you’ve done. If you create a component, be sure to document that component immediately. Documentation can exist in many forms; just think about scalability when you share your design specs with the development team and how you would go about sharing them.Changing with the timesBrands and products evolve and develop over time to keep up with our changing world. They evolve based on trends in the industry and product and business requirements. With evolution of the brand comes evolution of the design system. Whether you’re updating to a modern typeface or removing and replacing components that no longer support the product’s goal, you will need to apply those changes to the design system. As you’re doing this, think in small, incremental changes, and be sure to balance user need and accessibility. If you’ve diligently maintained your design system through thorough documentation, these bigger brand changes will be a lot less daunting and make your process much more efficient.ConclusionThe evolution of a design system is complex but is also a very manageable process when strategically planned. Collaboration from the start is at the core of any design system. You will need to evolve and fail fast, but also understand that knowledge learned from your fumbles will make your system exceptional. And last but not least, never stop shaping and updating—that is where the evolution exists.Key takeaways:Assemble a great teamCreate a culture of collaborationPlan out the stepsGet the basics rightExecute with knowledge learnedEvolve, and fail fast and oftenRepeat, and be sure to keep adding and shapingThis article was produced in partnership with Ogilvy as part of their design system series. SoDA Series Design Systems Words by Rex Carrillo Rex Carrillo is an Experience Designer, illustrator and outdoorsman. He is a multidisciplinary designer focused on simplifying complex problems. He has spent the better part of the past eight years designing interfaces for some of the largest financial institutions worldwide and currently works with a talented group of designers and researchers on the Experience Design team at Ogilvy in Denver. →Get XD Ideas delivered weekly to your inbox. Free. Sign UpRelated Content → SoDA SeriesHow “Design with a Capital D” Can Help Us Redesign our World for the Better: An Interview with Bruce Mau By Jamie MyroldHow can we as designers create our own positive changes? The legendary Bruce Mau weighs in. SoDA SeriesTackling Diversity and Inclusion at Your Agency – A Conversation with Jam3 and Stink Studios By Tom BeckDesign agency leaders are grappling with how to make meaningful change surrounding diversity and inclusion. Web DesignDesigning Accessible Experiences at Scale By Andi GalpernWhen I was a kid I traveled quite a bit with my family. In our hotel room, my… Leadership InsightsEmpathy & Resilience in the Wake of the Coronavirus Pandemic By Sarah BrooksIn a post-Coronavirus world, our lives may not resemble what came before, but may be better versions.