Systematising an organisation’s design library to usher in their digital future

How do you establish scope when everything is in a state of flux?

Kicking off the engagement with a discovery phase gave Clearleft the opportunity to uncover – and start to understand – Malvern Panalytical’s many moving parts. During a series of stakeholder interviews we learned about related initiatives already underway and considered if and how we might align with these.

Through these interviews, we better understood the size and shape of our involvement. This was not to be a brand redesign. It wasn’t even a website redesign. Gaining insights from a diverse group of stakeholders helped us paint a much clearer picture of how we could fit in. We were recruited to systemise a collection of existing components, but we quickly realised we could push the scope to make a much bigger impact with the skills and time we had to work with.

We articulated our scope with a series of “we are…” and “we are not…” statements and a list of key opportunity areas.

This included not only the creation of a design system – which reflected a refreshed design language – but also the improvement of the user experience in a few key areas. In addition, everyone saw this project as an opportunity to rebrand the web team’s position and influence in the business and to build momentum around the wider transformation programme.

How do you create a design system for the future rather than merely polishing what’s there today?

We challenged ourselves to future-proof the system as much as possible. Our component audit highlighted very little consistency across the sites. The existing designs were visually boxy, giving the sites a heavy aesthetic and leaving little room for content on small-screen devices. We saw an opportunity to redesign high-impact areas of the site to not only improve the user experience, but simultaneously push the new design language. Obvious areas for this included the homepage, product landing page and product detail page. We also created one consistent header that adds contextual links for each site. This creates seamless journeys so that unless the user pays attention to the address bar, they might not notice they’re traversing separate sites.

How can you design a design language to inherit future brand developments?

In the interviews, stakeholders generally expressed a desire for the company’s visual presentation to be bolder. The competitor landscape had been dubbed “the sea of sameness” – an endless expanse of white and blue, punctuated by glossy stock images of busy scientists peering through microscopes or smiling at clipboards. We ran a design direction workshop with a wider group of staff to gauge this appetite for disruption. While there was some frustration at the generic appearance of the market, we ultimately recognised the value in end-users finding imagery of labs and scientists relatable.

The existing visual branding was print-led and we were keen to revisit it from a digital perspective. We emboldened the online offering with increased colour contrast and vibrance, more dramatic and better-organised type and space scales, and more spacious, structured layouts. Focusing most of our efforts on the main website, we stripped away the problematic non-data ink and emphasised the content rather than the chrome.

The new, modular component library would be designed to form the foundation of all of Malvern Panalytical’s current and future digital products.

How do you design and code together from day one?

From the very beginning of the project our Product Designer and Design Engineer worked in tandem; everything from the component audit, typography selection, prototype development to the final design system creation. This meant there was always a shared understanding, with decisions made together and assumptions tested straight in the browser. Thanks to this rapid cadence we started designing in code much earlier than in more explorative and conceptual projects. On this occasion, we decided to build our prototype for usability testing in fully functional code, rather than a flat clickable prototype that you might create in Figma or Invision.

We were keen to test this functional prototype with end-users to ensure the well-regarded brand remained recognisable through the transition, so we conducted a round of usability testing with a small group of representative users. Through the course of testing, we were also able to make a few changes to the prototype to reflect issues that previous users had identified.

This was the first time that the Malvern Panalytical team had conducted usability testing as part of their design process. The entire process proved incredibly valuable and provided wider insights and context beyond the scope of the design system. This process really opened their eyes to the benefits of involving customers in the design/build process and it’s something they plan to incorporate into all future projects.

Another advantage of building a fully functional prototype was that we could test the responsive behaviour of the design system across browsers and screen sizes. When it came to creating the final design system we could simply extract and re-use the components from the prototype.

This proved a very efficient way to work, made possible by approaching the prototype with a production mindset. Doing so ensured the components built as part of the prototype could act as a first draft of the code needed for the final design system.

How do you hand over a living design system?

As with all Clearleft projects, we worked in close collaboration with our client’s project team. This was particularly critical for a design system project of this nature, as an agency can only ever set the foundations and principles of the system. It’s up to the internal team to implement and then evolve and maintain it to meet their business needs over time.

One of the key decisions was where to house the design system. We audited all of the off-the-shelf design system tools, but none were deemed appropriate as we needed to support multiple programming languages in a custom build process. We decided to go down the bespoke route as it would provide the long-term flexibility Malvern Panalytical needed.

Once this decision had been made, we built a simple navigation structure to organise all the components, along with other supporting documentation around installation and publishing.

We also wanted to broaden the remit of the destination so that one day it could become the single source of truth for design at Malvern Panalytical. We created a home for their new tone of voice guidelines, as well as their latest brand and visual identity guidelines and assets.

As the design system came together, we encouraged the Web Team to start using the components to rebuild templates. This allowed them to become familiar with using the design system, as well as leading to some healthy conversations about when to use one component over another. This gave them the tools to continue building their experience and confidence to use and manage the design system going forward.