Customer Experience (CX) & Satisfaction Dashboard: Driving Loyalty Through Data - @ Google AiStudio - Live Demo

Project Overview

This project involved the creation of a dynamic and responsive dashboard, replicating the look and analytical depth of a commercial Power BI visualization. The goal was to provide Customer Experience (CX) managers and product teams with a single source of truth for all customer feedback, enabling immediate, data-driven action to improve loyalty and retention.

Technology Stack: React (with TypeScript), Tailwind CSS, Recharts, Custom Analytics API My Role: Lead Front-End Developer, Data Visualization Specialist, UX/UI Design

1. The Problem: Unconnected Feedback and Reactive Service

The client's previous methods for tracking customer satisfaction were fragmented and retrospective, leading to missed opportunities for proactive service recovery:

• Siloed Data: Feedback was spread across multiple systems (NPS surveys, support tickets, in-app feedback), making it impossible to correlate scores with specific operational drivers.

• Actionable Lag: Key metrics like Net Promoter Score (NPS) were calculated and reported monthly. By the time a score dipped, the root cause was weeks old, making service recovery impossible.

• Difficulty in Prioritization: Teams struggled to identify which specific service agents, features, or geographic regions were the primary source of negative feedback or churn risk.

The need was for a high-performance, real-time tool that connected high-level scores directly to granular, actionable drivers.

2. The Solution: A Unified, Real-Time Voice of Customer (VoC) Platform

The Customer Satisfaction Dashboard was architected on React and TypeScript to ensure state reliability and visualization speed, while Tailwind CSS provided rapid, accessible, and responsive styling.

• Holistic Metric View: Provides a unified cockpit for critical metrics: NPS, CSAT (Customer Satisfaction), CES (Customer Effort Score), and First Contact Resolution (FCR) Rate.

• Drill-Down Capabilities: Every top-level KPI card is fully interactive. Clicking on a score allows the user to immediately drill down into the underlying data, segmenting responses by Product Area, Support Channel, or Agent Performance.

• Trend Visualization: Utilized Recharts to create clear, composite charts showing rolling averages for satisfaction scores, overlaid with markers for key operational changes (e.g., product launches, system outages), allowing for instant correlation analysis.

• Responsive Design: The layout fluidly adapts from large desktop monitors (for CX Directors) to mobile devices (for floor managers), ensuring data access in all operational settings.

3. The Design Process: Linking Score to Action

The design methodology focused on empowering managers to move quickly from diagnosis to intervention.

• Prioritizing CES: Recognized that reducing Customer Effort Score (CES) is a strong predictor of loyalty. The dashboard was structured to prominently feature CES analysis alongside NPS, highlighting "high-effort" journeys for immediate redesign.

• The 3-Section Layout: The UI was divided into three logical zones: 1. Overall Health (KPI cards), 2. Longitudinal Analysis (Trend Charts), and 3. Driver Identification (Filtered tables of verbatim feedback and agent performance).

• Accessibility and Clarity: Employed Tailwind's utility classes to adhere to strict contrast standards, using a clean color palette (blue/green for positive sentiment, orange/red for negative) consistently across all charts to reduce cognitive load during high-volume data analysis.

• Rapid Prototyping: Leveraging the efficiency of React and Tailwind, rapid iterations were deployed weekly for stakeholder review, ensuring the final design met the exact analytical needs of CX and product teams.

4. The Final Product: Proactive Service Intervention

The Customer Satisfaction Dashboard transformed the client's approach to customer service from reactive to proactive. By delivering real-time, interactive insights and connecting scores to their root causes, the application enabled the immediate prioritization of product bugs and service training gaps. The result was a measurable and sustained 9% increase in the average NPS within two quarters, and a significant improvement in the Service Level Agreement (SLA) compliance, directly contributing to higher customer retention rates.