webdew

NexStem is on a mission to change the world with their intuitive and affordable state of the art Brain-Computer interface solutions. They needed a website to create an online presence and let the world know about their cutting-edge products.

TelosTouch is a client experience platform for financial services. They needed a website to grow their online presence and reach out to people who required their services.

KPI Partner is a global consulting firm focused on strategy, technology, and digital transformation. They needed new homepage template modules for their new website. They were quite happy with all the support they received from team webdew to finish the homepage modules.

Cognitive FX helps people recover from prevalent concussion symptoms in merely one week of tailored treatment. They needed a website to create their online presence and reach out to people who required their services.

Offerd is the perfect blend of best-in-class technology, data, and talented professionals to match your buy-box with actionable assets sourced by an expert team and deal engine.

They needed a website to create their online presence and reach out to people who required their services.

SideDrawer is an API-based document management platform that improves the client experience around data collaboration and organization. It offers a secure, branded platform designed to improve efficiency through its unique workflows and a phenomenal user experience.

They needed a website to create their online presence and reach out to people who required their services.

Project overview

The company chose webdew to rebuild their website. They wanted a pixel perfect website with drag and drop functionality. The development had to be done using the new boilerplate feature in HubSpot, and all the sections had to be editable.

Challenge

The client website needed a revamp. They wanted drag and drop feature on their website and it was a must for the client to have a pixel-perfect development. The main challenge of the project was the customized header that they needed. It had to be done using HubSpots new CMS boilerplate.

Solution

It was our first project on boilerplate however, we managed to ace the project and create the custom header which was particularly challenging. We also created a custom announcement bar that could be turned on and off as per requirement. 

https://www.loom.com/share/462911a4ed5c40f4ba403de6bf2db1ba 

Purpose of Web Design and Development

Exceed Speech needed a website to create their online presence and reach out to people who required their services. Since our clients were not very tech-savvy, they required drag and drop modules that could be managed by non-technical people. They also needed various video and quiz elements and external integrations for their website.

Goals

To design the Exceedspeech website using boilerplate

In this process, we had to create themes with various drag and drop modules for the website that the client could execute easily and comfortably. Since they were non-technical people, we had to endure user-friendliness.

To design a creative and fun website that resonates with the target audience of our client

Since Exceed Speech's target audiences were parents and their service for kids, we had to make sure it had an added essence of familiarity and a friendly presence. Our client did not want the website to look very professional.

To conduct HubSpot integrations

We had to integrate:

1. Coreplus: Core plus is an Australian digital health management platform that connects healthcare providers with their clients.

2. Kajabi: Kajabi is an online course platform 

We had to include online quizzes

The client wanted us to create modules in the theme where they could put quizzes for their visitors.

Process and Problem solving

The process of creating a website starts with designing. We created the themes and sent them over to the clients, which met with some minor revisions. In the second draft, we covered all the bases and delivered the desired results with all the specifications maintained.

We then sent it over to our development team, who took care of the entire execution to provide the client with a picture-perfect website. We also carried out the integrations seamlessly.

Challenges and Difficulties

• The client website's design was quite complicated, considering we had to use a boilerplate to create it.

• It had several video modules that had to be integrated.

• From a design point of view, we had to be innovative and conduct substantial R&D.

Project overview

Haptik.ai was originally using WordPress CMS. However, once they explored HubSpot CRM and marketing tools, they were intrigued and wanted to move their website to HubSpot CMS. Our target was to execute the migration without any fallouts or loopholes.

Thus, our 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

Challenges

Haptik was built on WordPress. As we all know, WordPress uses plugins and templates for basic functionalities. These plugins or modules are open source and can not be changed seamlessly. When we try to move to a new content management system, we come across some predominant challenges. The following were the most prominent ones for our team: 

• Limited use of pages

• Dependencies on plugins

• Restricted to using a pre-built theme

• Difficulty in carrying out modifications

• Lack of elements for drag and drop functionality

Solutions

Ensured a pixel-perfect migration

Since WordPress offers open-source plugins, 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 Haptik to clone the master templates for internal pages

The master template is the starting point for all the other pages of a website. In order to conduct the desired customizations, it is essential that the master template, it's UI and UX is high quality. Since Haptik already has a pre-built design, we had to take care of the cloning. Our team assisted the client in doing the same without any disruptions.

Kept the quality intact 

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

Created custom header and modules

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

Many of the client teams were working on the website and they also needed custom modules so the Haptik teams could create web pages and landing pages on their own. We made sure of this by creating a custom, multipurpose module.

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.

Enabled Haptik to create Templates

We enabled Haptik to create tailor-made templates which were not originally offered by WordPress. Our team provided them with the access they needed to carry out the changes or develop something from scratch.

Enabled customizations

WordPress limits the freedom of customization for the website owners. While migrating to HubSpot CMS, we had to make sure we made way for our client to add customizations if required. 

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 and encourage them to respond to CTAs. 

This included three pages of webinar listing, details, and registration page. The listing page displayed all the webinars, the second page had the webinar video and content and finally the registration page had the forms.

They also wanted a separate module for the career page, where the candidates can come and apply for the job openings. For this we developed a tabbing based module as per the job vacancies. 

To keep the website interactive, we used animation.

Project Overview 

Velo Residential wanted to revamp their website to get rid of the outdated and stagnant elements to replace them with editable sections and drag and drop features. They also wanted to optimize their site for fast loading speed which leads to a promising UX.

Challenge 

When team Velo came to webdew, they were using a worn-out website with redundant features. Their features were neither optimized, nor could they edit the website on their own. The client precisely needed a new framework and a new CMS.

The client had the following requirements:- 

• Easy to use and optimized website

• Editable sections and images

• Custom sliders for service display

• A great blogging platform

Solution

As the client previously used an outdated website, the primary task was to redesign their website from scratch. We developed the custom theme according to the needs of the client. To ensure better performance, we chose the HubSpot boilerplate. 

Building a brand new theme for the website

The theme we created had the same features as the boilerplate. It has easy drag and drop feature, and changes could be done from a single panel. We developed the following:

• Custom module for sections

• Custom slider for services display

• Custom blog template as per requirement

We provided the following things on the website:- 

Build a brand new theme for a website.

Filtering posts

The client wanted the posts to be filtered through a tag click, so we created a custom JavaScript for the tag. The users can now filter the posts on the same page using tags.

Blog Listing

As the client's requirement, we developed the Spatial module for blog listing. Using this module, they can display the blog listing anywhere on the website.

Showcasing their webinar

We developed three separate pages to showcase their webinars. The first template can be used to display the older webinar listings or cards. The second template is for the pages that have detailed listings of the posts. This particular page has a video module that helps to showcase the webinar videos. It also has a section for the forms and upcoming events.

The last template was for email registration. We created this template using HubSpot forms without the usage of any third-party integration.

Site Optimization

After the website development, our next challenge for site optimization. For this, we have used the lazy load feature for images, used the original fonts, minified the CSS and js files, and reduced the extra size of images.

Result 

• The client can now edit their site using functionalities like drag and drop

• Their visitors can now filter the blog posts by tag on the same page

• They can display the blog listings anywhere on the website

• They can showcase their webinars more vividly with three new pages but 0 third-party integrations.

• The website is optimized for loading speed and UX.