DARREN GAINZA
  • UX UI
  • Paintings
  • About me
  • RESUME

SAGE is an agent coaching tool

Capital One recognized the need for exceptional internal experiences and dedicated resources to develop a suite of internal platforms. Among these, SAGE emerged as one of the most significant undertakings by the internal team. SAGE is a powerful tool meticulously crafted to enhance several aspects of our agent operations, including error resolution, agent coaching, secure data sharing with quality management operations, and efficient review of customer calls. By consolidating four outdated platforms into one cohesive solution, SAGE streamlines our processes and elevates our overall efficiency.

​​Problem

Agent managers require a streamlined solution to assess agent calls, monitor team progress, and effectively document coaching efforts. Simultaneously, agents seek an intuitive system to track their progress and access coaching notes from their managers. Additionally, quality management operations needs a seamless way to review resolved flagged incidents.

The existing workflow required managers to navigate through four separate platforms to accomplish their daily tasks. This fragmented approach not only proved tedious but also introduced the potential for errors. By consolidating all necessary functionalities into a single platform, we can alleviate the challenges faced by agents and managers while reducing the maintenance burden on our technical teams, who will no longer be required to support multiple platforms.

To address these pain points comprehensively, my objective was to gain a thorough understanding of the users' current workflow challenges and design an integrated platform that fulfills the requirements of all three stakeholders in a unified manner. 

My role

As the design lead, I undertook an in-depth examination of the current system and collaborated with our project manager to identify key stakeholders. Conducting tests with agent managers, agents, and quality management personnel, I gained a deep understanding of their workflows, fostering empathy and gaining valuable perspectives.

With the assistance of my engineering team and the input from interview participants, I created wireframe concepts, iteratively refining them based on feedback. I facilitated stakeholder involvement throughout the design process, validating assumptions and ensuring their continuous engagement.

​Finally, I prepared a comprehensive file for the developer handoff, providing necessary design information and offering ongoing support during the development phase.

​Skills

  • UX UI Design
  • ​Design strategy 
  • UX Research 
  • Prototyping 

Solution

I developed a comprehensive solution to address the project's challenges by designing key pages for the new agent management platform, SAGE. One of the crucial improvements I introduced was a dynamic home page that replaced the previous use of Google Sheets. This new page provided a clear view of teams' progress throughout the current quarter and included a task list tagged as "Needs immediate action," eliminating the need for an outdated third-party tool.

To enhance the call review process, I designed a dedicated review call page that enabled managers to listen to customer-agent interactions. Recognizing the difficulty managers faced in distinguishing between the two parties in audio clips, I implemented a split audio layout, clearly indicating the speaker's identity. Additionally, I integrated transcript functionality to enhance the review experience. Another pain point I addressed was the challenge of locating transferred calls. To provide essential context, I incorporated the ability to easily navigate through related calls within a call transfer chain.

These two main pages were tailored to specific user categories, with agent managers benefiting from additional features on the home and call review pages to accommodate their workflow requirements. Recognizing the lack of user-friendly interfaces in most internal platforms, I advocated for the inclusion of a settings page. While considered a lower priority, I successfully incorporated a concise yet impactful set of capabilities. Users gained control over the platform's appearance, with options to select from five color themes that adhere to accessibility requirements, as well as the ability to adjust text size from default to large.

Over a span of 10 months, I collaborated with my team to design and develop the minimum viable product (MVP) for SAGE, our innovative agent management platform.
Picture

Impact

The project had a significant impact, as evidenced by the overwhelmingly positive feedback received during testing. Users reported experiencing a significantly improved workflow and expressed feeling valued and listened to. As a result of the project's success, two outdated legacy platforms and one third-party enterprise service were deprecated, streamlining operations and reducing reliance on multiple systems. The all agent survey, which anonymously assesses employee well-being and intentions, saw a remarkable 52% increase in the category of "I feel that I have been given the proper tools and services to complete my job," with an overall rating of 86%. It is worth noting that the platform serves over 20,000 users, further emphasizing its substantial impact.

This project held great significance for me because my mother works as a customer service agent. This personal connection deepened my empathy for the end users, fueling my commitment to deliver the highest quality solution.

User research

I conducted group interviews and one on one interviews. The group interviews were an efficient way of getting multiple opinions at once. My team and I would drive to call centers in Virginia and schedule 4 sessions with 10 users per session. I conducted one on one interviews to observe how tasks are completed so that I can document pain points and areas for possible improvement. 

Legacy systems

Picture
Picture
Picture

Concept

Wire frames of the main touch points of the experience.
Picture
Home page

- Task that need immediate action
- Entry point to search for calls
- Entry point to team overview
Picture
Team overview page

- List of direct reports and info
- View agents with flagged calls
- Delegate team for PTO
Picture
Settings page

- Alter the size of the applications text
- Switch between three theme options.

Exploration

I considered a second design option; however, I ultimately chose the blue header in the final designs due to its easier implementation, derived from an existing design system. In order to facilitate the development process and ensure ease for the developers, I made the decision to utilize the design components already available in the codebase. This approach helped streamline the development efforts while maintaining a cohesive design language throughout the platform.
Review an agents call
Picture
Coach an agents errors 
Picture
Search for a call
Picture
Home page
Picture

Designing the audio player

Most of this application was built with components from a local design system for internal tools. However, playing audio was unique to Capital One applications so I had the most control over the design. The player took several iterations to get to a design that satisfied the users needs and developer happiness. The most revolutionary aspect of this design that I am most proud of is the split audio waves. Now users can easily differentiate between the agent and the customer.  
Picture
Here's why I chose this design as the ultimate winner: The blue top maintains application-wide consistency. I raised the audio player height per user input. A white bottom enhances button contrast, aligning with lower containers, while a gradient adds a sleek touch.
Picture

Final MVP designs

Agents and agent managers are accustomed to using outdated software, so I aimed not only to enhance their productivity but also to evoke a genuine sense of empowerment and delight as they navigate their daily tasks. 

Home page

This section displays the Front Line Manager's home page, providing convenient access to search calls and view teams through quick links. User feedback underscored the need for an updated feed featuring urgent tasks that require timely completion. To enhance the user experience, a personalized greeting now welcomes the manager by name.
Picture

Agent overview

This section provides insights into an agent, aiding coaching, regulatory error review, and historical call analysis in agent management.
Picture

Advanced elastic search

No more Excel hunting. Users efficiently find calls with diverse data, saving time and enhancing the search experience. Streamlined and effective.
Picture

Review agents calls

Quality management operations can now seamlessly tag and flag agent calls. Managers can efficiently review tags, consolidating agent coaching and documentation in a single, user-friendly platform—eliminating the need for dual applications.
Picture
Picture

Team overview

View team information and delegate responsibilities when on PTO.
Picture
Picture

Customization

Elevating the standard internal tool, I prioritized enhancing user control. Post user interviews, I introduced adjustable font sizes (small, medium, large) and three vibrant themes for a personalized and delightful experience.
Picture
Picture
Picture

Developer hand off

Crafted a seamless design-to-dev transition guide. Included responsive examples across screens (800-1400px), linked styles to tokens for consistency, and prototyped new interactions. Illustrated comprehensive user paths with error states. Conducted weekly development meetings, providing onsite design aid for smooth progress.
Picture

Restraints

The project faced two key restraints. Firstly, a fixed delivery date necessitated meticulous planning and execution for timely completion. Efficient project management, task prioritization, and streamlined communication were crucial to meet the deadline.

Additionally, the project encountered challenges due to an existing design system that did not cater to the new platform's requirements. This challenge required implementing hard-coded new features that were eventually contributed to the design system. Thorough documentation was essential to ensure clarity and facilitate future maintenance and enhancements.

Despite these restraints, the team effectively managed them through strategic planning, design system adaptation, and comprehensive documentation, resulting in timely delivery and a cohesive user-centered platform experience.

Metrics 

20,000+ users
Reported increase in user satisfaction (research phase when testing)
Deprecated 2 legacy platforms and replaced a third party enterprise subscription
Less applications that need to me maintained by developers
Saved money on the third party subscription
Proudly powered by Weebly
  • UX UI
  • Paintings
  • About me
  • RESUME