Core colours
#131c42
#cfedfc
#2441e5
#ffffff
Fonts
Poppins
Arial
Accessibility
WCAG 2.1 AA
Problem
Re-platform and Rebrand the Yorkshire Water online account.
The online account hasn’t had any major updates in over 7 years and the tech stack is not supported by the agile squads and therefore cannot be incrementally improved.
Solution
Re-platform and redesign the full online account, include all "like for like" features unless strong qualitative or quantitative research suggests otherwise.
Tools
-
Figma​
-
XD
-
Axure
-
HTML/CSS/javascript/ Nunjucks
Team
-
2 React Developers
-
2 .Net Developers
-
2 Testers
-
1 Business Analyst
-
1 Product Owner
-
Scrum Master
-
Senior UX Designer (Me)
My Role
Design a new accessible online account in-line with the new rebrand but following our tried and tested pattern library that is backed by research. Discover more about the customers wants and needs and provide immediate recommendations for future enhancements of the online account.
Timeline
7 months
My Design Process
Interviews
Early decision to discuss with customers their thoughts and feelings about their current online account and their usage patterns. We choose a varied range of customers:
-
Bill methods: paid per bill, Direct Debit, Post Office, monthly, quarterly and yearly
-
Water meter installed.
-
Water meter not installed
-
IT literacy
-
Different parts of Yorkshire
We also decided to engage with Yorkshire Water’s online community with an understanding there might be biases.
The findings helped us understand the different wants and needs of customers and create patterns that would be used later in the project to create an online experience tailored to each customer.
Prioritising features
Interviews and surveys were created to prioritise all the online account features. This helped us prioritise the information architecture and highlighted features of interest for future iterations of the online account.
Card sorting
A variety of features were presented to be labelled and grouped together. it was found that not one combination suited everyone but strong patterns were identified.
Wireframes & design workshop (crazy 8s)
Fuelled by competitor analysis, qualitative and quantitive research I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualisation without losing time. My sketches were based on the initial user interviews, the business goal, and the heuristic evaluation. They each pointed to the fact that there were too many distractions.
A design workshop was conducted with a range of colleagues from call centre to marketing. First we presented survey data, analytics and customer pain points to the group. We then designed as many designs (up to 8) as we could in the time limit set and presented each design back to the group. Once everyone had presented the designs we dot voted on features we liked and didn’t like and agreed an approach to explore further.
A tailored experience just for you
When showing customers prototypes or features that were not in their personal account we observed a lot of confusion therefore we tailored each experience with features that are only applicable to their online account.
Customer journey map
Part of the process to ensure a seamless experience was working hand in hand with the developers and testers to help them understand our vision.
The diagram to the right shows a customer with a single account skipping the multiple property page and going directly to their property page and a customer with multiple accounts going to the multiple properties page. An explored enhancement was to allow the customer to set a priority account or my home.
Prototype and usability testing
Created a fully-functional, high-fidelity prototypes using HTML/CSS/Javascript/Nunjucks to make a prototype as close to the real thing as possible so we can get a true understanding of what customers think.
At the same time, we started recruiting participants for the first round of customer research that fit billing criteria. Some of the identified usability issues identified from the rounds of research are the following.
Finalised UI
After many iterations of the prototype the final User Interface looked like the following:
Next steps
I worked with the squad to resolve any unforeseen technical limitations and any edge cases that come out of testing. I also began working on new features that were highlighted in the discovery phase of the project.
01
Due to the sensitivity of the online account the changes need communicating to the customers that the online account is being updated.
02
Prepare support staff for release. Calls through to the call centre usually go up and staff need to have the information available to give advice.
03
The prototype entered a beta phase where the new online account was rolled to real users. The team monitors analytics, call centre feedback, surveys and conducts further usability studies with the live site.
Learnings
From designing and researching the online account we gained a great understanding of our customers. A major learning was due to changing platform, Rebranding and the current online account having little attention in over 7 years. This meant a complete overhaul was decided upon by senior management, and with that come a lot of risk. To reduce this risk we had a tried and tested pattern library and conducted rounds of usability tests, to build confidence before initial launch. We also avoided developing new features that could bring further unknowns to the project. The online account should now serve as a platform to develop and iterate sprint by sprint moving forward.
Outcomes
The online account helped the customer satisfaction score increase and allowed Yorkshire Water to offer digital first billing.