User experience design for the Clifton Suspension Bridge

Historic bridge seeks friendly digital team

When The Clifton Suspension Bridge Trust (CSBT) approached Modular with their request for a user centred website overhaul, we couldn’t pass it up. They needed to refresh their website and improve functionality, but doing justice to the brilliant innovation that went into the bridge’s design, while untangling the myriad of ever expanding content, would be no easy feat.

User centred, branded, CMS

The Clifton Suspension Bridge Trust needed to launch a CMS website that could handle high traffic and ever-developing user needs, while calling back to the innovation and history behind the stunning landmark. What they had was an unruly CMS, outdated visual identity and a labyrinth of convoluted user journeys that was damaging user experience.

Laying plans

The original website, commissioned in 2014, had previously ticked all their boxes. It wasn’t a bad website, but user and organisational needs had outgrown it. As new content and functions were added, the site got harder and harder to maintain. 

One of the first things Modular had to do was decide which CMS would work best for The CSBT. At the time the site was hosted in Drupal, a popular CMS but one that requires a skilled content manager to edit due to its inflexibility and technical interface. The CSBT simply did not have the resources to make continuing with Drupal a viable option. They needed something that would make content easy to update quickly and look good straight out of the gate.

The solution? A bespoke CMS supported by WordPress. Using WordPress meant that there would be plenty of resources to utilise due to its community of developers, extra plugins and an existing framework of modules. Building on core components with new HTML and CSS helped achieve unique design elements and much needed functionality but kept content management as simple as possible.

Bristol’s Clifton Suspension Bridge Trust user experience CMS website
Clifton Suspension Bridge

A good foundation for CMS design

With the decision made to create a bespoke CMS, work started on clarifying the purposes and user journeys of the new site. The main problem facing users was finding the right pages to purchase crossing cards and book activities for visiting schools. Not only did the pages need to be resurfaced in a way that made them easy to navigate, new forms needed to be created to facilitate this. A lot of work went into making sure that the entire site was easy to understand and follow.. 

Paying Homage to brand

One thing that was very important to the team at CSBT was reflecting the elegant curves of the bridge in the new website’s design. We proposed a few different designs, but the curves of the bridge are an integral part of the CSBT brand, used in all marketing materials. A generic curve wasn’t going to cut it.

The long, sweeping curves you can see on the website today were designed by taking photos of the bridge from different angles. Our User Interface Designer Lauren Webb referenced these throughout each stage of design and build to make sure the vision for the site came to life. They are the exact curves you’ll see when crossing the bridge or looking at its silhouette across the gorge.

Paired with blueprints and engineering diagrams, these curves pay homage to the innovative design of Isambard Kingdom Brunel that characterises Clifton Suspension Bridge.  That might sound straightforward, but this turned out to be one of the hardest aspects of the project. A senior HTML developer was called in and hours of work went into perfecting the curve designs, overlaying the blueprints and ensuring responsiveness across devices.

We think it paid off. Now, not only do users have a smooth, straightforward user journey throughout the site, the bridge is instantly recognisable in the branding. Just like the real thing, it feels sleek and well made, because it is.

Light the Night

Our relationship with The CSBT hasn’t stopped there. This year we are sponsoring their Light The Night event. The lighting of the bridge has been a tradition for many years but this year will be just that little bit more special. As part of the UK wide #SupportOurMuseums campaign, the CSBT visitor centre ran a crowdfunder and donors voted to illuminate the bridge in blue. As sponsors of the ambitious display, we can’t wait to see it light up the Bristol skyline!

Day to day, we support and nurture the website with software updates, iterative development and strategic thinking around technical development and user experience.


Jargon Busters

In case you were wondering what we were talking about…

HTML

HyperText Markup Language. Standard programming language used to tell the internet when to display information like words and images.

CSS

Cascading Style Sheets. A standard programming language that takes the information from HTML and ‘styles’ it, allowing flexible web page design.

User experience

The overall ease and accessibility of using a website or application.

User journey

The experience of a particular path a user takes through a website or application. For example, making a purchase, or navigating a blog.

Written by Owen Leigh, Digital Content Delivery Manager

Emma Millington

Emma Millington

Head of Customer Relations - Passionate about demystifying tech so we can all speak the same language