What do you do when your organisational website has grown organically with your company, expanding into subsites and sub brands, until it’s an unmanageable beast?
That is the problem that the Centre for Alternative Technology (CAT) was faced with, when they first came to Mashbo. CAT is an educational charity, based in North Wales, which is dedicated to researching and communicating positive solutions for environmental change, with a focus on climate change.
In 2018, they found themselves with a website that looked tired, used outdated software and that had been fragmented into multiple subsites, each with a different look and feel.
“The site had evolved organically into a beast that was becoming a challenge for our team to manage and for our audiences to find their way around,” said Catriona Toms, External Relations Manager at CAT. “We wanted to refresh our brand, update our software and bring everything together. One brand, one website, one voice.”
One Brand, One Website, One Voice
We started with a workshop and scoping session with a group of core stakeholders from various department in CAT, learning about what the organisation did, how it had evolved and what its future plans were. We spent time on site and exploring the facilities, as well as talking about how the current website and its subsites were structured and used.
Taking that information, our design team set about refreshing the existing CAT brand, modernising its appearance, typography and colour palette. As part of this refresh the team also took CAT’s subsites and brought them all under the one overarching brand.
The new website design also featured extensive lifestyle photography of the CAT site, to provide a better visual indication of its location and work.
Sitemap Streamlining
The biggest challenge for our development team was integrating more than ten separate sub-domains into one, coherent Wordpress site. Each site had an extensive sitemap that required streamlining, to reduce the number of pages and facilitate the creation of a more simple and intuitive user journey.
Even after the sitemaps had been streamlined and restructured to fit on one overarching website, the sheer amount of content and information meant that the standard approach to Wordpress site development, creating bespoke page templates to fit a client’s requirements, would not be efficient or effective.
A conservative estimate suggested that 30 - 40 bespoke, static page templates would have been needed to accommodate all of the content. This would have been a lengthy and very costly process that would not have given the client the flexibility to add new pages and sections as the organisation scales.
We wanted to provide cost-effective and future proof solution that would provide CAT with a content management system (CMS) that allowed not only easy upload of content, but also the simple development of new pages.
Modular Development
In order to do this, we took a modular development approach. We worked with our design team to identify how the new website design could be broken down from page templates, into smaller components, or ‘blocks’. We then created a bespoke system that would be easy-to-use and provide the client with bespoke control over page layouts.
We created three simple templates, one with a header and footer, another with header, footer and a basic text content layout and the third for , blog posts with images and social sharing links.
We then created 40 ‘blocks’ - manageable content chunks that could be reused in any arrangement within the basic templates, by simply dragging and dropping them into position. We even incorporated the option for colours to be changed via the CMS, something that in the past would have required hard code changes.
Ahead of build we provided client with low-res wireframes and high-fidelity block designs to review and approve.
CMS Colour Change
We managed this by automating the creation of a series of block variants using a list of colour names and corresponding hex codes. We also automated text colours with light or dark hover styles, for readability and accessibility.
This means that when a colour is selected, the CMS automatically picks the most readable hover styles and text colours.
Supporting Documentation
The final stage of the process involved creating documentation for each template and modular content block, explaining their traits, functions and even how they interact with other blocks. This provided the information for the in-house team to confidently use the new modular development system. The documentation was also used to support and live-streamed online training session, where we were able to demonstrate the system and answer the team’s questions.
Improved User Experience
“We selected Mashbo based on its expertise in design and also developing complex Wordpress sites, as well as its adaptable and collaborative approach,” said Catriona. “From the very start of the project, Mashbo just ‘got it’. The team took the time to understand what CAT is about, meet with our team and experience our physical site. From that they were able to find a nice line through our sites, to bring all of our subsites under one, fresher looking and more reflective brand.”
Since the site’s launch in February 2019, the team at CAT has received excellent feedback from users and the simplified navigation has made it much easier to track user journeys and obtain accurate analytics.
Catriona added: “The new website delivers perfectly on our brief to create one website, with one brand and one voice. It is much easier to navigate and we have been told by users that it is now much faster and easier to find what they are looking for on the site. What’s more, our in-house team is now able to update and develop our site quicker and more efficiently.”
If you’d like to discuss your website project and how modular development could work for your organisation contact the team today.