What IS a Design System?

How do you think large, forward-thinking organisations like Airbnb, Google, Atlassian and IBM design? They use design systems to effectively create cohesion within product teams.

You may not have a large design team, but you may become one or work in one - and we believe thinking of design as a system is the way it should work.

Differences in design systems

A Common Team Language

A design system is a language. A truly embedded system is spoken fluently between teams - like describing spacing or quirky naming conventions. The more people speak the design system’s “language”, the more the team will trust its efforts and see its results. As with most things, knowledge is power.

Fewer questions will be asked between developers and designers, handoffs will be more efficient and fluid. Developers will better understand interactions and animations by referencing documentation and guidelines generated from the design system.

It Eradicates Design Debt

You hear the term ‘technical debt’ often but you rarely hear of ‘design debt’. It is the same principle:

“Design debt is where the cohesion and consistency of a design deteriorates over time as new experiments are run and new elements are introduced into the design"

Austin Knight

CommSec had a lot of inherited design debt. Experiences had been designed separately and sporadically, without cohesive thinking. Different designers worked on different parts and had their own interpretation of the CommSec brand, which caused inconsistent experiences throughout the entire brand ecosystem.

Design debt is often inevitable, especially with the current workflow of organisations. Not enough time is given to update or adapt features. Companies tend to assume there will be zero amends and what has been designed is perfect. This is a big issue, as design is typically dynamic and changes with the business. That’s why a design system needs to be in place.

Another example is Hubspot. When they audited every component, they found they had 100+ shades of grey, 6 different primary buttons and many other inconsistencies in their interface. Spotify had some troubles too.

Capturing a Vision

Companies often pivot and change value proposition, testing design versatility and modularity. With a design system, it’s easier to adapt as you have a complete record of every component, interaction and animation that has taken place. This lets you design from the ground up, with brand values and design principles front-of-mind. At CommSec, an interface inventory allowed us to agree on values and principles before Sketch was open.

Scaling Correctly

New features can never be built fast enough; compromises are often made on user experience (UX) in favour of a deadline. A design system will build features faster and more consistently than without. Developers also won’t be under the pump, as code has already been written. Even from a QA (Quality Assurance) point of view, new features are streamlined as component code has already been tested.

Developers love design systems

Communicating with Clarity

Keeping everyone up-to-date is hard for any company. The process of creating a design system offers opportunities to educate and communicate the importance that design thinking brings to the entire business.

At CommSec, we approached communication digitally and physically. In Confluence, we documented our entire process - what we are working on, where we were and extensive details on all components and their variations.

Physically, we printed off our progress and posted it in a visible space in the office. Having something physical encourages people to comment and provide feedback, creating conversations between teams that might not normally interact. We’re all about improving water-cooler chat.

Smooth Onboarding

With a design system, when new team members join your company, they have an entire repository of information about what you design, how you design it, how you use it and why it's important to the company.

Good Governance

What’s the difference between a UI kit and a design system? It’s context. Creating rules and guides gives direction and purpose to the design process. Deciding on what can be done and what can’t be done breeds co-design and enforces an holistic approach to design thinking. Setting guides tests the design and ensures that it is robust and versatile.

At Commsec, we defined use cases and provided extensive guidelines. The more use cases, the more efficient the design process will be.

A Happy Conclusion!

Generally, the more effort you put into design systems, the more you get out. The adage “spend money to make money” definitely applies. Design systems improve your bottom line in the long run because they enable teams to work faster and better, hinging off a single source of truth:

Design should be by committee rather than personal interpretation.

We hope you now see the value in design systems. The next stage is to sell it within your company!