BT

BT needed to update the front end of their mobile portal to reduce inbound calls to service desk and encourage easy self-serve by their customers. This required both UX updates as well as an updated brand deployment on the site.

DISCOVERY

Discovery was held at the BT offices with key stakeholders on the project that covered product management, service management, training and service desk. Before jumping in to Discovery however, we asked key stakeholders to provide us with examples of websites they like and dislike along with the reasons why. The purpose of this is for the whole team to understand a bit more about each stakeholders motivations and preferences. This was discussed in the Discovery kick-off session, in an open forum. This builds empathy and ensures each stakeholder is aware of each others motivations, and make sure we all agree at the start on aligned goals and objectives. In preparation for Discovery we performed some additional research from comparable service management platforms. We also underwent a UX audit to see what we could identify as potential issues in advance so we could address this with the team.

We then went through each part of the portal in detail to understand where specific challenges existed. As expected, each stakeholder identified very specific challenges and these were later combined with information obtained via service agent interviews and listen-in sessions, to hear ‘live’ caller information. Key things around the tone, the language and the specific issues helped inform decisions in the UI. At the end of Discovery we agreed on 10 key journeys that could make the biggest impact on the KPIs. We then broke these journeys down further in to manageable and deliverable assets – navigation, components and pages.

BT portal screen
Chart JS logo

Chart.JS

KEY CHALLENGES

NAVIGATION

One of the key challenges (and reasons for navigation being one of the areas highlighted), was the fact the site was very disorientating. There were a number of levels that included the company, team within the company, user account and specific service on a users account, so it was easy to get lost. As a result, we did a full navigation review and came up with a new, simplified structure to make it much easier for both individual users and company admins to manage accounts, teams and services in multiple locations.

FLASH

Another key challenge was that there was some data visualisation using Flash which as we know, was an expiring technology. As a result, we proposed utilising an open source javascript approach that not only worked faster, but was a lot more secure using https://www.chartjs.org/

USER TESTING

Once we had some prototypes put together, we ran them through user testing to see how users interacted with the new journeys. Some of the highlights include:

RAISE A TICKET


9 out of 10 users took the intended path
38.5% faster stage completion

BLOCK A SIM


Completion times improved by around 20%
80% of users scored the journey as simple and easy
76% of users said it took them less time than they expected

GOAL COMPLETION


100% of users successfully completed all tasks

BT user testing

LEARNING CURVE

There was a certain amount of learning on first interaction, likely down to the fact we were testing medium fidelity prototypes but we found that people using the correct path more than doubled upon their second interaction.

THINKING AHEAD

Following testing, there were some things we recommended for future consideration such as global search and copy review.

COMPONENT LIBRARY

Along with the designs, we also delivered a pattern library that BT could utilise and refer to in the future for a wider rollout of the new designs. All files were polished and prepped for dev handoff.

BT Style Guide

THE BUILD

In order to ease the integration of components into client’s system, a pattern library was built that comprise all the designed components and the highest traffic pages to demonstrate their behaviour in real life scenarios. A KSS-node style guide was automatically generated allowing developers to break components into separate templates, making site-wide customisation easy. This provided a clear, user-friendly way to validate the work done.

To make the development more robust, a Bootstrap CSS library was used. Its variables and utility classes sped up the process, leaving only custom styles to be written from scratch. Bootstrap’s out-of-the-box interactive components were best suited so things like accordions, switch buttons etc didn’t have to be written from scratch.

Grunt task runner helped reduce tedious, repetitive tasks:

  • CSS files were built automatically from SCSS source code
  • JS files were concatenated and compiled to work in every browser
  • Style guide generated to QA changes on local environment

Finally, a Github repository was integrated with Netlify platform so each change merged with master branch triggered a deployment on Netlify allowing the client to instantly preview latest changes.

TECHNOLOGY

In order to ease the integration of components into client’s system, a pattern library was built that comprise all the designed components and the highest traffic pages to demonstrate their behaviour in real life scenarios.

Grunt Task Runner


Grunt task runner reduced tedious, repetitive tasks. CSS files were built automatically from SCSS source code, JS files were concatenated, minified and transpiled to work in every major browser (including IE) and the styleguide was generated to check the changes on local environment.

Bootstrap


To make the development more robust a CSS library Bootstrap was used; its variables and utility classes sped up the process leaving only custom styles to be written from scratch; also Bootstrap’s out-of-the-box interactive components were suited for the needs so things like accordion, switch button etc didn’t have to be written from scratch.

Github


A Github repository was integrated with Netlify platform so each change merged with master branch triggered a deployment on Netlify allowing the client to preview latest changes instantly.

Kss-node styleguide


Automatically generated styleguide allowed developers to break components into separate templates making it easy to modify them in a centralised location, to provide a clear, user-friendly way to validate the work completed.