Affinity for Business

Since the deregulation of the B2B water market, Affinity Water capitalised on an opportunity to grow their business customer base and created a new venture, Affinity for Business. I worked on user-centred enhancements to this new platform 6 months after the MVP launched.

Project Background and Goals

The opening of the water market for business to business customers in England and Wales forced a rethink on every aspect of the way water is packaged, sold and serviced to the business customer. What was clear from the outset though is that AfB’s core focus was and always will be great customer service. In an industry where margins are tight, the only real differentiator is customer service.

My role

As part of their Digital Roadmap, AfB appointed After Digital to create an MVP “My Account” area in 2018, and following this initial launch I worked on enhancing and developing key areas of the platform in 2019. I was UX lead on the project, working collaboratively with AfB’s own internal development team to define, develop and deliver the enhancements.

Identifying areas for improvement

Affinity for Business used their customer service staff to collect feedback on the platform, and we implemented Hotjar to create heatmaps, and record user sessions to gauge usability issues. Whenever we noticed multiple instances of feedback or usability issues, we created an issue for it and used Trello to determine the priority.

I facilitated two days of workshops with key stakeholders at AfB, working with a project manager who documented interactions on the day(s). I used Miro to capture the findings. I met with members of different teams within AfB, conducting interviews and gauging their views on the areas of the platform that they were responsible for.

Case Study: Meter Readings

Although I worked on enhancing multiple areas of the platform, I will focus on the approach to a single area to give greater insight into my ways of working and findings.

A user being able to view their meter readings online was a requirement for the platform launch. It was also one of the most viewed areas, which I identified from Google Analytics.

My research, and the feedback gathered, revealed:

🚫 Phase 1, old platform
✅ Phase 2, with researched-based enhancements



In the Phase 1 example above, I identified that the table was using colour in an inaccessible way, and the green background with white text did not meet WCAG 2.1 standards for colour contrast. I redesigned the table to have AfB’s primary dark blue as the table header text, and used the secondary green as an accent.

The data in the table was repetitive and not reflective of actual water usage

The platform had two columns that I identified could be removed, Meter Make and Meter Serial, as these were already located at the top of the page, and unchanging, so were just listed repeatedly.

By removing these two columns, it allowed us to add in a new column, “Daily Average Consumption”, a statistic we identified customers found useful on their paper/pdf bills from AfB. We included the users daily average consumption with a bar graph visualisation so that users could get an idea of their usage at a glance.

Customers would call AfB, and ask how to locate their meter

During an interview with customer service representatives, it became clear that they got a lot of calls from customers asking where their meter was. I spoke to the development team at AfB and discovered that their system had a record of all meter locations in longitude / latitude as well as meaningful notes taken by their service crew so that they could locate meters when they went to check them on-site.

We pulled this data for each meter through, and reformatted it into a Google Maps link so that a customer could visually see where their meter is located. This is particularly useful for bigger businesses that could have multiple meters across multiple locations.

In order for users to submit a meter reading, they had to navigate to the external marketing site and fill in an intuitive form

I encouraged AfB that facilitating the meter reads form on a single platform would centralise the experience for the user, and avoid them having to navigate elsewhere to carry out a key task. We included a link to the form on the meter reads page, and created a smart form that removed 75% of fields and unburdened the user.

🚫 Phase 1, the unintuitive form from the external marketing site
✅ Phase 2, the form we integrated into the platform recognises the logged in user, their meter and only asks for essential information

Customers would call the support centre and ask for their meter readings to be sent to them for business purposes

To alleviate this problem, I introduced a “Download .CSV” button for all tables on the platform that would allow customers to self-serve and save AfB staff from manually exporting data and send an email to the customer.

Validating designs

Comparing the data within a 6 month period since launch, versus the same period the year before I’m pleased to say we’ve seen some great results:

🧑 5.5x more visitors to My Meter readings since launch

📞 Less phone calls to support staff

📈 50% increase in meter reading submissions

View another case study:

BiP Solutions Auditorium Theatre