Skip to content

Designing and developing a new user experience with HubSpot CMS

Bloom's website prototype

Client

Bloom is a procurement service that offers end-to-end solutions to connect professional service suppliers with the public sector. With Bloom's frameworks, buyers can save time and resources as the team handles everything from sourcing to contract management, payments, and compliance. This enables clients to prioritise the communities they serve.


Deliverables

  • HubSpot CMS design & build
  • 15 bespoke templates with drag & drop editor
  • HubSpot CMS Playbook 
  • Web design system 
  • 13 custom modules

The challenge

Bloom recognised the importance of updating their online presence to one that aligns with their values and mission, and sought to re-brand their website accordingly. The goal was to create an enhanced user experience that would allow visitors to easily understand Bloom's services without any confusion while ensuring that the website is accessible to all users. To achieve this, Bloom aimed to create an updated UX and UI that not only improves performance but also aligns with their new and fresh brand and strategy.

The approach

Bloom collaborated with Burn to embark on a journey of discovery, aimed at understanding their users' needs, requirements, and pain points. The comprehensive workshops included an audit of the existing website's performance, such as page requests and JavaScript, as well as an assessment of its overall health and a review of competitors.

The previous website's structure and content organisation presented challenges for Bloom's customers, leading to a frustrating and invaluable experience. To overcome this, the new site prioritises user-centric design to eliminate obstacles and ensure a seamless experience. After collecting findings in the discovery stage, user journeys were developed, tailored to Bloom's suppliers and buyers, and incorporated into initial concepts and wireframes for optimal user experience. Prototypes were created for all device sizes to ensure the website is optimsed for all breakpoints. The team then proceeded to work on HubSpot theme set-up and module creation, developing templates, creating pages, and populating with content.

In addition, documents were created for Bloom's team, including a Website Design System guide that outlines how to use Bloom's brand throughout the website to ensure consistency, a HubSpot CMS playbook guide, and training sessions to ensure Bloom's team is comfortable and confident in updating and creating new content. The modules are designed to be easy to edit and understand, ensuring a smooth experience for both users and editors. The final stage of the project involved testing and monitoring before the website launch.

Bloom mockup

The result

After finalising the new website design, Burn's development team brought it to life. The result is an intuitive and engaging website that seamlessly guides visitors to the information they seek, with clear and compelling call-to-action prompts throughout the site. The redesign is modern and clean, reflecting the brand identity and ethos, which has helped to raise brand awareness. The website has the potential to serve as a powerful marketing tool with its improved UX/UI. The website performance has also been improved, with an increase in score from 75 to 98 points in Lighthouse, and in the accessibility section a perfect score of 100 with no colour contrast errors, missing form labels, or skipped headings. This has allowed the website to load quickly and provide an enhanced user experience for all visitors.

Take a look at the Bloom website here.

bloom- mockup 2-min