Cohesion logo

Component based design for marketers.

By Craig Hanna

11th Feb 2018

Share

Design consistency is becoming increasingly difficult to achieve with the volume and complexity of today’s marketing and product design requirements, yet increasingly important to achieve for good UX and CX.

In the past a typical business had only a limited number of “designs” to create and the change of pace was slow. Typically you might have developed a small number of print adverts and/or direct mail, some customer communications or point of sale but in all cases the volume was limited, so designing to individual requirements worked. Brand guidelines were enough to make sure there was consistency across different designers, partners or regions. 

Then along came digital and design changed. There was a lot more to design to do and the need for speed became more acute. These changes have not stopped - channels continued to proliferate, responsive design added complexity, optimization became a core business challenge etc.

The answer has by and large been to hire more people, design faster or compromise on what you deliver. None of these options scale into the future.

It takes a while for new approaches to arise that directly meet the challenges of a new medium (digital) and context (customer expectations).

David Bee - CREATIVE DIRECTOR AND PRODUCT OWNER, COHESION

So design today is struggling to scale with the applications it supports because design is still bespoke—tailor-made solutions for individual problems. Design consistency is becoming increasingly difficult to achieve with the volume and complexity of today’s marketing and product design requirements, yet it's increasingly important for good UX and CX.

The evolution of design systems

Let’s take a step back in time and look at how and why component based design emerged as the answer to the challenges of agile organizations to deploy great customer experiences online at a speed and scale that matches customer and business demands.

In the 1960s, computer technology began outpacing the speed of software programming. Computers became faster and cheaper, but software development remained slow, difficult to maintain, and prone to errors. This gap, and the dilemma of what to do about it, became known as the “software crisis.”

At a NATO conference in 1968 on software engineering, Douglas McIlroy presented component-based development as a possible solution to the dilemma. 

Component-based development provided a way to speed up programming’s potential by making code reusable, thus making it more efficient and easier to scale. This lowered the effort and increased the speed of software development, allowing software to better utilize the power of modern computers.

So to the rise of design systems in design today. By taking the same approach to design and creating a visual language for your business that is based on best practice principles you could make design both reusable and, accessible to a much wider team.

Definitions of modern design thinking

Before we look at how marketers benefit from being able to work with design patterns here are some definitions you might find useful.

A design system is a collection of reusable design components, guided by clear standards, that can be assembled together to build any number of applications.

In essence a design system unites teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring digital products to life.

There are lots of approaches to building design systems and no single right answer but here are some great examples we rather like:
 
Salesforce
Lonely Planet

At a simplistic level Atomic design is the creation of the individual design components that sit within your design system to meet your brand guidelines and follow best practice for UX and CX.

Design patterns are collections of the components in your design system that can quickly be deployed to build out the visual layer. 

The important thing to remember here is that a well constructed design system, usually developed by experienced designers within agencies, can then be used to build design patterns that can the be deployed easily by teams with less design experience without affecting the overall quality of delivery.

Design pattern example

An example of a design pattern to display content cards (Pinterest)

Why does this matter to marketers?

Most forward thinking marketing teams are focused on creating and delivering customer value and understand that “experience” is a vital part of that value creation (rather than just thinking in terms of product or services we sell). They also understand that customer expectations are continuing to rise and that modern marketing is therefore about delivering a seamless, crafted digital experience at every customer touchpoint.

By developing design pattern working practices marketers can deliver more without compromising on quality or experience:

Conformity not rigidity - Conformity to brand guidelines is essential but usually this has come at a cost. The rigidity of template based digital design for example. Design patterns allow for flexible design within the construct of your brand guidelines.

Built for an agile world - Responsiveness to opportunities as they arise is vital. Waiting for design teams to develop bespoke designs or for IT teams to implement CMS changes is no longer good enough

Democratised UX and CX - Investing in great UX and CX are vital but you don’t want to reinvent the wheel each time. Design pattern thinking allows a much wider team to create content without compromising on UX and CX

The more agile you need to be (and who doesn’t), the larger your team and the larger your site or number of sites, the more efficiency design patterns bring.

Cohesion and design systems

Cohesion DX8 is a tool that provides your agency with the capability to efficiently build design components and design patterns already optimized to be fully responsive and then make them available to the wider business.

Cohesion DX8 then allows marketers to deploy these design patterns quickly and efficiently from a pre-existing library enabling them to create a multitude of page layouts knowing they will work seamlessly together, follow your brand guidelines and deliver a great UX.

DX8 and Design Patterns

This way of working also allows for much quicker iteration of your designs if needed:

  • change a brand color - just change once and update across all pages or websites
  • update a “design element” - such as a button after a test, then deploy universally
  • add content to an existing page - just drag and drop the required design pattern on to the layout canvas and deploy

Finally Cohesion allows you and your agency to think beyond responsive. 

With the ability to create design pattern variations by breakpoint you can now introduce elements of adaptive design where it’s needed. One example might be a purchase Call To Action (CTA) on your website. While responsive design will resize for each screen, adaptive allows you to choose a different design pattern for mobile that is perhaps a different color or font size because that will offer a better, clearer experience for mobile users.

Design system thinking and its offspring (atomic design and design patterns) go to the heart of how we think about design in a digital age.

About the author.

Craig Hanna, Sales and Marketing Director

Craig leads Sales and Marketing at Cohesion and is a regular keynote speaker across Europe and US on a range of topics from marketing to digital transformation. Craig has over 15 years of experience across the digital sector and has worked with DuPont, L'Oreal, KPMG, British Airways and Vodafone among many others.

By Craig Hanna

11th Feb 2018

Experience

Get a demo and try DX8.

Request a personalized demo and sandbox to test drive DX8 for yourself.

Get a demo