A vision for Shelter’s website
November 2020
Our Digital team have been hard at work for over a year, rebuilding Shelter’s website on a new platform to improve the experience for everyone who pays our site a visit.
If you look at a page from our new platform and compare it to an older page, you probably won’t notice many differences. So, why do all this work rebuilding our website?
Well, there are three important reasons:
We want a faster website for our visitors. Whether making a donation or looking for housing advice, the new site will be lightning fast – even on older devices and slow connections.
We want more teams in Shelter to create their own website content. With better tools, we’ll no longer need developers to build pages and push them live, so we’ll be able to get new products and content in front of our audiences faster.
We want Shelter’s Development team to spend more time creating services for our audiences. A more modern, reliable platform will reduce the amount of time developers spend on basic tasks, fixing bugs, and maintaining outdated technologies.
One of the drivers for helping more Shelter teams to publish their own content is Shelter’s Digital Framework – which sets out our approach to digital.
Want to know more about the ins-and-outs of how our Digital team are revamping our website? Read on...
Our systems and approach
Several different services make up Shelter’s new website platform:
The CMS – A CMS is a content management system, such as the one we use here at Shelter: Contentful. It's the tool our content designers and editors use to create pages, build content and publish it.
The site builder – By itself, the new CMS is just a database of content. When we publish pages, the content is combined with a defined set of website components. These components are the building blocks of the site – the header, menus, buttons, and details of fonts, sizing and spacing.
We use a service called Gatsby to combine our content with our website components. It’s great.
A component-based design system – Shelter’s design system specifies how our website should look. It starts from the details – like which fonts we use and what buttons look like – and builds these up into components – like our header and footer – and then into templates for pages.
Why we chose a component-based system
We’ll be gaining a website that’s faster, easier to operate, and with a more consistent user experience and brand.
You can think of our new approach as being like Lego bricks. The design system describes the different kinds of bricks we have. How those bricks are combined is down to the content we create and the rules laid down in our page templates.
There are several advantages to building a website this way:
We’ll make things easier for our users by having a consistent brand and design language
We’ll be able to make new things quickly using our component set
We can have separate content for Scotland and England, but with a shared look and feel
With a defined set of components, we can make sure they’re well designed, brand compliant and that they meet technical and accessibility standards
Editors will be able to make pages themselves, without needing a developer
We can make improvements site-wide. Let’s say we improve our design for menus. Every menu on the site will automatically benefit from the changes we make, as they all use the same underlying component. Improvements to components made by the Scotland or England teams will benefit both websites.
This approach also addresses some of the problems we had with our old website:
It was inconsistent, making things confusing for our users and diluting our brand. For example, we had six different designs for our shop pages.
It was also inconsistent technically, meaning it was difficult to make new features or re-use old ones, and it was easy to break things.
What are the trade-offs?
One trade-off is that there will be less bespoke or custom content on our website.
We’ll be making most of our content from a defined set of high-quality components that are accessible and on brand. We’ll have a flexible set of components and templates that will allow for visual variation and different layouts. But there will be less scope to make particular pages look different.
If we want to add a new feature, we’ll be looking for ways to make that feature a new capability for our website, rather than a one-off.
For example, we built an interactive timeline for our social housing campaign, showing house building over the years. In future, rather than making that as a one-off, we might build a data visualisation component that we can re-use in future.
What’s been achieved so far?
Shelter’s cross-org (CMS) product team have set up the new CMS and built the core components we need to publish pages. We’re currently running the old and new CMS side by side, as we migrate our content.
We’ve started publishing pages from the new CMS – for example, the Contact us section is now served from Contentful.
The new pages have achieved our aim of being faster - pages published from Contentful are around twice as fast to load as pages from our old CMS.
What’s next?
We’re continuing to move content over to the new platform, with more sections going live over the next weeks and months. The What we do section is live on the new platform, for example. And we’re working with content teams across Shelter to train them in the new CMS and help them migrate their content.
We’re expecting the majority of content to be moved over by the end of the year. And there will be a major visual update with the rebrand coming in later in 2021.
If you have any questions about our Digital team's work on our revamped website, email Philip Wilson (philip_wilson@shelter.org.uk)