Case Studies HubSpot

HubSpot CMS Development Case Study: How We Built the pr.co Website

In this post, we talk about one of our HubSpot CMS development projects. You will learn about the challenges we faced, the solutions we offered, and the results we achieved.

thumbnail
Baylor Eaton

Over the past few years, Hubspot CMS has gained popularity among brands and businesses due to its combination of simplicity and flexibility. The platform is easy to use, even for non-tech-savvy people, making it a powerful tool for multidisciplinary teams.

However,  creating a truly unique page or integrating a custom functionality without professional assistance can be quite challenging and error-prone. 

At P2H, we specialize in building and customizing websites by Hubspot CMS. Below, we will share the process of how a Hubspot-based website was built and why the results guarantee customer loyalty for years to come.

The Client 

pr.co designs and builds custom newsrooms and cutting-edge software that makes writing and publishing news a breeze for communications teams. The platform allows publishers to manage relationships with media contacts via a CRM, collaborate with their teams, organize their media assets in one centralized hub, and much more. 

The Challenge 

We were contacted by Padraig McKee – pr.co’s Director of Product. He explained that the company widely used the HubSpot ecosystem to manage their sales and marketing activities, so when the decision to create a new corporate website was made, the choice naturally gravitated towards HubSpot CMS. 

P2H is my go-to partner when I have low in-house development capacity. P2H is fast, reliable and always delivers quality work on time. And a special shoutout to Anya for her impeccable project management.

Padraig McKee
Padraig McKee

Director of Product

The client provided the designs of all the pages along with detailed specifications. Our task was to integrate those designs into HubSpot CMS and add some features to enhance user experience and meet pr.co’s specific business needs. 

The Solution 

Technologies 

To get the job done, we used the staple web technologies: HTML5, CSS3, Flexbox, and JQuery. 

What We Did 

Modules 

Our task was to develop several web pages for HubSpot CMS. If we hardcoded them, though, the client would have a hard time maintaining and updating them afterwards. The solution was to develop a number of modules that the client could easily edit and use to create new pages.

We created two groups of drag & drop modules. 


Global. These modules are used in areas found on every page of the website, most frequently in the header, sidebar, and footer. 

Custom. These modules contain content that the client can change depending on the page such as a callout box with an image and CTA button. It can have different text for different calls to action.

Using these modules, the client can  easily (and quickly) create new pages, adapting them to their needs.

Mobile Version 

In the era of handheld gadgets and Google’s mobile-first indexing, not having a mobile version of your website is unwise. 

The client was well aware of that. Therefore, we made the pr.co website mobile friendly, adapting it for different screen sizes/resolutions and creating a sliding mobile menu based on the client’s mobile designs.

Because reading content on smartphones and tablets is so easy, the chances of losing visitors, leads, and customers have decreased significantly.

Animations & Interactions

To make the website more engaging and user friendly, we added several animation and interaction effects. 

Animation on scroll

Animation on hover

Animation on hovering over a grid with cards 

Dots pulsing animation 

Carousel 

Filter

Sticky Header 

Multi-Language Feature 

These days, you can easily reach your target audience in virtually any corner of the globe with an Internet connection. This means your website should “speak” more than one language. 

Because pr.co is a fast-growing company, it strives to reach an international audience. Therefore, our task was to add the multi-language feature to the website. Below, we share the results of the successful integration. 

Currently there are two languages available on the pr.co site. There is always the possibility to increase this number whenever needed.

Blog 

The client also commissioned us to create a new (second) blog with information on product updates. Using HTML and CSS, we converted the provided designs into two page templates: the blog listing page template and the blog post page template

The blog listing page template

The blog listing page aggregates all the company’s product blog posts. As you can see in the screenshot below, the blog post cards are made up of the title, publish date, tags, and the body text. When the body text contains more than 500 characters, it’s truncated. Users can click a “Read full update” link to take them to the blog post page where they can read the entire update.

The blog post page template 

This template is used for each post. The “All updates” link takes the user back to the blog listing page. There are 12 blog posts per page. The primary tags (New, Improved, Fixed) are color coded. The secondary tags share a similar design (Newsroom, App, PR, CRM, Virtual Events, Press Page). 

Custom Modules for Creating Marketing Emails Quickly

The pr.co management wanted to speed up the process of creating marketing emails, all while making them engaging and visually attractive.. 

We handled this task by developing a number of custom modules that can be easily assembled into an email template by pr.co’s marketing professionals. All they have to do next is change the content of the modules and they’re good to go. Here’s an example of an email made up of our modules.

The Outcome 

Our collaboration with pr.co is an example of how we’ve gained customer trust and loyalty through our work. After completing one task, the client kept coming back with more  work for us over a long time span. That shows how satisfied they were with the quality we delivered.


Want to be our next happy client? Write to us.

Baylor Eaton

Baylor Eaton is a Business Development Manager at GetDevDone.com, where she helps organizations tackle web development challenges. She writes engaging posts packed with useful info.

For more professional insights from Baylor, connect with her on LinkedIn.