KCOM provide internet-based and telecommunications services to over 140,000 consumers and businesses customers in the region. The business wanted to improve its customer experience and use My Account as a go-to tool for its customers to empower them to manage its services online.

The problem with the current My Account is that it was built with the customer website space, in a sense a website within a website, making it difficult for customers to navigate the website on different devices because of the unnecessary complexity with multiple navigations at play.

Another problem was the performance when a customer would visit the homepage/dashboard. The user had to wait until the page loaded because of the different services it had to talk to before doing anything, which was terrible.

Main Goal

The goal was to give users a streamlined experience, making navigating around the site as smooth as possible, focusing on accessing services and managing their accounts an easy experience on any device.

Sub Goals

• Increase customer visits
• A customer can View their services from any device efficiently
• Enrich the experience for the customers

My role for this project was lead UX Designer. I also produced UI assets and help develop front-end components. I would also work on prototypes to help bring ideas to life when working on critical areas of My Account.

I would also attend with stakeholders for a feedback session and feature gathering. I would also conduct surveys and user testing sessions with internal team members in the customer services team who would be using the tool to help deal with customers problems.

The Team

For the project, the team consisted of a group of brilliant team members who brought together a wide range of skills and expertise to make sure we deliver a fantastic product for the customer and business.

• Jonathan Knaggs, Software Engineer
• Chris Oxtoby, Software Engineer
• Liam Walker, Software Engineer
• Danny Kay, Software Engineer
• Kieran Ward, Software Engineer
• Alex Nicolls, Software Engineer
• Steve Colbeck, QA Tester
• Pramilla Kamdam, QA Tester
• Jacob Stone, UX Designer

The first thing we did was understand the customer's pain points using the old service. Then, using data from Google Analytics and implementing Hotjar in the old website helped deliver critical insight into what our customers were trying to find and accomplish.

For example, we identified one customer journey where they wanted to see what package they were on, how much they were paying, and how much data they were using. Unfortunately, the poor navigation structure and performance proved painful for the customer to access this information.

The insight highlighted vital issues that the new My Account needed to be created from the ground up as service focus first. The old system made it very difficult for the customer to find this information quickly due to poor navigation, lack of dedicated services and poor performance when trying to complete the most straightforward task.

On the back of the research, the team separated the new My Account from the consumer space into a standalone service that customers can use from a business or consumer space. Doing this gives us a great foundation.

The navigation was the next challenge that we needed to address for My Account. Before we jumped into any sketches, wireframes or development, we needed to address critical areas that customers were struggling with and make their lives easier.

Understanding that the new websited need to be a service focused experiance. We broke down the existing site to give it a nice clean slate and tried to group them effectively according to the type of service. The types of service could potentially sit in the following key areas: product, billing, support, and so forth, so we indicated key areas the customer would need.

Multipurpose

The tricky aspect of this new My Account was incorporating business into the same remit as consumer customer using the same application but giving little different experiences. Still, navigation around the website should feel the same if a consumer customer is also a business customer. They should be able to perform their task with ease. So once we were happy with the navigation structure, we decided that the navigation would be fully dynamic based on customer service and type.

To help improve the performance of My Account. First, we needed to address the issue with accessing multiple accounts. The old My Account would pull multiple accounts onto one page and present each account details stacked on each other. Thus, each account accessed information simultaneously, which heavily reduced the website speed because of the number of requests it was performing.

Because of this, it created a ripple effect, difficulty accessing other areas of the website, customers leaving because the time to load information was taking too long and generally making problems.

Addressing the problem

The team re-built the functionality to address how the data is called and pulled back by making asynchronous calls. Thus, improving how the system pulled large amounts of data back. In addition, we introduced an account selector on the front-end, and this dropdown list would hold all accounts but will only show one chosen by the user.

If a customer wants to select a different account to view, they can choose what they want, and the system reloads the page pulling the data just for that account, saving time and performance. This solution solved many issues but ultimately gave the user greater control.

We also introduced a nice feature, the ability to favourite an account. It would automatically load up when the customer visited My Account. We implemented this feature to improve efficiency for the customer ultimately save time.

Responsive Design

The new design is fully responsive. It is designed and developed mobile-first My Account needed to be accessible across multiple devices easily. With the rise of mobile browsing, we want the customers to have a great experience on whatever device they are using.

Fixed Navigation

There are three core areas of My Account the header, sidebar and main content. The header and sidebar are the key navigation areas for the customer to access services and pages and are created to be fixed. I went for this approach because I wanted the navigation to be with the customer throughout the journey.

Clear Panels

Panels are used across My Account to help break down critical identifying areas, for example, direct debit, parental control within broadband service. Customers needed to access with ease, and utilising these panels helped convey the customer's information and services.

Building block

Developing front-end components and prototyping, I was hugely inspired by the work of Brad Frost and his work on Atomic Design. Utilising this methodology helped My Account be easily maintainable, adapt to change and help improve performance. I would start documenting these components into a handy design system that the team could reference when building key functionality. I wanted them to have the flexibility and confidence to create pages themselves using these components to help improve speed within the development.

Responsive Design

With KCOM large customer base, we needed to make My Account accessible as much as possible. Tackling this aspect was very important to me as an advocate for accessibility and inclusive design to help users have a significantly positive experience using My Account and give them the confidence to use our services time and time again.

Keyboard Compatibility

My Account can be utilised using a keyboard. It was important building the site from the ground up that this functionally continued through the process so r our customers how may have poor mobility or blind and using a screen reader can effectively complete their with no hindrance to the experience.

High Contrast Theme

I introduced a high contrast theme that we called Dark theme into the system to give the customers a choice and help customers with low vision, colour blind, and maximise legibility. The great thing about the theme selector is that using cookies, it remembers which theme you selected, so if you return to use the system, it will keep the same theme for you, which adds a personal touch to the user experience.

The Small Things

With accessibility, the tiniest changes do create a significant positive impact for the user. For example, we give buttons accessible names to help screen readers indicate the type of button and what the button purpose is. We also made sure generic links had underlined, so they were identifiable as clickable links. I also tried to make sure that any iconography used would best try to represent its areas. Utilising these small changes, I believe it helps us create a more inclusive experience and putting the customer at the heart of it.