How We Built and Brought The New BabelQuest Website to Life

As an Elite HubSpot partner with our own HubSpot CMS team who build websites for our customers, is was essential that our website reflected the capabilities of the platform.

Read on to find out more about our website redesign, from initial designs to go-live and everything in between!

71

website pages created

64

custom modules built

4

months from initial designs to go-live

It just wasn't 'us'

Up until recently, we felt the previous iteration of the BabelQuest website perfectly depicted us as a business. However, we were in the process of evolving our offerings in response to the changing market, and that website design didn’t adequately reflect this. We needed a revised design that communicated our expanded services and the teams behind them.

When our last website was initially developed, we didn’t have a firm visual language in place. This led to an inconsistency between the visuals displayed on the BabelQuest website and those presented within other materials, which we needed to align.

But, most importantly, as an Elite HubSpot partner with our own HubSpot CMS team, is was essential that our website reflected the capabilities of the platform.

Tackling the design phase

Abi Parmenter, our digital designer, and Laura Shelton, our project manager, were both instrumental in the design phase. Justyna Wegner, our front-end developer, also played a vital role, ensuring the website’s performance wouldn’t be negatively impacted by the design phase and implementation.

When it came to specific design requirements, we invested in a full redesign. While we retained our original definitive logos, the entire visual language of the website was brand new. From the header to the site map and everything in between, we rebuilt, renovated, and reimagined every inch of it to achieve the desired result.

Scoping for success

We provided scopes for each web page, which included sample copy and details of our design and development ambitions. The development scope was detailed, going so far as to include notes on the required functionality for the editing experience, or whether we wanted a particular section to be automatically or manually populated, for example.

To elevate the standard of the copy across the site and strike the right tone, we brought in Alex Eliseev, a freelance writer and journalist with decades of experience to his name. Alex rewrote much of the copy across the website, revising some of the original content whilst also creating fresh, on-brand copy for the new pages.

Time for a peek

The website design was completed within three weeks – which included planning, scoping, mock-ups, and final designs.

We presented the designs in Adobe XD which gave Hollie Higa, BabelQuest’s head of marketing, the ability to comment directly on the page designs. Working from Hollie’s feedback, Abi edited the designs, a collaborative approach that ensured the team was in constant communication and on the same page at all times.

Building a new website

Laura and Justyna led the website build. This stage took roughly three weeks. At six weeks, we had carried out all the page reviews and made the necessary adjustments. 

We presented the new website builds via a HubSpot staging site – a content tool that supports the redesign and relaunch of a website within a safe staging environment. From here, we created a spreadsheet for customers, developers, and our internal team to provide essential feedback. There were 42 modules overall and we conducted our own content loading.

It’s time to go live

The initial design stage to the go-live date took four months, excluding our branding project, which fed into the website. Of course, tracking and amending snags was fundamental to the success of the new BabelQuest website. Justyna thoroughly reviewed the site’s functionality before going live, after which the rest of the company did the same, logging any glitches in the spreadsheet. 

This comprehensive process ensured that issues flagged were fixed by the right individual – be that developer or marketer – depending on the nature of the problem and the complexity of the task.

Integrating HubDB across the new website

The main special feature to call out here is HubDB. According to HubSpot Developers, HubDB is: 

[...] a tool that allows you to create tables to store data in rows, columns, and cells, much like a spreadsheet. You can customise a HubDB table's columns, rows, and other settings based on your needs. For example, you could use a HubDB table to store feedback from an external mechanism to retrieve it at a later time [and] store structured data that you can use to build dynamic CMS pages (CMS Hub Professional and Enterprise only).

HubDB is an essential component of our new website. We use it to power our individual pages and modules, such as the ‘related content’ module, ‘our work’ page listing, ‘meet the team’ page, and individual ‘meet the team’ pages. In addition to this, HubDB works to handle our sliders, such as the ‘team’ slider, and ‘customer testimonials’ slider, as well as display our job vacancies.

This new tool saves us a significant amount of time updating and maintaining the website. Amendments need only be made once, directly in the HubDB table, and they are reflected in multiple modules across the website. This approach also guarantees that the changes we make to the website are accurate and consistent.

Don’t miss a trick: discover lots of ways to use HubDB and get more from your HubSpot portal in our HubSpot Hacks knowledge base.

This technological advancement allows us to manage and update different website modules seamlessly – time-consuming tasks that would otherwise have to be carried out manually. It also reduces the margin for error as we don’t have to worry that we’ve missed updating a module, for example, or that there are design inconsistencies between modules and pages.

Maintaining the website going forwards

One of the best things about using HubSpot CMS to build our website is that it couldn’t be easier to update and maintain going forwards, meaning we’ll get the maximum value out of this project for years to come. 

How we’ll keep on top of it

We have a robust process in place to monitor SEO, fix page elements, and make website-wide improvements when necessary. 

Depending on the nature of the maintenance required, tasks will be carried out by Justyna or our flourishing digital marketing executive, Mia-Jean Lee, made possible by HubSpot CMS’s intuitive modules and general ease of use

Memberships portal

Alongside the day-to-day website maintenance, we’re in the process of redesigning our employee portal with the aim of making it as easy to use and as helpful as possible.

We are also looking into creating a membership portal for customers and prospects – where they can visualise the things that can be achieved when using a membership portal, rather than taking our word for it – with the same aim.

The best websites today are easy to use and simple to understand. By building these characteristics into its website platform, HubSpot ensures that every website built on it can be easy to use and simple to understand, too. If you haven’t already, consider how redesigning your website on HubSpot could help your organisation unlock the same.

Take a look at our launch video:

 

If you want clarity on the requirements that matter when scoping your new website then you can download our CMS Scoping Template here.

ScopingCMS_Mockup_Laptop

Download our CMS scoping template

Capture everything you need to get ready for your HubSpot CMS website build.