Design Systems: Your missing ingredient for exponential growth

Introduction

Dark chocolate is the secret ingredient to making a good chilli.

Standing tall and speaking clearly is the secret ingredient to appearing confident (even when you feel anything but).

And design systems, well, design systems are the secret ingredient to reaching exponential online growth as a brand.

What is a design system?

In its simplest form, a design system is a set of components that can be reused throughout a project.

But design systems are more than just a collection of components.

Design systems create a standardised workflow that interweaves consistency and meaning into every aspect of your project. Whether you have intentionally created design systems or not, you’re probably already using some form of design system.

From making sure all the call-to-action buttons on your website look the same to following a well-defined blog structure or using the same page layout for each service page, your website will be built using a collection of design systems.

Here’s the thing: design systems are powerful.

Get clear on your design system to futureproof your brand. As your project grows in complexity, your brand evolves, and you bring multiple designers onboard, your design system ensures everything remains consistent throughout the changes. No more worrying about mismatched designs or clunky elements.

What does a design system look like?

While a design system sounds simple, the best design systems contain multitudes. A design system is a way of distilling complex requirements into simple, repeatable frameworks.

Your design system should be a stack of files that work together to create your overarching design.

At Skyward, we split design systems into five separate elements:

1. Foundation components

2. Shared components

3. Sections/Widgets

4. Pages

5. Page Templates

I like Brad Frost’s method of viewing design systems as atomic design. Everything is made of atoms. This atom is the smallest functional component. As we bring atoms (foundation components) together, we create molecules (groups of foundation components). From here, organisms (shared components & sections/widgets) are born until finally, we end up with the final page design and usable page templates.

Let’s break down what each of these design system elements looks like:

Components: Foundation Components

This blog you’re reading right now exists because of the design system we built. The words in the blog copy, the font family, the featured image, the category tag, and the blog sidebar — these are all made from foundation components of our design system.

Foundation components, or core components, are the smallest working parts of the design system. These are the atoms and molecules behind the design.

Think of HTML tags such as form labels, inputs or buttons as atoms. Font families, table cells or icons are also examples of atoms. On their own, these atoms are seemingly insignificant. When we bring them together, we have tangible molecules such as a contact form, dropdown menu or search bar.

These atoms and molecules (our foundation components) aren’t fixed to a single area of the site. They can be used time and time again throughout the entire site to create new components.

Components: Shared components

Next up, we have shared (or global) components. Shared components are isolated elements that are reused across the entire site and have a specific purpose.

When you use a shared component, all of that component’s elements will appear the exact same across all the entities in which it is used.

Take your website footer, for example. The website footer remains the same as you move from page to page. Same goes for the header of your website. The sidebar used in blog posts is also a shared component. While the blog sidebar may have some responsive elements based on which blog it appears next to, the foundation components that make up the sidebar always remain the same.

Components: Sections/Widgets

Now, our components get a bit more exciting. Introducing: sections and widgets.

We use sections when building websites, while applications are made up of widgets.

You might hear some people refer to sections or widgets as blocks. Whatever you call them, these files are where our design system’s atoms and molecules start to take shape. Sections or widgets are groups of foundation components that hold a specific purpose within your website or application.

Sticking with the atomic design theory, these sections/widgets would be seen as organisms as we start to create distinguished sections of the interface. A hero on your website or a login form on your application are examples of sections or widgets. In reality, there are probably far more sections/widgets than you’ll ever use. But the beauty of a design system is that you can easily deploy the components you need when you need them.

Pages

From here, you can start designing pages. Take all of your foundation components, shared components, and sections (or widgets if you’re designing an app) and pull them together to create a singular page.

Using a design system makes it easy to build new pages. You simply build the page block-by-block from atom-level:

Shared components + Sections/Widgets = Pages

When creating a new page from scratch, you choose which elements appear on the page. These elements will be chosen based on the specific purpose of the page. For instance, you may want to include contact form components, sections such as text blocks and contact information fields, and shared header and footer components when creating a contact page.

Page Templates

Creating every page from scratch is tiresome work. Creating page templates lets you automate part of the page creation process so you can speed up deployment.

A page template is a repeatable, pre-designed page layout featuring more flexible content within the page itself. Typically, page templates will feature placeholder components that can be adapted to suit different purposes.

SaaS tools can use a page template to build out each of their ‘features’ pages. This ensures all the ‘features’ pages follow the same design constructs and contain all relevant page components. Other examples include blog posts, service pages, and landing pages. Obviously, you can create as many page templates as you need to serve each of the different types of pages on your site.

The idea behind page templates is to create a cohesive design using components of your design system. Plus, it’s much quicker and easier to use a page template than keep recreating the same layout from scratch.

Why a design system is your missing ingredient for exponential growth

Benefits when creating designs

Having a design system speeds up the design process as components can easily be reused. You no longer need to fumble around trying to replicate existing components. You just select the components and move forward with deployment.

These components also eliminate the risk of inconsistent design as all foundation components will be pre-defined to match your preferred design guidelines.

Better yet, team discussions will flow smoothly as everyone understands exactly what site elements they’re talking about. Miscommunication will become a thing of the past and it’ll be easier for non-developer teams to communicate their needs with developers.

Plus, you can easily onboard new designers and help them familiarise themselves with the design system.

Benefits when implementing designs

A design system eases development discussions between teams by providing clarity on what is (or isn’t) implementable. This makes it easier for cross-functional teams to collaborate on site design and build functional pages.

Plus, developers will gain an instant overview of:

• what components have and haven’t been built and;

• how components should be isolated and reused.

Overall, design systems minimise decision-making as the components have already been thoughtfully broken down. Instead of painstakingly deliberating which elements to use where, you can just find the components you’re looking for and voila you’re good to go.

Benefits when testing

Your design system will also make it easier to test components in isolation. And once those components are turned into reusable sections or pages, you can rest easy knowing they’ve already been tested.

Testing isolated components makes it easier to spot the cause of any problems. Depending on where those components are used throughout your site, you can pinpoint which areas of the site will be affected by the issue. So, you can fix all impacted pages as swiftly as possible.

When we run tests, we expect certain outcomes to occur. Being able to test components within our design systems means we can integrate systemised thinking into every aspect of the project — right down to the tiny building blocks of the design. If something doesn’t work as expected, we can focus on optimising that aspect before moving on to the next.

Why should you implement a design system?

Still wondering why you should implement a design system? Listen up…

A design system is a one-way track to improved scalability.

Design systems make sure all the elements of your website or app work together cohesively to achieve a set objective. Backed by a thorough design system, you only need to focus on implementing the necessary components. As your project evolves, you can easily adapt your design system too.

The consistent nature of a design system means your projects will always contain high-quality, polished components that you can rely on to perform exceptionally well. This frees you up to create new components and elements as needed, rather than starting fresh every time you redesign your site, deploy a new presentation layer, or add a new page or app component.

Finally, you technically only have to do the work once. Design a component once and reuse it infinitely. What more could you want?

Final thoughts — design systems at scale

It’s practically impossible to build at scale if you don’t have a design system in place. Or, at least, it’ll be a heck of a lot more work.

Save future-you, and your developers, from unnecessary work by creating a design system. A well-maintained design system will ease cross-team communications and ensure your site or app performs optimally while creating reliable branding and UX that your customers love.

Further reading:

Take a look at a design system in action with:

• This behind-the-scenes view of Airbnb’s design system

• This overview of Uber’s design system

If you want help implementing a futureproof design system that makes it easier to scale your brand, drop us a line and we’ll help you get started.