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.
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.
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.
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.
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.
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.
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.
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.
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.
23 Nov 2017 - Development