How design frameworks help to scale your digital estate efficiently

From time to time, organisations realise that their biggest design challenge is managing the sprawling digital estate they have built up over the years

When this challenge develops to the point where a refresh is required, it feels hard because it is like rewiring the house while the lights are on.

This situation has probably come about because, over the years, you’ve wanted to develop products, services or initiatives that attract new clients or engage existing ones and you’ve been keen to react quickly in doing so. While this urgency is applauded, an unfortunate consequence might have been that your brand has become diluted or distorted along the way.

At Maido, one of the best ways we find for combating this is by developing and utilising a set of global design frameworks. By developing brand pillars and then using the best design and development tools to let these scale efficiently across channels, we help clients to future proof their digital estates.

Understand the landscape

An organisation’s confused online presence can manifest itself in a number of ways. For example, it might be a range of connected but inconsistent microsites or a mobile app that doesn’t fit in with the overall brand.

When we assess a company’s digital estate, it’s important to ask why it has got to this point. Firstly, we address why it looks like it does from a range of internal perspectives. This allows us to understand the processes that have brought this situation into being, as well as allowing different voices to explain if seemingly disconnected elements are in fact crucial to operational needs.

Secondly, the question of why should be framed in the context of customers and the experience that works best for them. This focus on an ideal customer experience will be an absolutely vital part of future proofing your digital brand.

Design at scale

Creating a global design framework, which can include typographic hierarchy, grids and guidelines for image treatments, animations or interactions, is the next important step in building visual and experiential consistency. It also allows us to scale your digital estate more simply and efficiently.

To manage this, we use tools like Sketch, which has a range of features that build scalable and efficient workflows into our processes. One example is ‘Symbols’, which helps form reusable components that will take effect across the entire design file if updated. Another is ‘Shared Styles’, which allows us to give design elements, such as type styles or colours, certain properties that are shared across multiple components and changed across the whole design file.

Reusability is an important feature of all the design tools we adopt and is a major reason why we use plugins like Paddy, which automates consistent padding.

Develop efficiently

When it comes to the development stage, separating the content management layer from the presentation layer is an important part of ensuring scalability.

By making this choice, we are able to make adjustments to either one without needing to worry about expensive wholesale changes. For example, we can replace the entire front—end, customer—facing appearance of a website without ever having to touch the Content Management System.

Not only that, this separation allows us to choose the best tools for each side, rather than make a compromise on one because of the other.

Another approach we adopt is to break down design and functionality into small, focused components rather than clunky, convoluted templates. It allows us to rationalise the structure and flow of the data that passes through our application, improving the reliability of component behaviour and helping us to test.

These principles align perfectly with React, a JavaScript library we use for building websites, web apps and native apps. Since its launch four years ago, React has developed a thriving ecosystem that allows teams to completely rethink their approach to building complex applications at scale.

We can also combine React with Sketch to improve our workflow, giving us living style guides that are a constant representation of production sites. This provides us with detailed documentation of how a site works, so that we can easily maintain it, make updates to it and improve our development workflows.

Digital experiences delivered

One of the clearest examples of how our approach to designing and developing at scale has paid dividends is our digital experience work with David Lloyd. This project covered mobile, web and in—club digital touch points to drive retention and increase acquisition while remaining true to the company’s brand values.

If you think that our approach would help you to take back control of your business’s sprawling digital estate, we’d love to hear from you.