Challenge & Objectives
Clear were running 2 independent websites. Their main website was on Squarespace, and a second on WordPress which was used for landing pages for their paid search traffic.
Our challenge was to consolidate both websites into one. The biggest challenge was that the new website needed to be far more adaptable than the previous 2 websites. Clear wanted the ability to not just create their own pages but to build their own pages using a library of functional assets.
Solution
The sitemap was very ambitious however we knew that with the improved functionality we could deliver the website in a phased approach and allow the Clear team to continue roll out of their other content pages using pre-build blocks and brand assets that we would plan, design and develop all ready for the Clear team to implement.
A Content First Approach
The Clear team after going through their rebrand had spent time mapping out website pages and key content that they wished to include within the new website, this was extremely useful at the start of the project, as it helped define much of the content outline document that we include within our website strategy workshop.
After determining which pages would be included within the initial launch, and what the Clear team would like to create internally after launch, we had a phased rollout plan for both parties to follow.
Using Wireframes to Plan Layout & A Modular Content Structure
Planning a modular build is not about planning just page layouts, but planning the various content blocks that might make up that page.
The wireframes here were necessary to help visualise certain content blocks, in which you can see were reused from global call to action areas, testimonial sliders and next step blocks.
Wireframe process also helps to plan how to display what could be buckets of content in the best way possible without simply creating a continuous page.
This helps us to plan the certain type of functionality that can contain all of the content in an easy to use and easy to digest content block.
The wireframes were created for the 13 page templates across mobile, tablet and desktop devices.
Creating the Bespoke UI Design
Apart from the updated identity our team followed the provided design guidelines whilst also introducing further character and depth to the identity with additional assets that can be seen through the use of the circular shapes throughout the website.
Tackling the comprehensive navigation structure
Desktop navigation focused on showcasing the main service offering that would enable the user to make a single click. The same method was also required on both mobile and tablet devices. An overflow navigation was implemented for mobile devices.
The burger menu houses the remaining core pages of the site on all devices. With strong focus that the call to action was always prominently visible on all devices, shortening the copy based on device space. The client is able to change the microcopy within the call to action button.
Creating 13 Responsive Page Templates
Each of the 13 pages we designed were comprehensive and not as expected page templates with simplistic content blocks – using the modular reusable blocks we were able to build out deep content-rich pages that were executed for Mobile, tablet and desktop devices.
Introducing a consistent style guide & icon library
We introduced a comprehensive library of Clear branded icons to coincide with the recent rebrands and colour updates. These were provided after launch and the Clear team have internally begun to add to them as their service offering grows.
Built to Scale with reusable UI brand styled components
Focusing on components as well as content we approached the website with a firm understanding that many of the website blocks/components could be reused to allow the Clear team to actively create pages from scratch using the various building blocks.
This feature coincides with the requirement to spin up service landing pages for paid search campaigns. The ability to rotate content can optimise the performance of the page and measure the effectiveness and conversion rate.
Within WordPress our team developed the component to enable Clear to be able to add it to their page, restricting core styling access, meaning that the brand style couldn’t be adjusted by the various team members who have access, and consistency was retained.
Introducing core functionality and features with content management as its core
Sitewide Search
Because the new website sitemap was comprehensive a sitewide search was included to allow users to be able to search for content easily. Displaying the results in separate areas for news articles, case studies and generic service pages.
Introducing Finance Hub – Clear’s Blog and Insights Area
The blog area for Clear was going to play a large role around their content marketing strategy. As the team produced thought-leadership content on finance and industry insights, these articles were going to be shared and promoted on various social channels.
Capturing Contact Data Through Downloadable Guides
Another part of Clears marketing strategy was to share some of their thought leadership through downloadable whitepapers and guides.
These guides after being uploaded onto the website, were put behind an email optin form, so Clear could capture the potential leads who would benefit from the information they were sharing.
Pardot Integration
The website contains various contact forms, email optin forms as well as application forms. Each of these forms are integrated with Pardot to synchronize data captured from the website directly into their email marketing platform and SalesForce CRM.
Technology & Plugins
Clear is powered by WordPress however Clear also uses Salesforce’s Pardot email marketing platform and we helped implement Pardot data capture forms into the website to ensure captured leads would automatically feed into Salesforce and Pardot.
Find out more about the plugins and custom integrations we’ve created here.
Results
The existing website had a pagespeed score of F 36% however on launch of the site, after Google tag manager was implemented we achieved a 94% A rating for page speed, reducing the page size by 4mb and shaving 2 seconds of page load time.
