While the business markets and their needs were quite different from one another, the problems their websites faced seemed to originate from a similar place.
They’ve all been using Content Management Systems, which allows different departments in the company to update content as needed, and manage their own part of the site. It’s efficient and practical. It’s a business-as-usual kind of decision for a large and complex organisation. It also saves time, keeps production costs low, and allows everyone to get on with their work without having to ask for too much help from dev or designers, or get into some kind of approval chain to publish stuff.
But time and time again, the result at the end has become content and designs on the website that vary greatly in tone and quality: pages even looking quite different from each other when clicking through the site.
We run a lot of workshops to understand challenges within projects and here are just some of these pain points having to do with their website, as expressed by the people we’ve worked with:
Different parts of the website look like different businesses.
The web is often an afterthought for many teams.
When you have multiple teams working in one place who aren’t communicating with each other, inconsistency just happens. And what really suffers is the customer's experience.
Like cities, websites are complex systems. People visit them for different reasons. They navigate through them. They scan information. They make key purchasing decisions.
Meanwhile, internally, your different teams act within this same space.
A complex system that isn’t managed well breaks down and our customers can perceive that. When this happens, trust in the brand can go down, customer satisfaction suffers, or your audience will just go someplace else.
As we’ve helped a number of organisations improve various parts of their website this year, we’ve been able to see that the problems on their website were often a result of ways that large organisations have learned to operate as scale.
This is a problem, when you want your customers to experience your business in a singular and seamless way but the website itself represents multiple authors who aren’t communicating with each other.
The relationship between the structure of a business and its digital outputs have been observed before.
Nigel Bevan, a usability expert, said:
Organisations often produce web sites with a content and structure which mirrors the internal concerns of the organisation rather than the needs of the users of the site.
There is a lot of work underway to solve this problem of disjointed or inconsistent digital experiences. Companies are beginning standardise and systematize their design output.
Design systems
The most familiar model for understanding a digital design system is Brad Frost’s atomic model. Starting with the most granular elements like typography and colour, you can think of combining these into more complex organisms until you get to templates and page level views.
Modular systems are great, but they could still get used any way anyone wants to. A system without guidance is just a set of blocks that could result in an infinite variety of creations. If you’re trying to maintain a consistent look and feel but you have many contributors, then you’re probably back to the original problem of inconsistency.
In practice what often happens is that these re-usable atoms are used many different ways, allowing all kinds of molecules to be created. Again this opens the door for all kinds of disjointed experiences and makes the system harder to maintain.
What’s the best way then to transmit guidance about how the users of the system are to use these blocks?
Some well-known brands have been doing a lot of work internally to produce increasingly detailed documentation — libraries and support systems around their designs. Online, you can easily find sites that showcase different design systems.
They’re websites onto themselves. They range a lot in the level of detail and supporting information they provide. Some are considered style guides, while others are more integrated design systems or design languages. The intention behind them is to help quicken the pace of production and ensure more consistency across screens and platforms. Design systems often articulate design principles and provide design guidance and code around each component.
So I’ve noticed some interesting things...
They’re mostly for designers and developers
Here’s a screengrab from one of those design systems.
So to get started with it, you should be a part of either of these two camps. We’re not really speaking to anyone else.
They’re unique to the brand
They’re all different. Developing a design system is more than just specifying hex values or CSS. I think these companies understand the value they’re bringing to their customers and the component designs reflect that. They’re infused with a joined-up understanding of the intention of the business as a whole.
Here are some excerpts from Uber’s guidelines:
Even without a label on this slide, you could almost guess who this company is. They’re in the transportation business and have paid special attention to the specification of components having to do with their maps.
Can you try and guess who’s component this is? (I know this is going to become a game one day.)
It's from Lonely planet. I know them for their great travel guides. Here, they’re giving a little more love to icons sets titled “Destination”, “Weather” or a set called “Need to know.” This tells you a little more about the kind of experience they’re promising to the audience.
I like this one:
This seems like a small component. It doesn’t seem to be very exciting but again, I think there’s a lot of design love here. Care has been taken to get this right and articulate details about it. I can see refined decisions that have been made about type sizes and use of colour. It’s also called a multi-choice list - I think even the name of it has been well thought out.
It’s from Shopify’s design system. They run an e-commerce platform, where the check-out processes for online shoppers is incredibly important moment to get right.
They’re considered living
Design systems are thought of as constantly evolving. When you go back to thinking about my early points — multiple authors, changing teams, your customers and their changing needs, and advancing technology — it’s a complicated system, so this makes a lot of sense.
A unified design language shouldn't be just a set of static rules and individual atoms; it should be an evolving ecosystem.
IBM says their Carbon design kit is “a living, breathing, document.” And Salesforce says the same thing.
As your third-party systems are always coming out with the next version, or as marketing strategies shift seasonally, nothing is permanent about this work. I think this is fine, this is good, we have to let systems evolve. That’s what they do.
But there is this strange tension where the document appears to have authority, but it’s always potentially failing if it becomes an inaccurate source for information.
The biggest existential threat to any system is neglect.
Some companies have taken on efforts to develop systems of governance and ideas about workflows around these sources of truth in order to keep them alive.
At Allstate insurance, there’s a pattern library at the top, supported by a governance community and then there is also a designer and dev librarian who support the governance community.
Airbnb have also created an organisational model. They have a specific team at the top who are responsible for the design system. Then there are designers distributed throughout the company in different teams who feed into that design language team. And then it’s all supported by a production design team. They say:
This ensures all designs meet Airbnb standards for quality and consistency.
Having a single source of truth is important in trying to uphold that goal of delivering a seamless and delightful experience while internally teams and strategies change. But maintaining these documents as libraries can become quite a project in themselves.
Some great companies have taken on this task — Airbnb, the BBC and Gov.uk, just to name a few. Others out there are also beginning to define and develop workflow systems, new roles and governance committees.
But not every organisation has started out with their roots in technology, or have the resources or the buy in you’d need from stakeholders to take these projects on. It’s a lot of coordinated effort to get these design systems in place.
There is a focus on the design system as a useful piece of documentation work: it’s a thing, it’s an output that facilitates other outputs. But I don’t think this is its only value.
These projects are fostering increasingly collaborative engagements between designers and developers. Furthermore, they are about defining things. And when you do that, you’re also going through the process of understanding and establishing meaning in deeper ways.
I observed earlier that these design systems have more in them than component build and design specifications. They’re in touch with the brand promise as a whole and focus on some of the genuine experiences and key interactions the business wants to be known for.
According to the Director of Product Design at Intercom:
Therefore, I think it’s even more important that these design system projects become more inclusive to other teams across the business.
For organisations with multiple content producers who use the components to create their pages, they should also share in the understanding and purpose behind the design system. As intermediary users of the system, they can input valuable feedback that informs the continual development and design cycles.
Complex issues require intelligence beyond that of any individual. For early design systems you don’t need a governance committee, but more conversations between the people across the organisation who influence the output on the website.
The best way to govern and grow a living system, especially in its early stages, is through the shared and socialised understanding of the purpose behind the designs on the website.
Dialogue
Dialogue is the discipline of collective learning and inquiry, It is a process for transforming the quality of conversation and the thinking that lies beneath it.
William Isaacs has conducted research on dialogue and organisational learning in corporate, political, and social settings around the world. He says:
Dialogue often leads to new levels of coordinated action without the process of creating action plans or getting rounds of approval. Dialogue does not require agreement; instead it encourages people to participate in a pool of shared meaning, which leads to aligned action.
It’s really efficient! There are simple ways to keep your early design systems alive without investing in architecture or hiring new roles or creating departments.
Campfires
When I first started brainstorming about this, I just wrote down on a post-it note, “Campfires.” And it has stuck with me still.
I like campfires. People gather around them to have conversations and tell stories. They’re not formal. And you don’t need to build an infrastructure to support them.
Dialogue is like a campfire. If you’ve ever tried starting a bonfire—or even a BBQ— you know they take a process to start up. So here’s the process of dialogue. I won’t go into deep detail, but in a nutshell, these are the most important aspects we need to know:
- Invitation
- Conversation
- Deliberation
- Discussion
- Collective Inquiry
- Creativity
Conversation + Deliberation: When any group of individuals comes together, each person brings a wide range of unexpressed differences in perspective. The first thing is to find a way of allowing these differences to be explored and to tease out assumptions.
Discussion + Collective Inquiry: Skilled facilitators are crucial at this point, not to impose rules or order but to suspend what we might see as conflict in service to inquiry or insight instead.
Creativity: Next, you move into a place where people can inquire together as a whole. New insights often emerge in a shared and socialised way, as opposed to the much slower process of consensus-building. When you have different mindsets of the same business coming together to develop a common syntax or vocabulary, you now also have a place that’s set up for innovative ideas.
We do a lot of of this at Clearleft. Through sketching with clients, we use their expertise to generate a deeper understanding and more informed visual designs. In these sessions, people tend to tell stories as they draw, or talk out loud about ideas they have but can’t really articulate yet. We work off each other’s ideas to come up with solutions together.
After projects end, I always hope there is a way that these practises will carry on. I think it’s important for businesses to continue to support this kind of collaborative culture.
Socialising the design system should happen from the beginning.
Recently with a client, we’ve been working very closely with the digital team introducing methods that help facilitate dialogue and collaboration across the different parts of the organisation. The different content managers are also regularly invited and are attending sessions. In design review sessions, we write on a card, a yes, no or maybe so. And then for each component, everyone quickly presented how they felt. By making everyone’s initial opinion visible, we then took turns discussing and coming to conclusions together.
A past Clearleftie, Charlotte Jackson did an exercise for everyone involved in the creation of the pattern library. People across the business were invited. They conducted a website audit by printing out and cutting apart all the components used on the website. They grouped them into categories, then one by one sought to name each component together. She says:
I think large companies can try and find the room to experiment, to pilot other ways of working that allow them to operate like a smaller organisation sometimes.
Design can live within your business but it doesn’t have to be restricted to a team with that label. Design thinking is a skill that can be done by anyone.
Developing a design system takes collaboration between the makers of the design systems and the different users of the system. It’s a continual process that doesn’t have to require a huge investment in new departments or massive restructuring.
It can start small.
