THE CHALLENGE
Business users
(internal staff and business as a whole)
We found out that the multiple sites and systems (website/knowledge base/CRM/manual processes) - which are meant to function together - were not connecting seamlessly. In addition, the site was not able to keep up with real-time demands (eg: reporting on incidents in real-time) because of the inconsistencies of the various systems.
THE CHALLENGE
Customers
(external users)
The online site had become overloaded due to layers of repeated information and an outdated website design had made it difficult for users to find what they’re looking for quickly. A lot of information they were actually looking for was missing or 'hidden' on the site (as the sitemap had grown, without a point of central governance, over time).
What we did
The prototype we were asked to create was for the ‘ideal’ product – to show what could be done if there were no holds barred and budget was no object. The real solution would then be phased in slowly to improve the site over time. Starting with the existing user-portal, and upgrading over a period of time to a completely new CRM and consumer-facing website.
We carried out research to:
- See how the current site functions and what needs to be improved (requirements gathering, stakeholder/internal user interviews, site audit)
- See what the competition were currently doing (competitor audit)
- Find out how the current site functions (content audit/tech audit etc.)
- Find out who users are (personas were developed based on this information)
We also:
- Presented paper prototypes to go through the proposed content hierarchies and wireframes
- Planned and carried out workshops with the client (to test the prototype and go through user journeys before design)
- Approved the proposed (initial) sitemap
Working closely with the Lead Designer (Andrew Webster) and the rest of the team – we went from lo-fi designs to presentation level designs in a three month period, which culminated with a presentation to the Affinity Water Board.
Requirements gathering and research
My immersion process included doing a full site audit of the existing site, as well as speaking to members of the Affinity Water team on-site at the Call Centre. Based on all information gathered, I did an affinity grouping exercise of all the relevant (current) functionality, and any items which were specifically requested by the client or the team. Once the core issues were identified, they were checked against Google Analytics data. The findings were then fed through to the rest of the RY team, to be included in the Customer Research Report.
Click on the six focus areas below to find out more...
Speaking to Kevin Bennett, the Customer Experience manager at Affinity Water, we discovered that there were issues in the way that different customers were handled within the system. People who own property vs. people who rent need different levels of customer care and often have different knowledge of the water meter on their property.
There was also a difference between what a private home-owner needs to manage in their account, versus what a landlord or agent (with multiple properties and multiple water-meters) might need. The current tech. setup/system wasn't configured to set up one owner with multiple accounts/homes. This was added to the list of functionality needed when creating the new 'My Account' section.
In the site audit, we found that the links to self-service were hidden within blocks of text, which ended up segmenting customers at first, only to lead them to the same form to fill out, which was redundant and confused the user journey.
Based on interviews with the staff, as well as interviews conducted with existing customers, we found that the payment process was unnecessarily drawn out. Technology was not integrated seamlessly to allow smooth user-journeys, which meant human-error and disconnected processes caused a lot of frustration (for both customers and internal staff).
From the site-audit I could see certain forms had very high views and were sought after, whereas other forms were lost (potentially due to poor signposting). I audited all the forms on the site, to match them to real user needs (from user interviews and call centre information) - simplifying and removing unnecessary forms where possible.
The most urgent form of contact with the site for customers is often in times of an incident (eg: infrastructure and roadworks, supply interruptions, reporting faults and leaks, pressure and crisis situations like flooding). However information regarding what to do in these situations (Affinity Water 'real time' updates, as well as information regarding what to do in emergencies) was scattered throughout the site, and poorly signposted on the homepage.
Through internal interviews we found that even though the team often had the information almost immediately - they struggled to communicate this effectively through the current site due to the lack of connectivity between various platforms. This would be compounded by the fact that often people who were fixing the issue were on location, and not able to log into the current system easily on their phones (which meant there was another level in the communication chain, from incident to customer).
Through customer interviews we found this insight was mirrored. Customers would report an issue online via chat, but the information would only appear live online a day or two later.
The recommendation was made that a process should be put in place to ensure content should be assessed and re-arranged according to how important it is - based on urgency and requirement from Google analytics and qualitative information gathered.
For example:
A. High priority content (eg: ‘What if I have no water’)
B. Medium priority content (eg: ‘How to check if I have a leak')
C. Low priority content eg: (eg: ‘Preventing future water problems’)
Form design on the site were not mobile-optimised. Many took customers a long time to fill out (no autofill function), and analytics showed low user stats. Forms were often also difficult to find within the sitemap - as they would be buried many levels deep within the confused hierarchy.
The recommendations were to consolidate and eliminate unnecessary detail, to define clear user needs and clarify them.
In the new sitemap, I eliminated redundant forms and provided a select few form options which could be easily located by users and placed higher up in the site hierarchy. We also recommended full screen forms and single-form fields to be used when designing the user experience at a later stage.
From a business perspective, Affinity Water needed to ensure the change of metering process goes smoothly for customers. As part of UK legislature, smart meters are not compulsory and it's entirely the customers choice. However the government requires energy suppliers to offer smart meters to all homes and small businesses across Great Britain by 2020. Having a smart meter usually improves water control and consumption efficiency for many customers. But customers are wary of the change due to the fact that some households pay more based on their daily use (as compared to their previously un-metered estimated fee). To ensure this information was explained to the customers in a transparent and fair way, we felt that focus areas on the site should be dedicated to customer education.
We also found out that a lot of seasonal information was relevant to customers at different points of the year - and educating them before the season change could help save water and cost (eg: pipes tend to burst during winter as customers are unaware of what they can do to prevent the bursts before cold spells). This insight led Andrew to a design solution which would factor in seasonal changes through image and colour use on the proposed designs.
During the interviews with the in-house team and customers, it also became evident that pipe-responsibility is an endless cause of confusion (who is responsible for different parts of a property's water system). This was also another area of the site which we felt would benefit from interactive and educational content, to ensure the information would be easier to understand and explain on the phone - as a picture speaks a thousand words, especially when it comes to underground piping!
From the Google analytics and site audit it became obvious that ‘My Account’ was the highest accessed page on the site. To improve the customer experience we needed to focus on the experience leading up to and beyond login.
Accounts and financial support queries had content distributed on both sides of the website (pre log-in and post-log in). To ensure that the user journey was smooth, we looked at the My Account area holistically, cleaning up the navigation and site-map as well as forms and content.
A recommendation was made to differentiate first time users and returning users (who have already registered and need to carry out a task) were differentiated right away from the login point to the portal, to speed up the process depending on their specific needs.
Site audit and Stakeholder & User Interviews
We carried out internal interviews with key members of the customer-facing teams at Affinity Water HQ in Hatfield, as well as interviews with existing Affinity Water website customers to get a full picture view of the current site and areas we could improve and matched this across the site audit.
The four main reasons customers go to the website (based on Google Analytics, quantitative and qualitative research) are:
- Billing
- Water usage
- Incident reporting/information updates
- Moving home
Customers wanted responsive, timely communications, and they wanted their expectations to be managed. It mattered more to customers to know that an incident was being handled, then knowing exactly when it would be repaired. However, if “live” information was available, they would like to be informed as and when it became available where possible.
Customer research report & recommendations
At the end of this period a Customer Research Report was presented to the team. Inside the document, the qualitative and quantitive data was combined, and recommendations based on the current sitemap and Google Analytics were made.
Defining requirements and quick wins
After this we defined the top requirements and “quick wins” document which would help us design the first set of wireframes to present to the client.
I developed the sitemap (with guidance and sense-checks from Sally Creasey) and presented the client with three versions – as well as a proposed “My Account” content hierarchy (post-log in).
Even though the site was only a ‘prototype’ for the pitch, we needed to get an idea of real content needs and hierarchies to create the wireframes and designs, so this step was necessary.
Personas
The last deliverables from the research part of the project were personas, which were used alongside the data gathered, to inform us of how user journeys might flow.
I assigned each persona with one of the ‘top tasks’ (billing/water usage/incident reporting/moving home) – this helped us define where there were any overlaps/crossover in the journeys, and helped me edit the user journeys down from draft into more defined, final user journeys (used alongside the input we received from the client in the Paper Prototyping workshop). It also helped us to communicate the needs of the customers to the client in a quick and concise way (instead of a post-it note deluge).
Prototypes & User journeys
The next phase of the project happened very rapidly – we had approx. 3 weeks to go from sketched wireframes to full ‘presentation ready’ designs.
Based on an internal team decision – I was asked to wireframe the user journeys, based on the four main ‘points of issue’ uncovered during the research part of the project, and decide which would be ideal to present and lead the Board through.
Once this was decided, the wireframes would be taken through to final design stage for the chosen user journey(s), the Home Page and the landing page of the My Accounts section.
Paper prototyping
During the first User Journey walk-through with the client, I had drawn paper wireframes of the pages shown in the Draft User Journey Document (download link below). This way, I could show content hierarchies of the pages, and link these through to the proposed user journey. This proved to be a very quick but valuable exercise. We took about 30 minutes going through the user journeys and getting feedback from the client about what they would like to see (from a business and customer perspective) – ensuring everyone was, quite literally, ‘on the same page’. It also opened up room for questions which needed to be flagged about proposed functionality (which would need to be quoted for in the following stages of the project).
The action gif on the left shows the paper prototype of the “Sign up for a water meter” user experience.
As we had begun wire-framing and intial design (the Home page, along with some other visual ideas were shown at the meeting too), I updated the user journeys with real wireframes wherever possible, and continued to do so as we went on.
This eventually led to a more refined user journey and wireframes which were shown at the Board presentation.
Finalising user journeys & wireframing
The last part of the project was very collaborative. Andrew and I were working in tandem on Sketch – as I was finalising wireframes, Andrew would take them through to design. Whenever needed we would consult and chat through things, and I would write copy when required (if I hadn’t already written the final copy in on the wireframe).
While we finalised these, I was also collaborating with a consultant who was assisting in writing out the User Stories for each journey. These would be passed onto the Affinity Water tech team so they could define the full scope of the project effectively.
High Fidelity User Journeys
User Stories
Example wireframe: Homepage
