Highlighting Your Best Assets with the HubSpot COS: DATUM Case Study

Often, B2B businesses have a difficult time highlighting their differentiators. In the case of DATUM, an Inc. 5000 fastest-growing company for two years in a row, it's their people. Because the team is composed of some of the best and brightest in the industry, the company was looking for an innovative way to showcase each individual’s skills and expertise.

To solve this challenge, DATUM turned to Kuno and the HubSpot COS for a new take on a traditional page: the About Us page.

The Challenge


DATUM wanted to make sure their new website shed a spotlight on its key players, but it wanted to do so in a way that was unique and practical. The company wanted an interactive “Meet Our Team” page that allowed viewers to learn more about each team member. However, the company also wanted to be able to add and remove employees as necessary, without having to dig into the template and mess with the structure and code.

The Solution



To achieve DATUM’s request, we used the following elements:

• Custom Module: We created a custom “Employee” module that stores all the information for each employee from their name and job title to their social links and bio. This way, when DATUM needs to make updates to a specific employee, an editor can easily identify the module for that employee and make adjustments using the page editor.



• Fancybox: We decided to use Fancybox (a jQuery lightbox) to achieve the elegant overlay effect DATUM desired. We assigned a special ID for each of the custom modules, so they can be used to call out each individual overlay. We implemented additional customizations to ensure Fancybox integrated with HubSpot’s framework and matched the style of the website.



• Flexible Columns: To ensure the client could easily add and remove employees to each individual section — without having to navigate through complex HTML / CSS / JavaScript code — we built the founders, team and non-executive directors sections as flexible columns.



• Responsive CSS: Since the flexible columns are not grid based, we implemented responsive CSS styling to allow the grid of employees to remain proportional and break down nicely on mobile devices.


Here’s a look at the resulting page:

And here’s a look at the hover effect:

Here’s the overlay (which appears after clicking the employee photo):

We built the template using responsive design methodology to allow the page to break down attractively on mobile devices:

The Impact

Our primary objective in this project was to not only offer DATUM the aesthetically pleasing, interactive design they desired, but to do so in a way that offered the company a simple update process.

Without the custom modules and the flexible column, DATUM would need to delegate additional development resources for custom coding each time an update is required. However, using the custom solution we provided,  anyone with access to the DATUM HubSpot page editor can easily update employees, even if they have no coding experience.


DATUM was incredibly satisfied with the result.

"We love the look of the new page, and the update process is simple and convenient,” says Robyn Bollhorst, Marketing Manager at DATUM. “We're able to manage employee profiles easily and make updates in seconds."

The HubSpot COS offers numerous templates for companies to build their sites on, or you can work with a team like Kuno to maximize the system and put your best assets front and center.