Turn the digital into art

As part of a five-year digitisation strategy, the Wellcome Trust approached Clearleft to design the new Wellcome Library website. The site had to be capable of carrying significant amounts of content (including new digitised archive material) whilst being fully responsive on all browsing devices.

During the 6 month project, we were asked to lead the Research, User Experience Design, Visual Design and Front End Development portion of the project. Back end development was undertaken by Digirati, with whom we maintained close support throughout the build, ensuring our design systems were seamlessly integrated.

During the initial research and UX phase Clearleft conducted extensive research with both stakeholders and real users. A new IA was developed, tested and iterated upon. A comprehensive set of wireframes was also developed.

The design of the Wellcome Library website was approached in a modular way, which has several benefits for large content heavy websites. Modular designs are made up of a clear, consistent design language that users can quickly understand and recognise throughout the site. In addition to this, a modular site is more flexible when a site needs to adapt or grow in the future.

I like the Pattern Portfolio so much that I’d want to insist that anyone delivering front-end assets to me does so with this or something very similar.

Rather than handing over fully compiled pages or lengthy documentation, Clearleft provided a pattern portfolio to the back end development team (Digirati). The pattern portfolio comprises of a collection of code fragments presented in a single page, along with a series of examples which pull together these fragments into pages. These code fragments, called patterns, can be placed in any combination to create any page of the website. This in turn creates a more flexible website where individual parts can be reorganised and reused without breaking.

By taking this approach, everyone involved is afforded greater flexibility. For Clearleft, the modular nature of the pattern portfolio enables us to make changes to specific components without affecting the rest of the site. For the developers, it means they can take the individual modules and reproduce them within a CMS, ready for use by editorial teams. For those involved in the editorial process, it means they can reliably use any combination of components.

We’ve found that this design approach benefits the vast majority of projects we embark upon. For the Wellcome Library project, it’s been particularly appreciated and has confirmed the benefits of such a system to us.