This case study explores the successful collaboration between the HC team and the Earth Hour team in revamping the Earth Hour website. The primary objective was to enhance the user experience and incorporate a modular approach using HubSpot. Additionally, the challenge of embedding a TypeForm-like experience within HubSpot was tackled. This case study highlights the steps taken, challenges faced, solutions implemented, and the final delivery.
The Earth Hour team approached the HC team to revamp their outdated website, which lacked a modular approach. Leveraging the capabilities of HubSpot, the HC team aimed to enhance the website's design, customization options, and overall functionality.
Working closely with the Earth Hour team, the HC team was provided with the form flow and a blueprint-like design outlining the desired form's appearance, functionality, and display of calculated data. Detailed screenshots of the form were shared, illustrating the desired user experience.
.jpg?width=960&height=540&name=EarthHour%20From%20Blueprint%20(1).jpg)
.jpg?width=960&height=540&name=EarthHour%20From%20Blueprint%20(3).jpg)
.jpg?width=960&height=540&name=EarthHour%20From%20Blueprint%20(4).jpg)
.jpg?width=960&height=540&name=EarthHour%20From%20Blueprint%20(5).jpg)
.jpg?width=960&height=540&name=EarthHour%20From%20Blueprint%20(6).jpg)
Despite the challenges, the HC team committed to finding solutions that would align with the Earth Hour team's budget. While certain limitations were identified, particularly regarding the ability to add additional form fields, the HC team devised workarounds to ensure feasible solutions were implemented.
Agreement on the project scope was reached, enabling the HC team to proceed with constructing the native form within HubSpot. This initial step involved creating a simple yet effective form, which would serve as the foundation for subsequent developments.
To accommodate specific data requirements, custom objects were created within HubSpot. These objects served as repositories for data related to the form submissions, enabling the display of a dynamic leaderboard.
The HC development team embarked on building custom modules for the form, incorporating features such as progress bars, next/previous navigation, form steps/pages, and customizable options. The goal was to minimize the need for extensive developer involvement while providing an intuitive and interactive user experience.
Phase 1 aimed to deliver a highly customizable form experience. The HC team successfully implemented several customizations, including the ability to customize radio box options, form steps, and the thank-you message, etc.
Leveraging HubSpot's calculated property, the HC team designed a calculation to determine the sum of submitted values for specific countries. This functionality enabled the generation of meaningful insights and the display of relevant data on the website.
Rigorous testing was conducted by the HC team to identify and rectify any issues or bugs. Despite encountering some challenges, the team remained dedicated, even working during weekends, and received continuous support from the Earth Hour team. Thorough testing ensured a high-quality end product.
Following extensive efforts and collaboration, the HC team successfully delivered the revamped Earth Hour website, surpassing the client's expectations. The implementation of the modular approach and the embedding of a TypeForm-like experience within HubSpot resulted in an improved user experience, increased engagement, and enhanced data collection capabilities.
Conclusion:
The successful collaboration between the HC team and the Earth Hour team led to the achievement of project goals. By leveraging the capabilities of HubSpot and implementing workarounds for limitations, the HC team delivered a highly customized and user-friendly form experience. The revamped Earth Hour website showcases the seamless integration of design, functionality, and data manipulation. This case study highlights the importance of effective collaboration, problem-solving, and dedicated testing in achieving project success.
