Methodology
The Path to Design System Maturity
It’s a lot like growing up, but not as awkward and embarrassing.
Carbon, Lightning, Clarity, Polaris, Plasma, Build. Am I describing names of SpaceX rockets, or corporate design systems?
In today’s software landscape, we’re no longer limited to feelings of inadequacy from just perusing Dribbble. Now we can feel insecure because we’ve never created a design system even half as robust as the ones above.
But just like watching Lebron play basketball or Thom Yorke orchestrating a song, it’s important to remember that most of us simply aren’t equipped to pull that off. So rather than just hanging up our shoes and guitar (or whatever Radiohead plays on these days), we can look toward these best-in-class systems for inspiration, and t0 understand what the path to success looks like.
Nathan Curtis said that design systems should be treated like a product. In this light, you can see how systems have a well-defined growth path from fledgling startup to monolithic corporation on the NYSE. Design systems don’t have to be huge. And they rarely are.
Using product as a reference makes it easier to understand how to construct your own design system.
Avoid pedantic debates on what defines a design system. Instead, define the goals of your system, its target audience, and your MVP. This will help you make more effective decisions as to where you should direct your effort. More importantly, you won’t be paralyzed with where to begin.
Design Systems can be broken down into three overarching themes that map to common product maturity stages:
1. A System for Efficiency (Startup)
2. A System for Consistency (Scale-up)
3. A System for Optimization (Enterprise)
1. Efficiency (Startup)
It’s important to understand these levels of maturity reflect the stage of your design system, not your product team itself. Every team, new or mature, will find themselves starting a design system from scratch. In this stage, you are either part of a startup product yourself, or beginning to create your first design system in a mature organization.
Building Internal Design Efficiencies
First and foremost, a design system must make designers themselves more efficient. This efficiency allows designers to churn out screens more quickly, and frees them up to stay ahead of the curve on innovative features. In my experience, no other goal in the rest of this article is worth pursuing without this one properly accounted for.
The first step simply requires that your design team use a design tool that will even allow for efficiencies. Sketch, Atomic, and Subform are, in my opinion, the clear leaders. They have intelligence built into their tools while offering plenty of room for designers to explore. Sketch gets the nod from me because it has integrations for days which will make it easy to grow your system over time.
Create consistency amongst designers
Tools: Shared design systems like Brand.ai or Craft Library; Design system frameworks like Material Design or UX Power Tools.
When you’re in the early stages of design system development, consistency often works upwards. Rather than a set of guidelines dictating practice, emerging patterns dictate guidelines (sometimes to a fault). Most of us designers would love to pause and establish design principles and usage guidelines, but those efforts will almost always be trumped by production. In the meantime, you should be able to lean on key principles and methodologies that govern good UX and product design.
2. Consistency (Scale-Up)
At this phase, your product is probably growing, and so is your team. You have enough experience to know what your product is starting to become, and that allows you to create more guidelines and principles to direct your work. During this phase, you’re also moving past your digital tools and beginning to build out communication tools. As your team grows across locations, your company acquires new products, or you hire more designers, the need for consistency increases tremendously.
Providing Rationale
Tools: Style Guide, Design Principles, Pattern Libraries
By now, you’re well-practiced in laying out screens and user flows, and have a good sense what you have to work with. Assuming your product has been designed with intention and grounded in core HCI principles, you can use your existing work as a starting point for distilling hidden principles that may have been guiding your work. Most importantly, it gives you time to pause and find ways to improve upon what you’ve done by establishing better guidelines going forward.
Incorporating Brand
Tools: Brand Guide, Voice and Tone Guidelines
Brand and product go hand-in-hand in today’s everything-as-a-service world. Up until this point, you may have been running lean or simply not had in-house resources to really truly own your product brand. Before you can truly close the consistency gap, you need to incorporate your brand into your product.
This ensures that your design system is a reflection of how your product is presented to the market. It also helps bring other teams (marketing and branding) into the fold before making the final leap with development toward full optimization.
3. Optimization (Enterprise)
Here we are. The holy grail. This phase represents the maturity of systems that are the most often described today. There is a strong connection between design and development, and this is only made possible by the groundwork laid in the previous stages.
It is important to note that not every team needs to reach this level.
It all comes down to your own goals and product priorities. This stage requires maturity, buy-in, experience and a clear ROI across almost every department in your product team.
Development Consistency
Tools: HTML and Sass; Javascript or other middle-tier frameworks
Google has released dozens of tools, but one fairly simple example of a coded version of their framework is Material Design Lite. This is very reminiscent of Bootstrap, only based upon the core design principles of its own design system.
Handoff Optimization
Tools: Custom systems and tools to keep design and dev assets in sync, Governing Strategies, Design Ops, Design Technologists
Recently, Airbnb blew up the designernet™ with their React Sketch.app:
This is about as mature a system one could create because it also includes compiling tools and other things I am not smart enough to articulate. Airbnb projects a clear transparency and cooperation amongst their design and development teams.
Much like an enterprise company, when you reach this stage, processes and ownership become critical to oversee. While us outsiders can fawn over Airbnb’s system, the reality is that a system of that size and complexity will be a bear to manage and optimize internally for years to come. This is where DesignOps and governing strategies come into play.
It’s also where you can finally brand your design system with a name that sounds like a space shuttle, and light up the designernet yourself.
Summary
So what have we learned? Generally speaking, there’s no official definition for what a “design system” is other than a structured approach toward optimizing your product design workflow.
Like a software product, a design system will go through phases of maturity as it becomes more complex and serves the needs of individuals beyond the design team itself.
So before you swan dive into creating a design system, reflect on why you’re creating it, and establish a target MVP. Identify what problem(s) you’re trying to solve, and choose the most appropriate approach for your needs.
UX Power Tools makes sophisticated Sketch tools to make help you make your own design system. The best Sketch designers are using it, and I think you might like it, too. Check the demo!
