The Customer Relationship Management (CRM) platform that the call-centre team used was dated and time consument to use with data stored in several software applications. Moreover, the support team is spilt in two - one for Billing/Payment Enquiries and the other for Operations. These teams used two separate systems which made it tricky to distribute workload. The aim of this project was to bring all data into one single app that can be used by both teams.
TOOLS Adobe Illustrator, Photoshop, Zeplin and Jira
Severn Trent had previously engaged another agency who failed to meet requirement, so they were skeptical that Keytree can deliver what they need. In order to win Phase Two of the massive project, we need to deliver a workable solution for their Billing/Payment Enquiries team.
I was brought into the team to create a proposal design which won us Phase One contract. I then collabrated with UX Designers, using information from user research and their wireframes to deliver UI designs for all the components including icons. I worked with feedback from stakeholders and end-users to create iterations on the design.
The user journey starts with a service agent picking up a call from a customer. They then perform a search to bring up information related to the nature of the call. So I've designed the first screen, a search to be simple with a dropdown suggested search based on the input type (ie alphabetical or numerical characters) to help bring up relevant search results.
On the dashboards, informations are arranged into individual components that support agents can perform functions related to the components. For example, in the Customer Details component, agents are able to view customer's contact information as well as edit them within that component.
As the dashboards are information heavy, icons are used to reduce the time needed to search for information. Tool tips are used to guide those who are getting familarised with the interface.
At the top of the dashboards, there's a set of icons and information that provide a summary on the customer's credit status, satisfaction level, supply issue, water quality, sewage/flooding, incoming contacts and total current bill. This helps to highlight the support that a customer may require. The agent is able to see how many times the customer has contacted in the last 30 days or whether have recently had water supply issues.
System errors and water supply issues are displayed at the top of the page to inform the user of any known issues that may be affecting the customers. Strong colours are used to bring attention to these important messages - black for technical system/network errors and red for water supply issues.
Strong colours are used to bring out important messages, tasks for the user to complete and to highlight important information about the customer. For example, to bring attention to missing information that is required or inform the user of customers with special requirements.
I created a style guide for the team that included colour swatches, font styles, component library and padding guide. The developers are also able to use the style guide and the various components that have been designed to create screens that did not require UI input.
One of the biggest challenge of this project was finding a way to displaying huge amount of content whilst making sure that key information are easy to locate. I was able to solve the problem by placing groups of information in self-contained components within the dashboard. The colour choice was important to keep the content easy to find without distractions. The final product both sped up the initial training for new users and also improved the time taken to respond to customer contact.
With this new system in place, Severn Trent Water is able to move the agents between both Billings and Operation teams easily without intensive re-training. The dashboard view reduces time spent searching for relevant information within different softwares which greatly shortens the time agents spend per call.
With the majority of the team working on-site in Coventry whilst I was mainly based in the London office, I have learnt to keep all communications as detailed as possible which allowed me to be able to utilise the time I was on-site for gathering feedback from end-users and stakeholders.
I have also learnt that whilst the screen setup used in Severn Trent office is the same for every user, some of the users changed the default font size to a larger setting. This was discovered after the product had been built in the testing phase. The style guide that I created will help set a good base for further iteration to the design to cater for adjustable font settings. The inital scoop of the projects did not include accessibility support like agents who use screen readers and that should be included in future iteractions.
For this project, I worked mainly with four UX Designers, the front-end development team, Product Owner, an external Strategy Advisor and stakeholders from Severn Trent Water to ensure that the UI design met the brief.