Experience Designer
High Fidelity DesignsBANNER2.jpg

KPMG

 

KPMG: A Project Snapshot

High Fidelity DesignsLOGO.jpg

Project Overview

Client
KPMG, London 2018

Brief
Create a way to keep users engaged and able to navigate the issue-based marketing pages across the KPMG service pages.

Challenge
While KPMG’s underlying platform was great; the site being fast, responsive and its functionality working well, the presentation layer was underperforming, with questionable site analytics and conversion rates, on top of low user engagement. The site’s UI components presented a very poor user experience, scoring badly for navigation, signposting, template differentiation and primary CTAs. As part of a team, I would explore ways to troubleshoot problematic UI and navigation patterns to improve usability across the KPMG service pages.

Solution
Our enhanced designs significantly improved usability and user engagement through a series of changes to the UI, user flows, navigation and signposting. Users were kept informed of their location through deeper breadcrumb navigation; redesigned spotlight cards (staying true to KPMG’s strict brand guidelines) would ensure a clear distinction between different elements on the page, and what would happen when these were clicked. Dead-end pages were eliminated with the addition of in-page related articles, and the addition of a newsletter signup CTA to every page would significantly increase sign-up rates.

My role
UX Designer

Methodologies used in my role
Workshop facilitation | Workshop output analysis | Design studios | User journeys | Paper wireframe sketches | Low fidelity wireframes

Team
Ben Kay UX Director
Greg Docherty UI Designer

 

The Project: A Presentation Layer Falling Short of Expectations

KPMG had recently completed a redesign of their service pages across KPMG.co.uk, heading in a more issue-based marketing direction. These pages were critical for KPMG to connect with visitors and communicate the value they could deliver to their clients.

Despite these pages bringing together the best of capabilities, experts, insights, and points of view on the issues challenging KPMG customers and the business community. User engagement, subscriptions to newsletters, and registrations were falling well below target. Following a heuristic review of KPMG’s service pages by one of our digital partners. My team and I were brought on board to solve the usability and navigation issues that had been identified across the service pages. Our exploration of the site would show that while the content quality was up there with the best of KPMGs competitors, the site’s presentation layer was a confusing experience, rife with dead ends, unexpected navigation behaviours, and ambiguous UI elements. 

Through the course of this project, we would improve user engagement through enhanced UI designs, crafted user journeys, better content display, and redesign the customer experience across the pages, ensuring that users could easily navigate and find the information they need.

 

Client Workshops: Understanding Content Through Discovery Workshops

At the outset of the project, I assisted in the facilitation of ‘discovery, design and content’ workshops at KPMG’s London headquarters to gain an understanding of the content types on the site and the expected level of user engagement. This would help feed into our redesign of the service page layouts, including content hierarchy, vertical rhythm, white space, content chunking, CTAs and how the pages work together when navigating vertically as well as horizontally. 

Example of the walls following a ‘discovery, design and content’ workshop at KPMG

Example of the walls following a ‘discovery, design and content’ workshop at KPMG

KPMG service pages proposed content flow

KPMG service pages proposed content flow


The KPMG Brand Guide: A Lack of Guidance for Digital use

A major culprit behind the ambiguous use of UI elements was a limited number of component choices across KPMG’s style branding guide and a lack of proper instruction on how to use these elements across their digital estate.

A selection of pages from KPMGs brand guidelines

A selection of pages from KPMGs brand guidelines

 

Example One: Inconsistent Appearance of Links

The available components were leaving site designers using the same elements in multiple contexts and for very different purposes, leading to a confusing site experience. Some examples of this can be seen below, with the inconsistent use of links in text and a variety of header sizes across pages.

Examples of the lack of consistency when using links on the page

Examples of the lack of consistency when using links on the page

 

Example Two: Inconsistent Header Styles

Examples of the different header types across the pages

Examples of the different header types across the pages

 

User Flows: Tackling Deadends and the Absence of Clear Pathways

When reviewing the current site, there were no clear paths through it, with many pages being dead-ends displaying no way back to the previous page or related articles. We proposed a journey where hub pages could link to multiple directional issues and back again, with all pages displaying a CTA to sign up to the KPMG newsletter. Later, we created wireframes and prototypes to present how the new journeys and layouts could look and function. Below is an example of the existing journey through the pages to an article:

Example of the existing site journey and issues exposed during analysis

Example of the existing site journey and issues exposed during analysis

 

Our proposed user flow showcased how hub pages could link to multiple directional issues and back again, with all pages displaying a CTA to sign up to the KPMG newsletter.

Proposed user flow

 

Paper Sketches: Early Chunking Examples

A selection of my early concept sketches

A selection of my early concept sketches

 

Low Fidelity Wireframes: Outlining Content Blocks

An example of two low fidelity designs outlining content placement across the pages

An example of two low fidelity designs outlining content placement across the pages

 

Mid Fidelity Wireframes

Mid fidelity designs

Mid fidelity designs


Wireframe UI Breakdown

A breakdown of implemented changes to the UI across the service and issue pages

A breakdown of implemented changes to the UI across the service and issue pages

 

Final Designs

Our implemented design changes scored highly in usability lab tests and saw a real world increase in user engagement, subscriptions to newsletters and registrations across the KPMG website. In addition to ensuring that all pages included a newsletter signup CTA, we placed our focus on a return to standard content types that site visitors would be familiar with, adopting these throughout the site. 

A redesign of the ‘spotlight cards’ meant that users could now differentiate whether the cards would link to an article, a blog or a report. We also ensured that those pages, once accessed, would have the ability to loop the user back to related articles and previously skipped content from the preceding page. The profile card components also saw a change, in that additional information to set one contact apart from another was added to the profile cards, showcasing more around their area of expertise to entice users to connect with them. The profile detail page itself, would also display links to articles and content relevant to the contact’s area of expertise, presenting the user with engaging content about what services KPMG can offer their clients. 

The new designs and style changes implemented during my time on the project continue to live across KPMG’s web site today.

High fidelity designs

Screen grab of Sketch/InVision prototype

Screen grab of Sketch/InVision prototype