KPI Sight Design System
2 MINUTE READ
KPI Sight is a B2B SaaS analytics platform servicing over 50 car dealerships. The company delivers real-time dashboards encompassing technician hours, daily targets, and more.
This case study covers design system work in Figma. Broader product and strategic work can be found in other case studies throughout the portfolio.
TEAM
Responsibilities
Design Systems
Industries
Automotive
Analytics
B2B SaaS
Year
2026
CONTEXT
KPI Sight was in the process of a total revamp with an interface made by a talented previous designer. While the designs looked sharp and polished, they lacked a formalized design system. Components and variables were not used, styles were manually recreated across screens, and some frames did not leverage auto-layout.
The project was initiated by the CTO, who was copy-pasting raw values from Figma. The objective was to design a uniform system that would accelerate all future product work.
COLOURS & APPROACH
The CTO wanted to preserve the existing design, but the colour palette relied heavily on transparency. The use of transparency caused unintended results when elements were layered, creating subtle shifts in hue and contrast. I translated recurring UI patterns into components, introduced primarily solid colours, and created variables for spacing, radius, typography, and colour.
TABLES
Data tables were the most complex component to build. The table architecture was built using nested components: table, column, header, and cell. Designers and engineers could easily modify row counts, column configurations, and content.
OUTCOME
KPI Sight retained its polished aesthetic while gaining the structural integrity required for long-term growth. Design iteration became faster and developer handoff became clearer, meeting the CTO’s objectives. Below is a dashboard template demonstrating how the design system supports layout consistency, visual hierarchy, and component reuse.
