Case Study
The Sanger Institute

Major overhaul of an aging site - a UX, UI and design project with some unique challenges

UX/IA and Visual Design of public-facing website

2012

Brief

The Sanger had a propritary web system that acted as a front end for hundred of research projects. As the site had grown the navigation scheme was simply overwhelmed and users were struggling to find the basics. Additionally the graphic design was dated.

Challenge

There are hundreds of projects and datasets totaling many petabytes of data on the website. Each project is lead by a world-class scientist who thinks, quite naturally, that their research is the most important thing in the world. So how do you present them equitably and clearly?

This was an extreme form of the well-known 'silo problem' in websites. This is where the website reflects the internal politics of the organisation and insufficiently addresses the needs of the user.

Additionally the site is delvered on an inhouse system that is very efficient but somewhat quirky. For instance there was no way to automatically produce navigation structures and menus.

Solution

I ran a thorough user-centred design process for the site, consisting of the following elements:

  • Analytics study
  • User testing
  • Content mapping
  • User journey mapping
  • Prototype development and testing
  • Visual design
  • Template coding

Notes

One of the key aspects of the project was getting the scientists to buy-in. Of course what scientists like best is evidence so I took a lot of care with user testing and benchmarking improvements.

Mapping the existing site was a huge challenge as there was no existing list of content or navigation. In the end I used a command line program .dot to generate a very large sitemap that covered the 1400 top-level pages - I uncovered several sections of the site that no one ever knew existed!

Once we had a map it was a lengthy but straight-forward process to cull old or irrelevant sections of the site.

After developing candidate user journeys I used Axure to develop a clickable prototype website, just enough pages to test theories and user pathways. I repeated user tests to make sure we were making progress.

Finally we looked at a visual design, in this process I parked myself in the cafe with three candidate designs and talked several treatments through with people - and they voted on the one they liked best.

I took all this feedback back to the SMT and they chose a clean and elegant design with subtle drop shadows.

From this point I worked though the full IA and visual design for all the site templates. There were some interesteing constraints to deal with - for instance as a site that was still hard-coded dynamic navigation systems weren't possible to implement.

After supplying the html templates I then left the project and the Sanger employed people to hand code(!) the pages. Luckily there were now only a couple of hundred pages to produce...

This site lasted from 2012 to 2017 when it was replaced by a new, responsive website on Drupal - a solution I suggested might be a good idea back in 2012!