The design system approach

You only have to go back a few years to a time when designers overwhelmingly made websites using bespoke page designs, with no consideration of how any single element could be reused across multiple pages or products.

This approach leads to a lot of duplicated work and prevents a consistent experience being rolled out across new pages as clients expand their digital estate.

We’ve realised that our clients need something better managed, consistent and scalable, which is why, whether it’s a small product or large CMS redesign project, we take a design system approach.

What is a design system?

A design system is a collection of reusable User Interface (UI) components and documented guidance that allows multi-disciplinary teams to build digital products. Acting as a single source of truth, a design system can be shared across teams within an organisation, allowing digital products to maintain a consistent user experience (UX).

The core element of a design system is a UI pattern library yet it can include additional documentation to help guide the internal users of both the design system and the digital product. Such additional documentation can include:

• Page template rules
• Prototypes
• Page design examples
• Service patterns and templating processes, such as a booking journey
• Guidance around how to use all the patterns
• Content guidelines
• Code snippets or links to the live code for each pattern
• Insights from usability testing
• A change log

The differences between a standard pattern library and a design system are this level of helpful documentation along with a greater alignment between design and front-end. Such clear guidance is necessary for larger organisations with bigger or multiple teams and websites looking to scale quickly and consistently.

In this blog, we want to give you some insight into how Manifesto went about creating some of the larger design systems for clients.

Design direction for UI/Digital 🎨

Including ‘brand’ in the discovery phase

During the stakeholder and user interviews that are part of our discovery phase, we ask enough questions to get a feel for where the current visual design works as well as where it doesn’t. Feedback might be as broad as, “the brand is very stuffy”, or as specific as, “the website text is too small.” Any feedback is valuable for giving us an initial steer when considering a design direction.

Brand guidelines also often have gaps around digital design. Many are produced with only print media in mind, so don’t consider covering online functions such as responsive design, accessibility, interaction design and so on. Since Manifesto is expert in both brand and digital UI design, we are best-placed to fill in those gaps and successfully push any brand towards a digital space.

We have found that holding workshops with our brand-oriented stakeholders and designers helps us all by exploring and brainstorming these issues and aligning all the parties on a single vision.

Defining principles and basic elements

Following discovery, the step is to run through some checks so that we can start creating the basic elements of a design system: typography, colours, inputs, button styles and icons.

First, we look at colours:

• What combinations of colours can we use that are also accessible?
• What colours are suitable as key UI colours, for text, buttons and so on?
• Print-to-digital translation – does a colour look the same on a screen?
• Do we need to add any other colours to the palette to cover semantic UI, such as a green, red and amber for success/error messaging?
  

We also look at typography:

• How many typefaces are in use and can we simplify this?
• Are all the fonts web safe?
• Are they accessible? By which we mean – can they be easily read on different screens, at different sizes and across different languages? Thinner fonts or ones with visually similar letters can cause readability issues. Here’s a great article by the BBC on font accessibility.
• Which fonts are suitable for headings, long paragraphs of text and UI text, buttons and so on?
• Do we need to introduce any new typefaces into the mix?

Simplifying the style guide for a better performing, more sustainable website

A quick investigation into the front-end styles used on a website will tell us how much information is being downloaded when a visitor arrives at that site. CSS Stats is a great tool that delivers all of this information.

By making our design systems as lightweight as possible, we can not only dramatically improve the performance and load times of your website but also its carbon footprint, since the less processing time that’s required at the server end, the less energy is used. 

Creating a shared vision for the website through design ‘concepts’

As designers, the deeper we dig into the creation of a design system, the more the opportunities for big, creative ideas decrease as everything becomes more and more defined and locked-in.

How then, do you progress with the confidence that every puzzle piece you push into place is the right one that will, eventually, start to come together and resemble the user experience that everyone is expecting?

The concept stage at the start of any project is the opportunity to think creatively about how the finished website might look and then to settle on creating a shared vision. Having both the time to think creatively but also to agree on a design becomes extremely useful once we get into the fast-paced design production stage.

Here are some concepts that you might want to explore:

• How the brand colours might look as a key UI colour – on buttons or interactive elements, for example
• How the digital design could be matched to any printed materials
• Add illustrations or patterns across the design to solidify a brand identity
• Look at how certain modules or screens might look and behave
• Can different styling for different content types, products or website areas strengthen the impact? (This is especially powerful when using a structured content /OOUX approach)

• Can the styling change at different times of the year – Christmas, spring, etc?

Design concepts are a great way of bringing everyone together to share the same vision of the product and to generate excitement about what’s to come. They also give the visual design a rare chance to influence some of the solutions and features of the finished project.

Design production ✏️

Large websites with complex requirements require a collaborative approach in which different teams work alongside each other to create the system in stages, or a single team works through each stage one at a time.

Collaborative sketching sessions 

Manifesto starts by holding sketching sessions with our project team to get ideas for layout, content, priority and features. These are free-roaming and fun sessions that always produce plenty of ideas and useful discussion, which go on to help guide our wireframing phase.

Wireframes showing data sources and content rules

Each of our wireframes have specific annotations for where content or data will be shown, as well as where it will come from (external systems, the CMS, etc). To make this process more efficient, at this stage we focus more on the structure and content than the UI design. We have a pre-made kit of tried-and-tested, low-fidelity components to use to build these wireframes. 

UI design time

Once a wireframe for a page template or section of the product is complete, we move it into the design stage. As well as working towards creating separate components, we aim to create full page designs using accurate content, as well as a couple of real-world examples. This way, we can immediately see how all the pieces fit together.

In some cases, it’s also necessary to simply and quickly use Figma to whip up a high-fidelity prototype to demonstrate how users might interact with a design.

In summary: why use design systems? ✨

Experience and high-quality, repeatable results have convinced us that the design system approach works not only for us within Manifesto but also for our clients. Since convincing stakeholders within your own organisation may be a harder task since they are unfamiliar with the process, here are some talking points that you can take into the meeting: 

Consistency

Using well thought-out and well tested styles, icons, images and UI processes across your product is not just a way to maintain your brand identity across all media types, it’s also a far more efficient way to build a website and, if needed, to expand it in the future. Applying a single way of doing things has the final benefit of making it easy for website visitors to navigate and use the tools available within your site. 

Improved process visibility

By designing and delivering a digital product at the end of a structured and well-documented process, the design system approach means that everyone from in-house designers to the organisation’s CEO can understand how and why each decision was made. Published on a unique URL, any interested party with the correct access privilege or password can read the design principles, see the pattern library, or look through the templates.

Archived iteration logging

Every organisation is a dynamic system, with staff coming and going all the time. Since the design system approach logs all design iterations and explains the decision making process behind every change, a full record and history of the product is maintained for all to see. It doesn’t matter if the original design team retired or moved on years ago. Your current team of researchers, designers and developers will always have access to notes and decisions made on each component, regardless of whether they were on the original development team or not.

Retained learning and shared experience

Once an organisation has discussed and defined the values, principles and approaches that work best for a website, that work has been done. Sharing and scaling these approaches across other digital products will be easier next time since the heavy lifting has already been logged and recorded within the design system approach. These already defined key principles and rules can then be rolled out across your entire digital estate in a consistent and well documented way.

Allows page-building workshops 

Design systems set up and maintain a pattern library that supply the tools to create new pages that obey all of your organisation’s rules. This tool box allows non designers to turn their ideas into workable web pages without having any training or product knowledge. Inviting stakeholders to a page-building workshop is a fascinating way to get people from all parts of your organisation interested and invested in your digital estate.

Frees digital teams to focus on UX 

Because a design system already has your UI designed and defined, your digital design team (if you have one) can focus more on the big picture of creating great user experiences, rather than constantly tweaking the look of a website. This lets them play to the strengths of their skillset.

Rapid design and testing  

A design system allows design prototypes to be created quickly using the same tools as the finished product. Such a simple and straightforward process means everyone is looking at the same systems from the very start, with the obvious benefits that come with this.