A design system can provide your brand with guidance to help all your digital properties look and behave consistently – ultimately delivering a better, frictionless UX for your customers.
A scenario: Your organization recently launched a new service or product line and you’re excited to bring it to market. A new digital experience needs to be created ASAP and with autonomy, your designer decides to put their own spin on the design.
The resulting microsite has new componentry, functionality, and visual design hierarchy. While the work they did is great, this site looks and feels much different than your existing properties. Your consumers might be confused by the inconsistencies, and that worries you.
This results in multiple rounds of revisions and after a few days, maybe weeks, you finally get the go-to-market deliverable right. The new microsite conforms to the rest of your site in terms of fonts, buttons, and the entire shopping experience. However, you spent a lot of time (and money) in the process and may have even missed a release date. Then guess what? Now it’s time to launch the next new product in the pipeline.
You could’ve benefited from a design system – a pattern of approved design components and guidelines for how, when, and where they should (and shouldn’t) be applied.
Does my organization need a design system?
If your organization deals with any of the following…
- Large integrated, yet siloed teams
- Brands with many sub-brands or subsidiaries
- Sophisticated digital experience platforms where components require structure and governance
- Lack of governance over the web development / experience
- Inconsistent user experiences
- Unstable in-market solutions or those that need re-examination
- Inefficient design teams
…you’ll benefit from a design system.
Design Systems offer tremendous value for many organizations by forcing discipline in design and marketing, but require a buy in from your team to make the most impact. Investing time and resources up front developing your design system will streamline your processes and alleviate pressures from decision making.
So, what is a design system and where do you begin?
What is a design system?
A design system is a pattern library for all your design elements and functionality. It is a guide for when to use (and not use) certain rules and elements. You use a design system to make sure your website provides a consistent, seamless experience and to improve a user experience or design problem – helping users understand what to do and what to expect in their digital experience.
Design systems have been around for a long time. They’re used by impressive retail brands like Apple and REI. REI’s design system is a great example of a solution that digital product development teams use to create a cohesive and consistent experience for customers across various touchpoints and properties.
In essence, design systems are about normalizing your website’s features, functionality, and style. Then applying it consistently and with intent.
Think back to your very first days on the internet. How did you learn to navigate a website – click on images, use a drop-down menu, or fill out a form?
Since being introduced to modern web browsing we, the internet users, learned to navigate various websites and developed habits that help us get from point A to point B in the most efficient way. We value websites with a convenient user experience and good design.
In fact, according to a recent survey by Clutch, 94% of users say easy navigation is the most important website feature and 83% of users appreciate when a website looks attractive and up-to-date.
When your organization has a design system in place, you’ll be able to build more conversion-focused websites more efficiently, because you’ll have a reliable resource for anyone involved to reference.
What goes into a well-executed design system?
Achieving style normalization starts with taking a critical look at every design pattern you currently have in production to look for redundancies in intent. For example, if X and Y are doing the same job, you need to determine which one to keep as part of your updated design system, and which to scrap. Remember, it’s about creating a consistent user experience. We recommend a careful audit to document and normalize both interaction and visual design, with considerations such as:
Interaction System
How a user interacts with your website features, functionality & content, including:
- CMS & Templates:
- When to apply approved templates (across category, product, and landing pages for example)
- What elements or blocks are allowed to be used in specific templates
- What sort of information goes in forms
- Componentry & Functionality:
- How buttons are supposed to look
- What style of menus to use
- How the shopping cart experience works for users
Visual System
Normalizing the style for brand elements that sit atop your website(s) and for some companies, sub-brands:
- Which fonts to use for headers and body copy
- Which colors to use where
- When to use your logo and where
- How much padding to use
- How to align images and text
Benefits of a well-executed design system
If you’re running one website or several, having a consistent and unified experience is likely to lead to a better user experience. Here are a few tangible benefits of a consistent interaction and visual design system:
- Consistency in design: Pull elements from your existing library and fit them into a wire frame that is consistent with the rest of your properties.
- Speed to market: Save time creating new web pages or applications by using established and approved web componentry, hierarchy, and structure.
- Process Efficiency: Since you’ve already set standards and established rules there’s no need to create anything from scratch or wait for approval for every single asset. If you create very specific guidelines to follow, you’ll help your designers and developers save time as they have a reliable source to refer to.
- Product Stability: There’s peace of mind knowing your product won’t break. You can be confident knowing you won’t need to keep QA testing since you’re reusing themes and assets you already know work and are accessibility tested.
- Usability: Utilizing consistent interaction and design elements helps the user associate actions with their experience, making for a more confident, convenient, and frictionless user experience.
The key outcomes to developing a well-executed design system are the following:
- A Digital Style Guide
- Guidance on intended, acceptable, and unacceptable uses of design and interaction elements.
- Governance and processes for creating new components
At the end of the day, the more time you spend investing in your Design System, the more you’ll get out of it. Your design system will become an invaluable reference for your organization – marketers, designers and UI engineers alike.
