We’ve recently re-launched the website for Pulsant, a leading cloud computing provider, who own and manage 15 datacentres across the UK. This has been a massive undertaking, and allowed us to use our strengths across the entire digital spectrum from search, brand positioning, UX, creative and development.

This is a summary of our approach to developing the site, from the early prototypes through to the ongoing improvements and post-launch campaign support. The development team were involved throughout the brand and customer workshops, planning and creative process, to ensure a smooth delivery of the project and to allow for a more agile approach the building the site. This also allowed us to explore some of the latest web technology, incorporating animation, interactive components and a modern, future-proofed methodology.

pulsant-homepage-head.jpg

Taking a content-first approach

Everything begins with a good understanding of content and site architecture. Without content, a site is superficial, and can only be judged on aesthetics. Whilst we wanted to deliver a site that looked great, the real results will be seen in the weeks and months after the launch, measured against key metrics such as time on site, bounce rates and conversions.

We carefully planned out the user journeys, and how these would differ for the three customer personas identified. Content plans were drawn up, and these were vital in creating the initial wireframes and scamps that would eventually be refined and iterated on to become initial prototypes.

pulsant-nav.jpg

Usability is key

The prototypes were invaluable for getting quick feedback on our early ideas. Key components such as the site navigation, hero feature banners and product templates evolved based on real user testing, allowing us to fine tune the most important parts of the site. Our UX team were on hand to oversee everything, and their input led to some of the most successful parts of the project.

Developing a design system

With large websites, versatility is vital to allow a website to evolve and grow. We built a design system (powered by the Fractal component library) that allows us to put page layouts together far more quickly than would be previously possible. Inspired by Brad Frost’s “Atomic Design” we built a system that allows us to build upon solid foundations of typography, colour and grids to create unique layouts that are consistent and adaptable.

pulsant-interactive.jpg

Our front end framework

Our front end developers extended our own framework (based on a combination of BEM and ITCSS methodologies) for the project, allowing for greater collaboration between team members and better code consistency. This all means that developers can work on someone else’s code and understand it more easily, and that teams can simplify the process of testing and checking each other’s work.

Ensuring support across devices

Having worked with Pulsant for a number of years, our in-house performance team are able to review metrics on the wide range of site visitors. We built a picture of the most common types of devices, browsers and screen sizes used to view the site, and from that worked out which browsers we needed to support. The decision was made to support Internet Explorer version 11 and upwards, which allowed us to integrate modern web technologies that aren’t supported on older versions. A progressive enhancement approach to the build means that all visitors can have a positive user experience, but visitors with modern devices and browsers will see an enhanced version.

pulsant-mobile.jpg

Bringing the site to life

These enhancements include the animated banners – a component that took several iterations to get right. We initially built the animation using GSAP – a JavaScript based animation library, due to the fact that we were already using the library for animation elsewhere on the site. However, the nature of the animation meant that performance wasn’t what we expected, a slow-frame rate (aka jank-y performance) led to a poor experience on smartphones and in Edge/IE. We rebuilt the animation using JavaScript and HTML5 via canvas, with much smoother results.

We also introduced multiple ways for users to interact with the site. As well as the traditional main menu navigation, we built a service selector tool, accessed via a tab on the side of the page allowing users to browse the most commonly used services. This more visual approach to navigation enhances the brand identity through the use of real-world illustrations and shows how the technology is used in our everyday lives.

pulsant-service-selector.png

A solid foundation behind the scenes

The back end of the site is built on a customised build of WordPress – the popular open-source CMS. We adapted the software to allow for bespoke page layouts to be put together with ease, and allowing the marketing and search teams to fine-tune the on-page content as needed. The WordPress build generates a static version of the site, for improved page load times and security.

pulsant-cms.jpg

Continuous optimisation

The new site has been live for a few weeks, allowing us to benchmark performance against past engagement. The early signs are very promising, with improvements to all of the most meaningful metrics. We have already began planning for further improvements – a website such as this is never truly finished – and support ongoing campaigns into 2018.

If you've got an upcoming web project you'd like to discuss, please give us a call on 0161 441 4740.

By Tim Butler

Technical Director

Development

News and views from Big Brand Ideas

Engaging a booming health and wellness economy

Engaging a booming health and wellness economy

A focus on how search is changing

A focus on how search is changing

Cutting through the online Christmas clutter

Cutting through the online Christmas clutter

‘You’ve got mail’

‘You’ve got mail’