In late March 2022, Mention Me was nearing the end of the design stage of their new website. Knowing they had an event in late May where the site would be launched, it was time to find a highly capable development firm who could convert the Adobe XD design files into a website built on the HubSpot CMS. 

They approached SpotDev with developer-ready files and we got to work appraising the details of the project. Mention Me knew that they wanted to move from HubSpot's legacy template-driven website structure to the powerful and modern themes system. This would allow them to easily create new pages using a drag & drop editor, combined with a series of flexible modules. 

Once we provided a detailed proposal outlining the templates and modules that we would create, Mention Me engaged us to take on the project. 

Building a HubSpot theme

HubSpot themes allow a business to create well-optimised, easy to use websites using a combination of templates, modules and global assets. This makes it easy for a company to deploy non-designers and non-developers to maintain a website while ensuring that brand identity is preserved. 

A successful HubSpot website project, therefore, depends on creating the underlying theme to the highest possible standard. 

Using the design system provided by Mention Me's designer, our developers created a theme that standardised the appearance of key website features such as: 

  • header and footer navigation
  • typography
  • buttons
  • images
  • calls to action
  • forms
  • videos. 

This included creating standard 'base layer' templates that would allow both us and the client to easily add new pages later on in the project. 

Creating the modules

Having carefully reviewed the design files before starting the project, our developers already knew the modules they would need to create. This ranged from simple text and image modules, through video-background hero sections, all the way to dynamic percentage calculators. 

The video background hero section.

With the theme and the base layer templates complete, it was time to build the modules that would allow us to create the website pages. 

While our development team built the modules, our project managers kept in frequent touch with the designer and other key stakeholders at Mention Me. This allowed us to ensure that the behaviour of our modules matched the intention and needs of the client's business. This process ensured that animations, hover effects and other features not always included in design files were deployed as accurately as text and imagery. 

Building the pages

With the theme and the modules complete, it was time to start building the pages. We used a combination of custom-coded pages with drag & drop areas, alongside pages that were generated using nothing more than the visual drag & drop builder. This approach allowed us the flexibility to build the website quickly to reach the ambitious yet achievable deadline, which couldn't be moved due to the client's event. 

In addition to the pages we were engaged to build, Mention Me's team identified other legacy pages where their team had the capacity to migrate content over to the new infrastructure. This allowed our team to handle the highly technical work while the client's team focussed on work that was less technically demanding but needed knowledge of the wider business. 

Percentage module

This combination ensured that the site was ready for quality assurance. Our team conducted a series of design fidelity, functionality and performance checks. Once that was complete, Mention Me's team conducted a round of user-acceptance testing (UAT), which ensured that the staged site met their wider business needs. Of course, with the close engagement from our project management team throughout the project, there were very few surprises during this part of the project. 

Launching the website

With QA complete, we were ready to launch the website. The day before the launch both our team and the client's employees met to ensure that everything was behaving as expected. We confirmed DNS details, configured redirects and moved pages from the staged environment over to production. 

At this stage, we entered another round of quality assurance to ensure that moving from the staging domain to the live domain hadn't introduced any unforeseen issues. 

And, with that, the website was launched on time and on budget. And, with the new site, Mention Me has noticed measurable increases in visitor engagement, including a 13% reduction in bounce rate, an 18% increase in pages per session and a 40% increase in average session length. 

Today, SpotDev and Mention Me continue to work together to introduce additional content, new functionality and improved performance to the website. 

You can view the new Mention Me website by visiting this link.