Introduction
Kent Reliance is part of OneSavings Bank, providing personal banking with ease to customers in the South East. The banks main message is based on the principles of “loyalty, service and putting customers first”
As part of a series of updates, I was tasked with updating problematic areas of the website. An area that had been identified often was the contact us page, where the customer experience team regularly flagged that customers struggled with finding local branches, or got confused with the lack of information on the page.
Understanding the issues
One of the main issues with the Kent Reliance site was finding information for your nearest branch.
The first issue on the website was the homepage, where Google Maps was integrated to show customers an interactive map of our locations. As this map was shown on the homepage, thousands of customers hit the page, meaning we needed a commercial license. When also doing a review of budgets, it was decided that the cost to the business was too high, so another solution would be needed.
The branches page also had it’s issues. This area also showed the Google Maps integration, which had the same issues as the homepage. The page had functionality built to find your nearest branch based on postcode input, however this would not work if the map was down. On mobile devices, going into list view would show every branch with all it’s info open, meaning constant reading and scrolling to find the relevant branch.
It was also found that we had areas on the support section around parking and getting to branches via public transport. These were not shown on the branches page, meaning important information was being lost.
Research
My initial research began with looking at other banks and seeing how they showcase their locations. There were two major features that I found would set our webpage differently from others. The first feature was that almost all the banks used some kind of maps functionality. The second involved the use of branches across the UK, whereas our branches were based in Kent and spread out fairly widely.
Something all the banks shared was the clear information for a branch – the branch name, address, opening hours and features. I knew that Kent Reliance customers also held accounts with some of these others banks, so familiarity would be key to not confuse customers.
We worked with the insights team to help gain some knowledge into who our customers are and what feedback they had for the current website. One way of doing this was by working with an external agency, Maru Matchbox, to host focus groups where users would be recorded engaging with the website on both desktop and mobile.
The focus group lasted one week and was hosted by the Maru Matchbox team. Both the users and their screen were recorded allowing us to watch the footage back and listen to real time feedback.
Design
I began planning out the design by mapping out basic ideas on what would be needed on the page. This included all the information a user will look for based on my research. I sketched out basic wireframe designs on my iPad using GoodNotes, which allowed me to then Airdrop them to my laptop to easily present ideas.
The solution
The concept for the solution involved removing the map on the homepage and replacing with a info box, image and link to the branches page. We knew that customers were fine with accessing the branches area from both the menu and footer. Alongside this, a new homepage design was due to be started, so we knew this could be reviewed in the future.
For the branches page, a new header image of our newest branch was placed in to freshen up the page. There was a higher emphasis on the postcode functionality – we made this clearer for customers to use, along with features such as using location services to get the users location. Once the user inputted their postcode, the branch locations would order from closest to furthest, along with information on how many miles away they were. Clicking on a branch populated the side panel with content. The aim of this content was to be easily read, so it was placed into sections. We also included a ‘other information’ section, which would like to support sections like the public transport and parking pages.
Development and testing
When the page was nearing the end of development, I used our testing site to make sure everything looked and functioned as expected. The page was tested on desktop, tablet and mobile to make sure it worked on all sizes. Some of the issues encountered were based on the platform that the site was sitting on, which meant we had to take out some of the advanced functionality. Some of these features included autofill using Googles API data, and a ‘Use my location’ button which would use the users geolocation data to find their nearest branch.
Post development maintenance
Once the page had been developed and pushed live, we made sure to monitor the page for activity, any issues and possible improvements. Initial statistics from our CRO team showed that the page had an increase in visitor traffic.
Screenshots
