Are design systems the missing link in the digital evolution of your organisation?

Create a framework to build experiences from

Design will always struggle to scale to meet the diverse areas it needs to support in your organisation if it is not set up in a systematic way.

The notion of design being an individual pursuit for ‘the designer’ who produces tailor-made solutions for individual problems creates silo’s and a lack of communication which results in confusion and inconsistencies at a larger scale.

It should be a holistic pursuit that involves everyone.

A design system can be a conduit for this process. Design systems are made from components which are portions of reusable design and code that serve as the ingredients of your digital experience.

On a slightly deeper level a successful design system is essentially the agreement of the design and development teams and others beyond to work together in a standardised way so that you can head towards your north star as a team.

Adopt a systematic approach to design

In 1968, Douglas McIlroy presented a component-based development concept at the NATO conference on software engineering. He came up with this idea because computers were becoming faster and the way software was being developed remained slow and difficult to maintain. Component-based development provided a modular way of programming. This meant code became reusable, like building blocks, which made it quicker to scale and less prone to errors.

This modular approach laid the foundations for contemporary design systems.

PART 2 — TAKING THE FIRST STEPS

Identify the size of the problem you are going to solve

We recommend starting with a complete UI audit. This is a great way to see the size of problem before you begin to solve it. After all seeing how inconsistent, incomplete, and difficult to maintain your digital landscape has become is the first step to solving it.

Once you have your inventory at hand you’ll need to organise all these elements into an ‘atomic’ structure. This is the process of identifying the common elements and categorising them into atoms, molecules, organisms and templates depending on their complexity.

1. Gather together the atoms, these are elements with a single function, like a button or a drop down, this makes them more reusable in your system.
2. Then bring together more complex components, like tables for specific types of data, that are made up of multiple atoms. These will be defined as molecules or organisms. More advanced structures can serve their use cases well, but their complexity limits how reusable they are. This process of categorisation isn’t an exact science and you’ll need to agree as team on the exact parameters of classification.
3. Finally you can begin to plug these elements into templates and pages.

Now you’ve got the basics of your design system in place you’ll need to agree on the standards upon which you base the purpose, style, and usage of these components. This includes things like naming conventions, accessibility requirements, and file structure. These standards should encompass both design and development.

Adhering to your standards as a team is how you create a shared understanding and a sense of excellence. Using them also helps your team work consistently and removes the grey areas that often create confusion.

Your visual language is also a core part of your design system. Part of your audit should include examining the foundations of your visual language. You’ll need to define the purpose and style of colour, shape, type, icons, space, and motion. This is essential to creating a consistent brand and end user experience. It should all feel as part of the same family.

Turn your workplace into a workshop

Think of a design system as your central workshop where you produce relevant digital products or services. Moving forward it will be the heartbeat of your organisation as it continuously evolves to meet your customers’ needs. Essentially your design system will provide a framework for you to deliver digital experiences as you flux between iteration and optimisation.

It allows you to scale quickly: With a single source of truth that is always up to date your team can be sure that they are aligned and working systematically. This means that when you expand and add new functionality your team members can deliver 100% accessible solutions quickly, easily and consistently. The system can also provide framework for right and wrong that can guide the creation of new components.

You can design and build consistently: Standardised components also allow designers and developers to spend less time focused on constantly reinventing the wheel for individual elements and more time developing a better user experience. Standardised components used consistently also create an easier to understand user experience. It’s a win win.

Everything is accessible from the ground up: Rather than treating accessibility as an after thought it can be baked in at the component level right from the start. This is an easy usability win.

You are able to prototype faster: A design system gives you the building blocks to mock up prototypes for testing quickly and easily. This gives you the ability to experiment, research and iterate fast.

It’s easy to iterate quickly: It’s less effort to work on variations of your pages templates because you can be sure of your core components. This means less QA and a faster time to market.

Get a handle on your debt: Everything that was built before you set up your design system is now part of your technical and design debt. Designing and developing in a non-systematic way for a short-term gain is adding to your debt.

This debt is made up of non-reusable and inconsistent styles, code and conventions. None of which is good for anyone and overtime, this debt will slow your growth. So it’s important to get a handle on it as soon as possible because the longer you leave it the worse it gets.

Be ready for the doubters

Unfortunately there aren’t any shortcuts, setting up a design system is a big leap, but it’s worth it…here’s a couple of things you may hear if you’re going through this process:

“Let’s just carry on as we are, it’ll be ok…”: Aligning your organisation so it’s ready for a systematic design and development approach is a real challenge but the results will be worth it. It requires a large investment of time and energy upfront and then ongoing investment to maintain it. This may seem like a big leap but doing nothing will cost you more, and it will get worse everyday you don’t take action.

“Ok we’ve set it up, we’re done…”: It’s very tempting to think that once your design system is up and running, then you’re done. This could not be further from the truth. A design system is a living breathing thing, meaning it will require a plan and budget for maintenance. Think of it like a garden that grows. There’s no point investing in getting your garden in shape if you’re not willing to maintain it.

“It’s too limiting…”: Designers often have areas of focus and expertise from their day to day roles and they believe this knowledge will be lost with a systematic and universal approach to design. In truth the opposite is true. That knowledge should be shared as it can improve other elements. There will also be insights from other projects that can inform and improve their components.

“It’ll limit my creativity…”: If designers are restricted to using a design system, then designers will no longer be free to explore style. Frontend backlogs are often full of design style updates. Evolving the visual style of an app is typically no small task. This can also be a great risk, as it removes resources from new feature work and may negatively impact usability. Reality: The components of a design system are interdependent. This means when a change is made in one location, the change will be inherited throughout the whole system. This makes style updates within a system trivial in effort but much greater in impact. What once was weeks — if not months — of work, can now be accomplished in an afternoon.

Conclusion

Design systems won’t solve all your problems. They are a huge commitment in terms of time, effort and resource. The initial investment in time, energy and resources won’t necessarily result in an instant ROI. However overtime it will become clear that taking this step was a huge leap towards delivering a relevant and compelling customer experiences. In fact it’s probably the biggest leap you’ll make. And that’s progress that helps both you and your customers…

References 

https://www.designbetter.co/design-systems-handbook