Transforming customer relationship management
Overview
Anglian Water needed a modernised internal customer relationship management (CRM) system to monitor customer payments, streamline workflows, and improve data accuracy.
As the lead UX designer, I directed the design and prototyping process. This aimed to create a more intuitive and scalable solution for the internal teams.
Key Facts
- Project duration: 1 month
- Team size: 3 members (2x UX Designers, 1x User Researcher)
- My role: Lead UX Designer
Challenges
- Understanding the workflows of a complex legacy system
- Migrating a CRM to a Experian's new design system using Figma
- Pressure to deliver quickly for the client
Approach
- Iterative user-centred design
- Engage developers early and often
- Collaborative working in Figma
Problem
The legacy CRM was frustrating and slow. Its outdated interface led to frequent errors and made tasks take longer. This also hurt agent productivity.
User pain points
- The interface was outdated and inconsistent, increasing cognitive load
- Hard to complete routine processes quickly, affecting productivity
- Difficult to track customer interactions due to tricky navigation
Business challenges
- Data input errors cause downstream issues
- High training costs
Opportunities
- Redesign core workflows and improve cross-team collaboration
- Implement a unified design system
- Enhance data visualisation
Persona
Meet Sarah, a customer service agent at Anglian Water. She handles 40+ customer inquiries daily using their legacy CRM system. She needs to quickly access and update customer information while maintaining high service quality standards.
Customer Contact
Sarah receives a customer call about their billing inquiry and needs to access their account.
Information Lookup
Navigates through multiple screens to find the customer's account details and payment history.
Process Request
Updates account information or processes payment arrangements while dealing with system lag.
Resolution
Finishes the transaction and records the interaction, often using several systems to complete it.
"Let me try to find your account..."
"The system is running slow today."
"I'll need to open another application for this."
"Thanks for your patience with our system."
Process
We used Figma as our primary design tool, and MS Teams for conducting remote user interviews. Our user-centred design process was as follows:
User research
- Conducted interviews and observations with CRM agents to understand pain points and inefficiencies.
Prototyping
- Developed low-fidelity wireframes and iterated based on feedback before moving to high-fidelity designs.
User testing
- Conducted usability testing with agents to refine interactions, ensuring accessibility and ease of use.
Presenting
- Presented the design to client leadership and developers for feedback. Made minor changes.
Handoff
- Worked with developers to enhance the design based on technical feasibility, then handed it over to them.
We began by reviewing the existing interface to identify user pain points, inconsistent patterns, and accessibility gaps. This baseline informed our design priorities for improving clarity, consistency, and usability.
These early redesigns focused on improving information hierarchy, simplifying interactions, and creating a more cohesive visual style. We tested these with stakeholders to validate alignment with user needs.
Following initial reviews, we iterated on layout, component behaviour, and content structure. This cycle of testing and refinement ensured the designs were both visually coherent and functionally efficient.
Solution
We teamed up with developers from Experian before the build phase. This helped us make sure the designs could be developed. We then finalised the high-fidelity prototype.
Our design reimagined workflows, improved information architecture, and enhanced the usability of the CRM for agents.
Key features include:
- Streamlined navigation with fewer clicks to complete common tasks
- Improved data visualisation for better decision-making
- Consistent UI components following Experian's design system
- Responsive design for use across different devices
Results
We gained leadership approval and made the developer handover easy. This ensured a smooth shift from prototype to implementation.
Moving to a design system ensured component scalability and visual consistency. The new interface aims to cut cognitive load and lower errors, which boosts task efficiency.
You delivered on the brief, and my team and I are really impressed with the prototypes, along with your considerations for the build now and in the future.
Conclusion
We focused on efficiency, cognitive load, and easier navigation. This helped us create a system that better suits Anglian Water's needs.
Co-design is key
Collaborative design involving end-users throughout the process leads to more effective solutions. Working with developers early in the process ensures technical feasibility.
Design systems prove their return on investment
Leveraging existing design systems accelerates development and ensures consistency. In this case, using Experian's design system helped us focus more on addressing user pain points and goals, without having to worry about design inconsistencies.
Figma was excellent for collaboration
Figma's real-time collaboration, automatic design history, and robust version control streamlined team alignment throughout the project. Its intuitive commenting feature facilitated clear, contextual feedback. This helped us get the job done.