Responsive redesign, replatforming, and building a design system

The Challenge

To create a responsive website on a new CMS platform (WordPress) without losing the core brand experience whilst simultaneously increasing conversions on mobile and tablet devices, increasing the volume of organic traffic, and to reduce content management costs.

The Vision

To create a responsive, robust, and flexible design system to provide a solid foundation for the re-platforming of the brochure-ware website, and to create a separation of concerns to allow delivery of larger projects in a more agile manner.

The Team

The internal team consisted of one Project Manager, the Head of Web and Content, a Website Change Manager and myself as Senior UX Designer. Externally, we would be using a 3rd party agency to deliver the WordPress Templates and the strategy for content migration.

The Project Structure

The project was split into separate work streams of content migration, transactional website, and what became known as the “brochure-ware” website; The latter being the area where the majority of my work was focussed.

The Approach

In order to broaden the visibility of the work we were doing in creating a more consistent and flexible framework for the customer facing, content-heavy brochure-ware part of the website offering, I wanted the design process to be as accessible as possible.

To this end, I hand-coded a framework using Jekyll (a static site generator) which would house the Web Design Standards. The would sit on it’s own domain for everyone within the organisation to gain access, as well as authorised 3rd parties.

I constantly shared progress on our project management software which everyone involved in the project, including the stakeholders, had access to, in order to build a level of transparency and trust.

This was reinforced with weekly meetings between 3 remote teams to ensure we were addressing the relevant areas, and that we continued to design and build in the most efficient way possible.

My role

I led the design of the Staysure Website Redevelopment project with the goal of consolidating all of the current website components into a coherent and reusable design system.

I was also responsible for the creation of the responsive website framework (hand-coded in HTML, CSS, and JS for enhanced features) that would be utilised by the 3rd party developers to implement as a WordPress theme.

Business Case Development

In partnership with the remote content team and analytics expert, we utilised our own analytics in conjunction with a number of public case studies on responsive website redesigns in the insurance industry to generate a business plan to get a green light for the project.

Planning & Scope Definition

I defined the scope of the work involved in creating the Web Design System with the Project Manager in order to integrate it with the template project timeline that is usually implemented for smaller web projects.

I evangelised the benefits to both customers and the business of a standardised framework, and prioritised features to accelerate the development process.

Interface Audit & Requirements

In order to refactor the current templates utilised on the live brochure-ware website, I conducted an audit of all of the interface elements used throughout the website. This provided the basis of the requirements for creating the Web Design System

A collection of pages from the interface inventory conducted on the Staysure wesbite.

Creation of Design Principles

In order for the Design System to be implemented as intended, I created a set of design principles that would apply to all future web-based projects. This also became part of the Web Design Standards as the fundamental approach that should be adopted for this and all future work.

A screenshot of the design principles on the introductory page of the web design system.

Design & Build

Utilising the static site generator Jekyll, I implemented a framework to house the pattern library and style guide that together make up the Web Design System.

I also hand-coded production-ready components that were used as the building blocks of the required templates for the website, along with detailed documentation with regards to accessibility and implementation for the benefit of the 3rd party developers, and all future developers who would come to rely upon this design system.

Examples of complete page templates generated from components of the web design system.

The Delivery

Through a collaborative and iterative design process, I was able to design and build a fully responsive design system that was understood and upheld by everyone involved in the project.

This collaborative approach continued with the work carried out by the 3rd party development team who integrated the system into WordPress templates to fulfil the business goals set out at the beginning of the project.

The Impact

The following measurements – taken over the first 4 months of the solution going live and compared to the same period the previous year – show vast improvements in the areas targeted in the business case: