Optimising agent tooling
Project overview
Zoa took the technology that made Bulb the UK's most beloved energy supplier and made it available as a white-label solution. The existing agent tool, Redwood, was built only for Bulb, so I designed Bloom as a scalable replacement.
Role
I was the sole designer for Zoa's three internal tools teams: agent tooling, AI communication, and comms campaign management. I created a consistent design language across all three products and designed the first version of each. This case study focuses on agent tooling.
Brief
Design a white-label agent tool from scratch that could adapt to any energy company's processes and branding. The new tool needed to be modular and flexible so different companies could customise it for their specific workflows while maintaining the core functionality that made agents love Redwood.
My approach
I designed Bloom as a web-only tool since agents only use desktops when handling customer calls. To shape the design, I reviewed lessons from Redwood, ran card sorting to understand information hierarchy, and tested two different layouts. The first version of Bloom focused on getting the foundation right - page layout and content structure that could scale for any energy company.
Reviewing the existing tool
Redwood had grown organically over time. Features were added quickly to meet business needs, but the design failed to keep up, resulting in a clunky and cumbersome user experience that was difficult to scale. Since it was built specifically for Bulb's workflows, it couldn't work for other energy suppliers. We decided to build Bloom from scratch, learning from what worked well in Redwood.
The four-column design does not behave the way initially expected. Instead of only the column that the user is hovering over scrolling, the entire page scrolls. Leading to confusion and large areas being underutilised.
The information is not clearly grouped and lacks a clear hierarchy. As a result, all the information competes for the user's attention, making it overwhelming and difficult to navigate.
Bringing the team on the journey
This team had worked on Redwood for years, there was a lot of product knowledge in the team so their input was vital.
Design principles workshop
Before starting, I ran a design principles workshop to establish our teams values and set guardrails around our decision making process. I found this to be a great way to encourage the team to think in a more user-centric way than what they were used to.
Accessibility over aesthetics
We'll choose accessible design over pretty design every time.
Efficiency over discoverability
Agents use this tool all day, every day. Design for power users, not first-time users.
Build to scale
Every component and layout needs to work for multiple companies with different processes, not just Bulb.
Clear and consistent
Users should never wonder what something does or why it's there.
Sketch session
The team thoroughly enjoyed the sketch session with one developer saying it was the most enjoyable meeting they have ever attended!
User testing
This was Zoa's first research project so we didn't have the recruitment processes that we had at Bulb. With no processes set up and no relationships with agents from other energy companies I tested with 5 former Bulb agents who now worked at Zoa.
This of course created bias toward Bulb's practices, which is a huge limitation for designing a white-label product, but it was our only option at the time.
We planned to test with agents from different companies as soon as we could set up those relationships.
Card sorting exercise
We asked participants to group related information and rank each group in order of importance.
This similarity matrix from Optimal Workshop shows where we saw perfect consensus (dark blue areas) (100%) on basic customer info (name, address, email, etc.). And more varied grouping patterns (light or white areas) around energy service information, suggesting agents think about this information differently.
These patterns reveal users' mental models for organising customer information.
Three clear groups emerged:
1. Customer information e.g. personal details 2.Payment information e.g. payment amount, tarrif amount 3. Reading information e.g. meter type and details and meter readings
Comparative usability testing
The card sorting groups formed the foundations of Bloom's page hierarchy.
I ran comparative usability testing with two distinct prototypes - spacious v compact.
Research goal: Understand if agents had a strong preference for either approach or something in between.
Prototype 1: Spacious
One column structure
Clear section headings
Sections ranked reflecting the hierarchy of the card sorting findings
Consistent action drop-downs
Information within the same section is presented side by side
Prototype 2: Compact
Three column structure
Focus is on displaying as much information as possible
All actions are exposed to users
Information in the same section is stacked on top of one another
Findings
The testing revealed how agents actually work while on calls with customers. Neither layout was perfect - agents wanted access to lots of information but not to feel overwhelmed.
Main takeaways:
Agents want everything upfront
They need to stay one step ahead of customers by anticipating their needs based on the available information. So, show all relevant information immediately without creating visual chaos.
Side-by-side information is crucial
Agents constantly cross-check details. Gas and electricity meter readings next to each other was particularly important.
Context matters for actions
We tested two ways of presenting CTAs: in context and under a consistent action dropdown. If a button relates to a specific section, put it there. If not, group it with other general actions in a dropdown.
Different actions need different patterns
Design patterns should align with the user's mental model, not follow a standard template. Adding meter readings worked better inline since agents think of them as part of the data, while adding notes worked better in a modal since they're separate commentary.
How we implemented the findings
Based on the testing, I designed Bloom with a three-column layout. Each column scrolls independently, so agents can see lots of information without feeling overwhelmed and choose what to focus on. I put related information side by side for easy cross-checking and kept entry points to journeys relevant and clear.
Reflection
This project taught me how crucial it is to get everyone aligned from the start. The team had different ideas about goals and timelines, which created pressure to deliver designs quickly.
The workshops I ran early on were game-changers - they got everyone engaged and on the same page about what we were building. By the end, the whole team understood the design process better and I felt like we were genuinely collaborating rather than just me handing things over.