Pixel-perfect migration and website development for SideDrawer

Project Overview

Side drawer is one of the valuable clients of webdew. Before joining hands with webdew they were using HTML templates, but now they wish to move to HubSpot CRM. Indeed, choosing the right organization that can successfully execute the HubSpot migration without any loopholes was not easy. But webdew professionals made this possible.

webdew is a HubSpot Diamond Partner Agency with a team of certified experts who are always ready to explore, suggest, and help agencies in achieving their goals. 

SideDrawer was originally using an HTML template. However, once they explored HubSpot CRM and marketing tools, they were intrigued and wanted to move their website to the HubSpot CMS. 

Their main goals were:

- To conduct a pixel-perfect migration

- To enhance the flexibility of the web design

- To include additional modules

- To clone the master templates

- To increase the scope for customizations

- Make HubSpot Boilerplate Theme-based template

We successfully conducted the migration and consolidated the website to remove limitations and unlock newer functionalities. After availing of the web services, the client was very happy and satisfied. Now, the newly created website of SideDrawer is running successfully.

Background

SideDrawer is an API-based document management platform that focuses on improving the client experience around data collaboration and organization. Their main clients are businesses, professionals, and fintech companies that use their turn-key solution or their APIs to improve productivity and increase client engagement.

Challenges

SideDrawer was built in an HTML template, so adding custom elements and code is easy. But when it comes to CMS, they get to know that it provides many features but also has some limitations in the development phase. When they try to move to a new content management system, they come across some predominant challenges. The following were the most prominent ones for their team: 

- Limited use of pages

- Difficulty in carrying out modifications

- Lack of elements for drag and drop functionality

- Adding animations in drag and drop content

Solutions

There are various steps performed to ensure the successful delivery of the project:

Ensured a pixel-perfect migration

Since the HTML template offers the flexibility to add custom code anywhere, it becomes challenging to clone a site's pages for the mockup UX. Despite the challenges, we were able to conduct the migration with utmost perfection.

Enabled SideDrawer to create pages from the theme template

We enabled SideDrawer to create pages from the template. We built a Hubspot Boilerplate theme for SideDrawer so the client can create a page using a template and also make changes to its layout using dnd modules and HubSpot theme features. So we provide clients with full-page customization options that help the audience to achieve their goals.

Pricing page for different customers

On the pricing page, the client wanted to show the pricing of plans according to their customers' locations, that is, the USA and Canada. We made the pricing page as per client requirements, for which we added smart rules, and we gave font style options in the pricing module to the client.

Kept the quality intact 

Migrating from one HTML template to the CMS while maintaining the same web design is indeed a significant task. With collective effort and focus, we made sure the quality was intact.

Making the site interactive and attractive

There were many parts of the website that needed to be interactive in order to grab the attention of the visitors. We added animations here to make the user experience awesome.

Created custom header and modules

The client had services that they wanted to display to their clients. To serve this purpose, we created a custom header on each page with all the products and services listed. We also made sure that the header was responsive and worked just as well on mobile.

Consolidated the website to remove limitations

Having multiple stand-alone modules can restrict the streamlined mode of operations that the users desire. Haptik has the same existing problem, which our web designers and developers solved by integrating the modules and removing limitations on the back end.

Results

We successfully conducted the migration and consolidated the website to remove limitations and unlock newer functionalities. We also developed responsive and editable modules to enhance the functionality of the website. Our client was rather impressed with the quality of work we delivered and praised us for our dedication and expertise as well. Now, the new website of SideDrawer is up and running without any problem.