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 brilliant but 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 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.
Additionally, the information is organised in columns, which makes it hard to scan and view relevant information side by side.
The four-column design does not behave the way you might initially expect. Instead of only the column that the user is hovering over scrolling, the entire page scrolls. This can lead to user confusion and large areas of the screen being underutilised.
Bringing the team on the journey
Before starting design work, I ran a design principles workshop and sketch session with the team. They'd worked on Redwood for years, so I wanted their input on what worked and what didn't. As the new person, I knew I needed to bring them into the process from the start.
I conducted a design principles workshop with the team. This helped us establish the values we consider important and set some guardrails around our decision-making process. These guardrails ensure that our design always aligns with our values.
This process also encouraged the team to think in a more user-centric way.
Final design principles
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.
The sketch session was successful and the team thoroughly enjoyed it. One developer even mentioned it was the most enjoyable meeting they have attended.
User testing
I ran card sorting and comparative usability testing to understand how agents organized information and which layout worked better.
Since this was one of Zoa's first research projects, we didn't have recruitment processes set up or relationships with agents from other energy companies. I tested with 5 former Bulb agents who now worked at Zoa. This obviously created bias toward Bulb's practices, which was a real 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
I ran a card sorting exercise using Optimal Workshop to understand how agents naturally organized all the information from Redwood. Users grouped related information and ranked each group by importance.
This is a section of a similarity matrix from Optimal workshop.
This section on the matrix shows a number of strong clusters which tells us that many people agreed about these cards belonging together.
Outcome
Three clear groups emerged, ranked by importance:
Customer information
Personal details
Account details
Account timeline
Account alerts
Account notes
Payment information
Payment amounts
Tariff amounts
Customer payment information
Statements
Reading information
Meter type and details
Meter readings
These groups formed the foundations of the page hierarchy, of which we tested different versions as part of the comparative usability testing.
Comparative usability testing
Bloom would eventually need all of Redwood's features, but the brief for version one was to let agents view customer account information. I started the design process from scratch, exploring different layout options. Getting the layout right was crucial - if it couldn't scale, the whole product would struggle later.
I ran comparative usability testing with two very different prototypes. One was spacious, the other compact and closer to Redwood. I wanted to see if agents had a strong preference for either approach or something in between.
These were wireframes rather than high-fidelity designs, but they were polished enough to get quality feedback quickly.
Spaced design:
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
Compact design:
Three column structure. Each column scrolls individually.
Focus is on showing users as much information as possible as soon as they open the account.
All actions are exposed to users
Information within 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.