Charkit - Audit, UX/UI and HubSpot Dev
September, 2019
Background
Charkit's legacy website was a bespoke platform written to maintain and manage their chemical products, users and enquiries. Users were dissatisfied with the experience on site, and the company wasn't receiving enough support from their platform developers, so they decided to move to a new, and better supported, platform.
Objective
As the backend of the site was moved into a new CMS system, Charkit decided to also move their client-facing site to a new platform. As they were already using Hubspot for managing their email campaigns and contacts, they naturally wanted to keep everything in the same ecosystem.
Content Audit and Pages Structure
I started by auditing the old Charkit website, mapping out all content throughout the website. The main goal at this stage was to narrow down the amount of content and reduce duplication.
I was looking at the content structure to see if there was content that could be better classified, merged or removed completely - these hypotheses I tested in a card sorting exercise.
The outcome of this stage was brand new sitemap which formed the basis for the user flows & redesign approach.
Design phases
Based on the new sitemap I created a set of low fidelity designs, seen below:
These low fidelity designs were tested with end users based on the customer profiles provided by Charkit, and stakeholders in a couple of rounds of user and stakeholder testing, and iterated on based on the feedback from these sessions by exploring and weighing the similarities and contrasts between stakeholder and user needs.
Please have a look at some of the designs below:
This was a based for me to start designing the end site. Please have a look at some of the designs below:
New Website Development
The newly designed website and sitemap were then moved into the HubSpot platform, where I created the SCSS/CSS and made sure the site was fully responsive by using Bootstrap.
I created a number of flexible and re-usable page templates and modules that could be used in the future to create any new content and pages on the Charkit site, and which are editable via the inbuilt WYSIWYG editor.
Challenges
As some of the Charkit data being displayed on the page was being populated via API (data coming from 3rd party CMS) we needed to make sure these dynamically created pages would be fully indexed by Google. To do this I made sure the URL to product details were not canonical, and by adding appropriate dynamic parameters to Google console, so that crawl robots were made aware that these were unique, indexable pages.
I also made sure that we could content and content editing capabilities into Hubspot: The Blog, Events, News and Careers pages are all driven by HubSpot, using HUBL (native templating language) and HubSpot DB to create dynamic content and pages.
End Product
Its a fully responsive website - running on stand alone HubSpot platform, running using several custom templates and dynamic pages, displaying 3rd party data using API. Build using HTML5, SCSS, CSS3, jQuery and HUBL.
You can have a look at it here: