Do you need a Design System? (yes)
We work with big companies.
And when you work with big companies that have multiple touchpoints, products, and services, employ tens of thousands of people, and span the globe crossing every cultural, linguistic and demographic divide there is, you quickly realize the need for a unified user experience.
It can be hard to create that kind of experience and it can be even harder to keep that experience cohesive over the long haul. Big, complex, complicated organizations don’t just need a unified experience now, they need it in perpetuity — or as close to it as we can come.
Customers, employees and anyone else interacting with an organization have certain expectations on how the brand looks, feels, and behaves. The experience presented to them has to match those expectations and the only way to do this over time is through a seamlessly executed experience.
We know and live this reality every day, so it wasn’t especially surprising when one of our designers, Amit Jakhu, returned from Smashing Conference San Francisco brimming with new ideas and thoughts about the growing importance of design systems.
It’s a sentiment that has gained ground in the industry over the past few years, as evidenced by the multiple presentations at Smashing Conference that covered some element of the topic and the entirely separate conference, Clarity, that was held the week prior and focused specifically on design systems and style guides.
It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire life cycle. — Paul Saffo
Jina Bolton (Lead Designer, Design Systems at Salesforce; a presenter at Smashing Conference; organizer of Clarity Conference) opened her presentation with that quote from Saffo and there’s a reason it resonated with us.
The reality is that devices, platforms and technology on the whole change too quickly to expect a single, static standard to be good enough for any length of time. It is the life cycle we need to consider, not just a single stage.
We need evolving — but still unified — designs that can be deployed in a variety of ways and are easily adapted to a rapidly changing world. Which is why Amit, Jina Bolton, and countless others in the industry are convinced that we need to start implementing comprehensive design systems.
Why We Need Design Systems
Technology changes too quickly for the kind of freewheeling, wild west ways we’ve come to know. The need for revisions, iterations, and updates (not to mention new products and deployments) require that we be ready to implement changes at any moment. And each time we implement, we should be creating a harmonized experience for users.
Having a design system with clear guides, structures, and styles in place is a straightforward solution. As an organization grows, and as chunks of production or development get shifted to semi-autonomous teams, the need for a single understanding of how to represent new or updated items becomes even more apparent.
This was the case outlined recently in a piece by Dan Mall. Faced with seemingly endless and uncontrollable bloat as a result of an almost unknowable number of authors, sources, and web entities within his organization, web manager Brent Hardinge pushed “to create a design system that would allow any of the 70,000+ churches; 260,000 employees; 63 publishing houses; 15 media centers; and others ministries, partners, and subsidiaries to spin up websites as quickly as possible.”
How could you possibly expect to create a cohesive experience without the aid of a design system under those circumstances?
How Design Systems Can Help
Design systems aren’t just helpful for complex organizational structures with multiple authors and autonomous entities. They can be a lifesaver when you’re working on a complicated, multi-faceted project that will evolve and change over several years, as is this case when building a specific product.
“I think it comes in handy when you’re working on a product like RelayRobin,” says Amit, “And it allows for scalability, keeps everybody in sync on the team, allows for easier onboarding and can be leveraged as a reference point right out of the gate.”
Implementing a design system, especially for big organizations with lots of smaller channels and points of contact, can help ensure a unified identity across all of it. It can also help your team remain unified over time and contribute to greater clarity in all aspects of the project.
The clarity issue, in particular, is a big one when working across teams and projects. “People reference things in all kinds of different ways which could lead to confusion,” says Amit, and it’s something Alla Kholmatova highlighted in her presentation at Smashing Conf, which also focused on design systems. “Unless you use an element’s proper name, it doesn’t exist,” she said.
When we’re designing for complex projects, the need for clarity of language grows. As Amit notes, “We could call something a ‘product splash’, but it would only make sense in that one context.” Kholmatova suggests we “Name things based on their global function — the function of a module in the context of the whole system, rather than a page.” Because when trying to identify an otherwise disparate group of elements, it’s important to frame them in the most universal context possible so that the team involved can reference back to the item type easily.
Now we’ve identified that the need is certainly there, and we know what the solution is, how do we actually execute on that solution?
How to Implement a Design System
We’ve highlighted eight key components in getting a design system established, to help you get started in creating your own.
Sell it: First and foremost, you’ll need stakeholder buy-in. Design systems take a lot of effort to establish and even once they have been created, they are living entities that will require regular resources to maintain them. All of this is an expense, but if you can demonstrate the value of such a system, it’s a worthy one.
In the case of Hardinge, he simply laid it all out for the stakeholders by compiling the scattered, non-cohesive existing sites on boards. “He put those boards in front of the powers-that-be at the organization as an example of all the wasted money and effort that goes into making sites from scratch, one-by-one, needlessly reinventing the wheel every time. He used them to illustrate how fractured an organization can look when there’s no overarching system to govern the output” says Mall.
And it worked. They bought in immediately and he got budget to create a meaningful, useful system that can be leveraged throughout their massive organization.
Perform an audit: Both Bolton and Kholmatova mentioned the necessity of a complete audit (printing out every page, starting a manual audit) in their presentations at Smashing and Hardinge’s experience shows how vital that can be to selling the idea to stakeholders. So step one is to illustrate the problem: print and lay out all the pages and designs that are being used across the organization today. This will reveal the current inconsistency problem.
Not only does an audit help the client see how vast and disconnected everything is, it also helps the client and the team working on the product to get aligned. A mini-audit may be all that’s required to get people on board with the creation of a design system, but a full audit will be the best way to guarantee the end result covers every element and facet you’ll need covered.
Strategize your efforts: Building a design system from scratch — especially for a product or project that already exists — can sometimes feel like it requires a Herculean effort. Do yourself a favour and start with some of the smaller or more straightforward tasks.
It may seem tempting to start with the homepage, but that’s likely to complicate your life unnecessarily. Homepages are often unique in their functionalities. They have lots of one-off features that probably won’t exist elsewhere, and trying to formulate a design system based on them is inviting headaches and roadblocks. Instead, take on items like colour or typography — not only do they have an immediate, visible impact that will motivate you to continue, they’re also connected global layers, so they set good foundation pieces for the whole design system.
Go for quick: Starting with the small, easier to impact areas will help with showing progress and it allows for quick turnaround. To keep everyone in sync and to improve turnaround times, have a central area where you can share progress. This will help keep both the team and client aligned, which keeps the conversation flowing and everyone can see the tangible benefits of the design system.
It’s important to note that this is a living system where everything won’t happen all at once — it is very much iterative. That being said, it’s better to have something to reference than nothing at all. Kholmatova noted that her team at FutureLearn started off by integrating static designs into their system while the development was still being worked on.
Devote time to important elements: Part of what scares people away from building comprehensive design systems is the sheer amount of time it takes to do so. Undoubtedly, you will need to devote resources to the task, but with careful strategizing in advance, you can streamline many spots. Some of the more complicated or impactful elements of a product, however, should be carefully considered before codified in a design system.
When working on modules, for example, take the time to think about and display how they would work in different contexts. Print them out and test them with users to be sure they’re achieving their purpose. Your design system is meant to establish and reinforce certain standards. There is no point in building it if it sets out examples that don’t function as they should. Where it counts, take your time and be sure of your decision before you set it in the system.
Show the output: Just as important as taking the time to strategize which items will have the most impact and testing them out is demonstrating them in a variety of contexts. Not only does it help validate the execution of the elements, it also shows what a component would look like across multiple contexts. By doing this, you increase the odds of a universal understanding of the element and add to the consistency of implementation.
Make it a living entity: That being said, part of what makes a design system so effective (as opposed to a traditional style guide, for example) is that it is a living document, constantly being updated and evolving alongside the product itself. This is key, especially as technology moves ever more swiftly and needs change on a dime. “The living aspect,” says Amit, “accounts for evolution of devices and helps steer the new developments and designs. It should be the same process for a product or a professional service. The handoff needs to be deliberate — someone needs to maintain it afterwards.”
To ensure it remains a living entity, it is important to update it. Whether you have a single, dedicated facilitator or, as Bolton did with her team at Salesforce, you have a breakdown of responsibility flow for maintaining the system, keeping the design system up to date with the product is crucial. Without this, it deprecates itself and becomes a source of conflict instead of stability.
Be patient: There are lots of challenges that come with building a comprehensive design system. The actual building process takes quite a bit of time. Kholmatova and her team started with static elements (e.g. images) and then built it piece by piece with actual code as the product evolved. Implementation like this becomes much more manageable, and gives the team something to start with.
Each of these steps is fairly straightforward, but the actual work of building a design system isn’t easy and it takes a collaborative and ongoing effort to do it well. When it’s done well, however, it is definitely worth it.
Choosing to establish a design system for your product or project is not something to enter into half-heartedly: it takes a fair bit of effort to build an effective system and then still more effort to keep it relevant. But when working with major brands and complicated projects across teams, a design system can drastically reduce waste, cost, and confusion. As brands continue to grow their offerings and establish legacies, the need for cohesion in their online schema grows, too. It’s up to us to be the champions of that effort.
Design systems, yay or nay? Let us know! Leave a comment below or, if you’re really keen to chat, join our team and discuss it with us every day. Apply here.
