Barclays’ customer service and HR teams are world-class at executing policy, but frontline data revealed a critical friction point: emotional intelligence during conflict. Internal audits showed that in high-stress moments, such as payment delays or sensitive HR disputes. Representatives often defaulted to robotic, defensive language. This "Policy-First" approach caused a ripple effect: higher escalation rates, employee burnout, and declining customer loyalty.

As the Design Lead, I spearheaded the product vision, ensuring the platform was not just a tool, but a cultural shift. To support a scalable rollout across Barclays' vast infrastructure, I architected a comprehensive custom Design System.

The "Calm-State" Palette: Recruiters look for color theory. I deliberately avoided high-contrast "alert" colours (like harsh reds/oranges). Instead, I utilized a palette of soft "Barclays Blue," sage greens, and muted teals to lower cortisol levels, creating a psychological "safe space" for learning.

Component-Based Scalability: I built a modular library of UI components ranging from interactive "scenario cards" to real-time "tone-checkers," allowing us to deploy new curriculum modules in days.

Geographic Alignment: My design system ensured that regardless of whether a user was in London, Sunderland, or Liverpool, the interface felt familiar and supportive. This consistency was vital in maintaining a "Unified Brand Voice" during the regional rollout.

Gamified Progress: I introduced "Empathy Streaks" and "Escalations Avoided" counters. This shifted the internal "success" metric from speed to quality.

Phrase of the Day: I designed a "sticky" UI element that provides one actionable sentence an agent can use immediately. This ensures the value is felt within the first 60 seconds of logging in.

I designed the Lessons and Practice tabs to function as a low-stakes environment for high-stakes conversations.

Scenario Branching: In the Practice tab, I designed a layout that presents three distinct tonal paths. This forces "Active Choice" learning.

Explanatory Feedback: Instead of a generic "Correct/Incorrect," the UI reveals the underlying logic (e.g., "This avoids defensiveness by validating the emotion before the policy"). This builds deep-seated communication habits rather than rote memorization.

This module mimics the agents' actual workspace to ensure high contextual relevance (Transfer of Learning).

Empathy Assist Sidebar: I designed a real-time analysis pane that parses text to identify "Emotional Cues." I engineered this to act as a cognitive safety net, helping agents who are under "Time Pressure" to recognize subtle customer cues like "feeling ignored" or "anxiety about the future."

Leading a rollout across London, Sunderland, and Liverpool required a deep understanding of different user archetypes:

London (Corporate & HR): I adapted the UI to handle complex, long-form HR scenarios and sensitive corporate advisory cases where the tone needs to be professional yet deeply personal.

Sunderland & Liverpool (Retail & Frontline): These hubs handle high-volume, high-stress retail banking. I optimized these UI patterns for speed and "Micro-Learning" moments that fit into a busy 15-minute break.

Unified Results: By centralizing the design system while allowing for regional content nuances, we ensured that a customer in any part of the UK received the same "Barclays standard" of empathy.

17% Increase in CSAT: Post-interaction satisfaction scores jumped from 72% to 89% in the pilot hubs.

60% Reduction in Escalations: By empowering agents to de-escalate through design-guided empathy, the need for manager intervention plummeted.

3x Higher Customer Retention: Our data proved that customers who had an "empathetic" interaction, even if their problem wasn't immediately solved, were 300% more likely to remain with the bank.

85% Voluntary Participation: By designing for "Micro-Learning" (under 5 mins), we turned a mandatory chore into a desirable daily habit, vastly outperforming traditional 4-hour workshops.