Are design systems the missing link in the digital evolution of your organisation?
To produce relevant digital products and brand experiences your organisation must continuously evolve to meet your customers’ needs. These steps are some things to consider as you move between this constant flux of iteration and optimisation.
PART 1 — LAYING THE GROUNDWORK
Underpin everything with your purpose, mission and principles
In order to navigate the waters of your digital evolution we recommend setting a clear vision and purpose; this will mean you’ll have a north star to navigate towards when you need it. Really get to the core of what it is you are trying to achieve with your products and brand experience.
We also recommend developing some experience principles that will help guide you on this journey. Ask yourself what do you want your end user to think or feel after using one of your products or interacting with your brand?
All of the above should fit in with your brand values and corporate strategy.
When you’ve agreed on these then communicate them clearly — it’s everybody’s reason ‘why’.
Think like a designer
Encourage everyone, and that means everyone…from executives on the board to the interns, to think like a designer.
This may seem like a strange mindset to adopt but it is very important to reframe the concept of what design means within the culture of your organisation. After all everything around you has been designed (and that’s design with a small ‘d’). For example the structures, workflows and office layout that you work in everyday.
This idea of shared creation, ownership and possibility is very important for the culture of your organisation. Empower all your employees to see the possibilities of design and trust them to make things better.
Research shows the more that design thinking is embedded into an organisation’s culture, the more successful it will be, it really works!
The 3 core pillars of a successful design thinking mindset are;
- Put your users first — no matter who the end user is, having a better understanding of what their needs are will help you deliver more effective solutions
- Be collaborative — whether you realise or not we are all part of the design process, from start to finish. It’s essential you are always looking for ways to work better together.
- Constant improvement — adopting a mindset of constant iterative improvement will help you continuously meet the needs of our customer’s needs.
‘The impact that design thinking can help us with is not just coming up with better products and services for tomorrow, but in the long term, building a set of durable organisational capabilities that mean we can continue to survive and prosper in the future.’
Jeanne Liedtka — Darden School Of Business
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.
- 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.
- 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.
- 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.
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…