Automotive Procurement KPI Dashboard: Price Variance Management - @ Google AiStudio

Project Overview

The Automotive Procurement KPI Dashboard is a specialized, data-driven application designed to help automotive manufacturers visualize, track, and optimize critical purchasing performance. It serves as the primary tool for procurement teams to gain immediate visibility into vendor pricing, global commodity trends, and the root causes of material cost fluctuations. The platform integrates AI insights to flag anomalies, transforming procurement from a reactive reporting function into a proactive, strategic cost-saving center.

Technology Stack: React (TypeScript), Tailwind CSS, High-Performance Data Visualization Libraries, Predictive AI/ML Modeling for Anomaly Detection. 

My Role: Product Owner, UX Designer, Data Visualization Specialist.

1. The Problem: Hidden Price Leakage and Volatility

Automotive procurement teams face immense pressure from volatile global commodity markets and lengthy, complex vendor relationships. The key operational challenges were:

• Lagging Insight: Traditional quarterly or monthly reports were too slow to address rapid price changes in materials like steel, plastic resins, or semiconductors, leading to significant unmanaged price variance leakage.

• Blind Negotiation: Buyers lacked instant, consolidated data (contractual price vs. market index vs. invoiced price) at the point of negotiation, limiting their leverage and costing millions in unnecessary spend.

• Data Fragmentation: Procurement data was siloed across ERP systems, contract databases, and market intelligence reports, making it impossible to perform a holistic "Should-Cost" analysis.

The goal was to provide a real-time, unified intelligence layer that highlighted where cost variances were occurring and why.

2. The Solution: Real-Time Variance Control with AI Flagging

The dashboard provides a singular, authoritative source for all purchasing metrics, driving immediate action through predictive intelligence.

• Unified Price Variance View: A core component shows the Price Performance Index (PPI) across all major component categories, instantly flagging vendors or parts where the invoiced price deviates negatively from the contractual or benchmarked "should-cost" price.

• AI Anomaly Detection: The embedded AI continuously monitors material cost trends and historical purchase orders. It proactively highlights subtle pricing anomalies (e.g., a 2% price increase on a non-commodity item from a single vendor) that human operators would typically miss, enabling preventative negotiation.

• Dynamic Trend Forecasting: Visualizations track the correlation between global commodity indices (e.g., LME Aluminum) and actual component purchase prices, giving buyers a predictive tool to time their purchasing strategies.

• Drill-Down Efficiency: Built with React and TypeScript, the application guarantees fast loading and stable data drill-downs from the highest level KPI (Total Spend) down to a specific Purchase Order line item.

3. The Design Process: Maximizing Actionable KPIs

The design process centered on ensuring maximum data density and minimal cognitive load for the high-pressure procurement user.

• UX Research – Buyer Workflow Mapping: Mapped the key decision points in a buyer's month (quarterly review, negotiation prep, daily variance checking). This confirmed the need for the Variance Delta Chart as the primary navigational element.

• Tailwind CSS for Speed and Density: Utilized Tailwind CSS to create a dense, yet legible, dashboard that is responsive enough for both large command center screens and a buyer’s laptop during a negotiation meeting. Color-coding (Red/Green/Yellow) was used aggressively to ensure glanceability.

• Information Hierarchy: The dashboard follows a strict top-down hierarchy: Total Spend & PPI (Executive Summary) → Category Variance (Manager View) → Vendor/Part Anomaly (Buyer Action View).

• AI Explainability: A key design challenge was making the AI’s flags trustworthy. Each AI-generated anomaly comes with a simple, human-readable explanation (e.g., "Price exceeds 3-month rolling average by 4.5%").

4. The Final Product: Strategic Cost Optimization

The Automotive Procurement KPI Dashboard successfully shifted client procurement teams from manual reconciliation to strategic, data-led intervention.

• $7.5M+ in Identified Annualized Savings: Within the first year of deployment, the real-time variance detection and AI flagging led to the identification and capture of multi-million dollar price leakage opportunities.

• 25% Faster Negotiation Cycles: Buyers reported significantly reduced time spent preparing for negotiations due to instant access to unified market and historical data.

• Reduction in Unjustified Price Increases: Proactive monitoring and standardized KPIs resulted in a 12% decrease in year-over-year unjustified price increase across key component categories.