Imagine this scenario: you’ve just started a new role at a software company, and for your first project, your team is re-imagining the login page experience.
The site already contains some similar user input forms that you could base your work on. But the experiences aren’t aligned – one isn’t functional on mobile phones, another has issues with the error messaging, and the last one uses the company’s old brand.
With all this in mind, your team invests the time to build a best-in-class new login form. You had to start from scratch as you couldn’t use any of the previous forms. This took an extended effort that distracted from the team’s other priorities, and led to several missed milestone dates.
So how could we have avoided this situation? Is there a way that the previous forms could have been built in a way that could have been immediately reusable? How can we make sure that new patterns match the experience that our users are accustomed to? The answer is to implement a design system.
So, what is a design system?
In a nutshell, a design system is a collection of design guidelines, patterns, and tools that are used to create a consistent user experience across a product or organisation.
They typically include elements like typography, colour schemes, layout guidelines, and reusable UI components. The goal of a design system is to create a consistent look and feel across a product or organisation, while also making it easier for designers and developers to create new pages and features.
A well-crafted design system can help improve the overall usability and accessibility of a product through the use of clear documentation and implementation rules.
Overview of a card component from Joy UI.
Benefits of design systems
Design (and development) work can be created and replicated quickly and at scale.
Designs can be generated quickly by utilising premade UI components and elements. Teams can continue to use the same “building blocks” over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.
They alleviate strain on design resources to focus on complex problems.
Since simpler UI elements are created already and reusable, design resources can focus less on tweaking visual appearance and instead invest time on valuable problem spaces, such as information architecture prioritisation, or uncovering points of friction in extensive user journeys.
They create a unified language within cross-functional teams.
A unified language reduces wasted design or development time around miscommunications, and captures existing design decisions as a point-of-reference. This is invaluable when design responsibilities shift or when teams become geographically dispersed.
Gallery of navigation component elements from the Ant Design System.
They create visual consistency across products, channels, and teams.
The absence of an organisation-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand. Design systems provide a single source of truth, and unify disjointed experiences so that they reflect as part of the same ecosystem.
Button component variations from the Ant Design System.
Major visual rebrands or redesigns can be managed at scale.
Design systems act as a single touchpoint for all interface elements across an organisation’s digital properties – so if it ever comes time to apply sweeping changes to a brand (such as colours or typography), the design system will serve as the singular reference point for rolling out these changes.
They serve as an educational tool and reference for designers and content contributors.
Explicitly written usage guidelines and style guides help onboard individual contributors who are new to UI design or content creation and also serve as a reminder for the rest of the contributors.
Anatomy breakdown of a banner component from the Atlassian Design System.
Functions of a design system
Interface elements with all possible variations
Design systems record all possible variations of a component that can be used across the platform. This allows designers and developers to quickly reference and implement the correct styles in their work. Examples include:
- Font sizes and weights – defining consistent text treatment for headers and paragraphs
- Button styles – mapping sizes, levels of emphasis, and state (default, hover, and active)
- Layout options – cards, lists, tables, modals, forms, etc
Button component properties from Shopify’s Polaris Design System.
Clear specifications & usage instructions
A design system should include detailed and practical documentation on how to use its various components. This can include:
- Instructions on how to implement a UI element
- When to use one particular component over another
- Applicable situations for layout options
For example, it may feature examples of how to use a button in a navigation menu, how to use a card to display information in a list, or how to use a modal for displaying a form.
Component specifications and guidelines from TradeMe's Tangram Design System.
Documentation should be easy to understand and follow, even for those without design experience. This should also cover the specifications of the components, so that teams are working towards a shared visual language that is repeated with guidelines in the context of a real-world product.
Subscribe to our newsletter
Conclusion
Design systems have the potential to play a crucial role in the lifecycle of your product or digital experience. They provide enhanced experiences for your users through consistent and familiar interaction points, and efficiency improvements for your team by providing repeatable UI building blocks that reduce design and development bottlenecks.
Here at PivotPoint, we’ve built design systems for a range of clients: from rapidly-evolving startups through to industry-leading SaaS providers with years of design history and rationale. Across the whole spectrum of digital channels, we’ve seen tangible improvements that come from implementing a design system.
Does this sound like something your team could benefit from? Get in touch with us below, we’d love to chat about how design systems can help you achieve your business goals.
Get in touch