Design systems

What does a design system include?

A design system is made of two parts: a style guide and a pattern library. Their purpose is to streamline and consolidate your processes so everything included must be purposeful and strongly defined.

Illustration of a diverse group of people standing in a circle, holding hands. The individuals, depicted in varied clothing and different hair colors, embody unity and community on a light gradient background—a testament to innovative UX design.

Yes, you may already have some of the tools or elements that make up either of these sections...

Style guide

A style guide dictates the visual or customer facing manifestation of your brand. It is made up of your design principles, brand elements, and usage guidelines.

Your design principles are the guiding light of how you express yourselves, direct your design, and reflect your brand values. For example, Amy's design principles are:

A 3D bar graph with colorful, abstract peaks and valleys on a white platform. The bars vary in height and color, transitioning from red to purple, depicting data trends in a creative manner.

Speed analysis

It may sound obvious, but loading time is the first thing your customer experiences when visiting your site, whether consciously or not. The longer a page takes to load, the higher the bounce rate. There are many factors than can affect page speed, from your hosting to your image sizes. Our analysis will help you to address.

An open book with a 3D landscape emerging from its pages, featuring trees, a figure, birds, and mountains against a clear sky. Small clouds float above, creating a whimsical, imaginative scene.

The mobile experience

Over half of all internet traffic (61%) comes from mobile devices. As such, Google ranks and indexes websites mobile-first. We’ll conduct a mobile usability test that identifies any issues that could hinder Google from ranking your site highly, or users from dropping off, and provide recommendations to correct them.

The mobile experience

Over half of all internet traffic (61%) comes from mobile devices. As such, Google ranks and indexes websites mobile-first. We’ll conduct a mobile usability test that identifies any issues that could hinder Google from ranking your site highly, or users from dropping off, and provide recommendations to correct them.

Your brand elements are:

Logo, colour palette, typography, icons, illustrations, photography...

Your usage guidelines define how your brand elements work together, providing parameters for designers to work within that don't divert from the brand vision holistically.

Pattern library

Technical SEO audit

Each page of your website will have its own ranking on search engines depending on how easy it is to crawl. There are a number of factors that can increase your ranking, just through how your site is built. We’ll investigate everything from your link structure and meta data to your sitemap and SSL certificate to optimise your site for higher rankings and organic traffic.

Content SEO audit

SEO is something of a buzzword for a reason—the way your content is written, structured, and presented makes a huge difference to both your search engine ranking and your users’ experience. But it’s more than just keywords; our audit also investigates images and videos, tags, internal links, search appearance, and your URL structuring to ensure each page of your site is optimised.

Benefits of a design system

A style guide dictates the visual or customer facing manifestation of your brand. It is made up of your design principles, brand elements, and usage guidelines.

Your design principles are the guiding light of how you express yourselves, direct your design, and reflect your brand values.For example, Amy's design principles are:

Consistency

A defined set of assets that become familiar and cohesive across touchpoints increases the user experience and brand recognition.

Efficiency

An easily accessible bank of assets and standards removes the need to start from scratch every time. This not only saves time, but allows room for higher level creativity.