Empowering design systems - Making patterns last over time

  • 23 januari 2017
  • 0

We are experiencing a re-architecture of the web, away from designing isolated websites for specific purposes, towards designing systems of connected pieces of content – content that exist independently in different views and contexts. It is more important than ever to have a strategy for how brand experiences translates across different websites and applications, as well as different screen sizes and devices.

When you shift focus from designing websites towards designing systems, you lay the groundwork for a strategy that endures in the long run, for the entirety of your web presence and application eco-system. When done right, a design system will transform the way you work by empowering flexible, scalable and consistent brand experiences that permeates throughout all your solutions.


As the digital transformation is gaining momentum and organizations' web presences grows rapidly, the number of interactions between the organization and the end users increases. Users engage with organizations and companies across more channels than ever before. Organizations are evolving into being present on several separate websites, portals and in mobile applications, and at the same time, they develop internal web applications and business portals into dynamic, personalized digital workplaces. Every destination and experience is often designed for specific audiences and purposes. Websites have developed from being relatively simple into far more complex, versatile and business-critical solutions.

In my profession as an interaction designer and front end architect I see three major opportunities to take into consideration in terms of evolving your brand experience strategically in the context of the digital transformation: 

1: Design for flexibility

Our web solutions and services are consumed by an ever-growing plethora of devices. It is no longer just about enhancing web experiences for users on mobile phones, tablets and computers. Everything connected to the internet with a web interface can consume your services. This opens up the possibility that everything can be consumed anywhere, on any device, in unpredictable ways and in an infinite number of scenarios.

It is therefore more important than ever to design a flexible web experience that translates well across your applications as smooth and seamless as possible. Everything is connected.  

2: Design for scale

A big challenge for many organizations is the fact that they are unable to scale as fast as they want due to technical debt and legacy systems. For many organizations, the application eco-system contains applications that are relatively new, whereas others are legacy and old. One thing I see many organizations has in common is that good usability and user experience is rare, seen to the overall experience between applications. Even more importantly, they deliver the organization brand very different across applications. One unique brand, but too many different experiences.

The low quality of many user interfaces and the countless variations between how end users and employees interact with them have very negative effects on productivity, among other things.

Knowing this, while keeping up with the ever-changing technology, makes us want to start over on a blank page every second year, throwing our web designs and solutions away. This will give us a shiny new design and the latest technology for the time being, but without a strategy for how to scale in today’s digital landscape, the history is bound to repeat itself. The challenge is in fact mainly about one thing, creating and maintaining a strategy for scaling web experiences. Instead of building new things we should focus on maintaining and refining what we already created.

3: Design for consistency

Gut feeling – because people are emotional, intuitive beings.

Marty Neumeier

As users move from application to application to complete a specific task or a set of different tasks over time, they will be exposed to the visual design, functionality, interactions and the overall tone of voice of your company or organization brand. Creating consistency across these disciplines, regardless of application, helps your users to complete their tasks faster and builds expectations for future interactions with the organization.

This quote by Jakob Nielsen summarizes the essence of this very well:

Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience.

Jakob Nielsen

Your brand is not what you say it is. It is what your users say it is. It is what your users feel it is when they interact with you. People see you as one single brand, regardless of the number of channels or applications you are present in. People simply expect your brand to be consistent.

To meet these challenges, we need an approach that enables us to work more systematically. A strategy to create flexible, scalable and consistent experiences that will ensure and reinforce a strong brand experience that permeates throughout all our solutions.

Designing systems

In the same way an architect must understand how their new buildings will affect the surrounding landscape and how the landscape will shape the use of the building, in the same way we must understand the landscape of applications which the solutions we create will be a part of. This means that we need to understand all the components to understand the entire web presence.

The components are the building blocks that make up the buildings. By extension, these building blocks also build up the landscape. These are the building blocks that will shape how we meet, interact with and experience the landscape. To create consistent and seamless user experiences, we need to understand the relationship between these different components, how they are interconnected and how they will affect each other.

Instead of designing static pages or websites and produce those as lasting, pixel perfect portraits, we should design high quality, scalable and dynamic components. Components that users can interact with regardless of how, where and when they are consumed.

Instead of designing one or more websites, we should design a system of design patterns and components that can be reused in an infinite number of places, regardless of the context and scenario. Such a system is called a design system.

Invigorating fuel to every new solution

Working with a design system will give you agency to see the big picture of your web presence. And by looking at the big picture, you can discover and collect common design patterns and common functionality across your solutions. You can create a system of components that have a single high-quality user interface concept, a single purpose, that can be consumed by all solutions. This means that you are designing small components, small building blocks, completely stand alone and independent from each other. You will use these building blocks when developing new solutions. You will recycle these building blocks in your solutions, over and over again. These building blocks are key and absolutely critical for the flexibility, scalability and consistency of your web landscape. 

If any application is in need of a new component, working systematically with a design system means that the strategy is to develop one concept, one design and one technical solution for that component. The requirements for that component should be based on the needs of not only the application that needs it at the moment, but of every application in the application eco system. This ensures that the component is designed to scale for different screen sizes and can be taken out of context and still work the same way in all applications you like, both now and in all future solutions. 

A strategy that endures

With a classic “page to page” design or “application to application” design, the complexity increases constantly with time (can also be referred to as the technical debt). A design system does indeed demand a bigger effort initially but the benefits of the strategy will very soon prove themselves.

A design system is a long-term investment. The longer the design system lives, the more value it will bring to the entire organization.

Stay tuned for my next blog post!

This is the first blog post in a series of posts on design systems. In my next blog post I will plunge into how you go from realizing that you need a design system to starting creating one. I will walk you through what you will need to get started and how you maintain your system once it is created, to realise a living design system that continuously empower your solutions. I will also discuss the why and how for visualizing your design system in a style guide.

Would you like to get a head start?

Check out our solid white paper on the topic style guides and design systems to learn more on the subject. You can easily download it here (in Swedish).

If you have any questions you are welcome to contact me.

0 kommentarer

Skriv kommentar