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.

BT portal on laptop

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 to understand a bit more about each stakeholders aesthetic preference as well as what is most important to them. This was then discussed in more detail in the Discovery kick-off session to go in to more detail in an open forum. A key reason for this is to build empathy and ensure that each stakeholder is aware of each others motivations, and make sure we all agree at the start on aligned goals and objectives.

Also in preparation for Discovery we performed some additional research from comparable service management platforms. We combined this with examples of best practice and micro-animation. We 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 front end layer.

At the end of Discovery we agreed on 10 key journeys that could make the biggest impact on the KPIs, so this is where we would focus our attention. We then broke these journeys down further in to manageable and deliverable assets – navigation, components and pages.

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.
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 of the testing:

  • Time to raise a ticket reduced on average by 38%
  • 9 out of 10 users took the intended path
  • Sim blocking time improved by 20%
  • 80% of users scored the journey as ‘easy and simple’
  • 76% of users said it took them less time than expected
  • 100% of users successfully completed all the tasks
BT testing image

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. Following testing, there were some things we recommended for future consideration with thinks like 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.

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 relieved developers from doing tedious repetitive tasks:

  • CSS files were built automatically from SCSS source code
  • JS files were concatenated, minified and compiled to work in every major browser
  • The style guide was 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.

BT Style guide on laptop

TECHNOLOGY USED
NPM & Grunt
Bootstrap

AUTOMATED CI:
Automatic deployments on Netlify hosting

DEMO TEST ENVIRONMENT:
KSS Style Guide

DESIGN:
Sketch
InVision
Principle

GET A FREE CONSULTATION


At Eclipse we’ve got an incredibly talented, multi-award winning bunch of people ready to help you and your business. Reach out and talk to us there’s not much that can’t be solved with a few cups of tea, some bright people and a whiteboard.

    Your name (required)

    Email (required)

    Phone number (required)

    Your message