From IBM’s Carbon, to Google’s Material design, to the Airbnb Design Language System - let’s face it, design systems are taking over the tech scene. Companies are increasingly investing in design systems to create products with stunning and identifiable interfaces. Increasingly, designers are advocating for design systems in their workplaces, and establishing best practices across a whole range of digital products. We previously wrote an article on design systems, which is a must read if you want to find out why it’s so important they are created and used.
Today we’re discussing how to approach a design system for a product that is constantly evolving; new features and functionalities are being added, perhaps your users’ needs have changed over time or your company is having a rebrand. In these instances, we can reframe our approach to creating a design system by considering it a living product, rather than a static document or monolithic system that can’t be touched or changed. We believe it’s important to establish a strong foundation that ensures solidity of the system as it expands, by viewing the design system as a process in itself, not as a final product. So how do we create a robust system that is attuned to new behaviours, new business and new ways of working?
We’ve worked closely with Hall and Partners for 5 years now, designing and developing their product, The Hub. We’ve enjoyed contributing to the evolution and expansion of The Hub, and over the years have spent time iterating on the design system we created. We’ve established 3 core principles that we apply when creating and maintaining a design system:
So what do these principles look like in practice? Here are some of our key takeaways from our work:
Define a clear set of guidelines and usage rules for your system. Consider responsibilities such as who can add things to the system. Who decides what gets added to the system? Who needs access? Having multiple contributors without considerations towards who does what can create confusion - for example, not knowing where one designer has saved a component in the system. Agreeing a clear process when using a cloud design tool such as Figma or Sketch is essential.
To ensure designers feel secure and confident in using your system, it’s important to signpost and label items with a clear naming convention. For example, it can be useful to give colours names rather than labelling them with hex codes, as names are easier to remember than a combination of 6 numbers.
Conducting an audit of your design system is a great way to locate any inconsistencies in your system and rectify them. You may find duplicate UI patterns or inconsistent vocabulary, both of which can create a confusing experience for your end user. It’s also an opportunity to ensure that all UI elements have appropriate interaction states and comply with the latest Web Content Accessibility Guidelines.
It takes time to perfect your design system, so don’t be afraid to experiment with different approaches until you find one that works for your team. The system doesn’t have to be a finished product that can never be edited or challenged - your designers’ needs will change over time as your product grows, and the system should change with them. Encourage contributions from your team so that you have a clear understanding of the challenges they face while designing, and consider how your system can provide solutions.
Design tokens are stylistic UI values such as typography, colour, patterns, shadows, and spacing, which are used across your digital products. They act as the foundational building blocks of your system and define the visual language of your brand. Sometimes these building blocks are given different names, such as atoms in Atomic design methodology. Tokens are efficient in ensuring your system is consistent in all UI patterns, and are easy to update. If you need to tweak a colour token, rather than trawling through many artboards, you can just update the colour value centrally and the amendment applies automatically to all designs for every area of your product. Tokens can also simplify the development process. By giving your developers a library of style attributes, they can use design tokens in code like an npm package and receive design amends without drastically changing the code.
When you have a new design system subscriber, make sure you talk them through how to use the system and what it’s for. Having a formalised onboarding process ensures that you give new subscribers a comprehensive introduction. You may also find that the questions a new subscriber asks provide insights into gaps or inconsistencies, or suggests the system isn’t as easily navigable as it could be.
Design systems are an exciting product and can provide your team with a lot of value when used properly. We know it can be daunting to create one from scratch or completely overhaul an existing one - but it can be beneficial to get an outside expert opinion involved to get you started! If you have a product that's in need of a design system, feel free to get in touch with us for a chat!
Have an idea you want to discuss? Call us for a free consultation
Get in touch with the team to discuss your idea, project or business.
Furthermore
54-58 Tanner Place, Tanner Street,
London, SE1 3PH
.png){kind=icon}
