Resources CSR Dashboard

Lead Designer

Client Project

Resources

High Fidelity Design

Problem

Customer service representatives (CSRs) were working with a clunky legacy system, struggling to efficiently navigate customer calls. I led the design of a modernized front-end that optimized legacy system functionality to help shorten call times and improve CSR ease of use.

Approach

We wanted to empower the CSRs to move through the system with ease, allowing them to help customers more efficiently and effectively. We wanted to prioritize visibility of account holder information, as well as make it easier to do things like take notes, log outage details, and identify recommended programs.


We began by holding working sessions with business stakeholders, to learn about business requirements, CSR pain points, and legal nuances. While these did help us get an overview of the landscape, we found that some stakeholders were more vocal than others, and we pivoted to using design thinking sessions to better engage the full group of attendees (usually around 30 people per session). We began to build wireframes for the core features over a digital whiteboard during our working sessions, and translated those inputs to wireframes in Sketch after meetings concluded. Once wireframes were approved, we made high fidelity mocks, and we did user testing with CSRs to refine what we built.

Wins

  • In usability tests, CSRs demonstrated that it was faster and easier to use our revitalized front-end platform than it had been to use the legacy system in its original state.

  • As a project design team:

    • We strengthened rapport with our larger cross-functional project team, and we were told by the MD on our project that we built a far more visually-appealing solution than had been initially sold to the client in the statement of work.

    • We built relationships with the client's design team, getting invites to design team events and meetings that helped provide further context.

    • We successfully negotiated resourcing support from the client's design team, gaining partial allocation of a client-side designer.

  • As a cross-functional team:

    • We increased the efficiency of our meetings by being agile, adjusting our format to increase engagement.

Lessons

  • I learned the importance of speaking up when a meeting format can be improved; I did speak up, and we did adjust the format, but we could have saved time and enhanced trust with the client by adjusting the format sooner.


Explore the prototype

Resize this browser to see other views.

This shows the CSR's view of their dashboard when they are listening to a customer call.

They can click the lower right notes CTA to transcribe details to send back to the customer's file, as well as seeing key information about the client in a consistent arrangement on the primary dashboard tab. When transcribing notes, a CSR can minimize the notes pop-up to return to, they can move it around the page to see hidden details, and / or they can clear an in progress note and start fresh.