Gator Design System

Case Studies / Gator Design System

Gator Design System For Staffing Workflows

Read time: 3 - 5 minutes

➤ View Full Case Study (12 - 14 minutes)

Madison Resources’ in‑house CRM, Navigator, had grown across multiple frameworks with no shared design logic. UI drift, inconsistent components, and ad‑hoc styling slowed delivery and increased cognitive load for staffing coordinators. I partnered with Product, UX, and Engineering to create Gator an atomic design system that unified patterns, reduced technical debt, and established a scalable foundation for CRM, Payroll, and Onboarding teams.

Client

Madison Resources

General Star

Madison Resources

Role

Senior UX Designer

Timeline

6 months

Team

UX, Product, Engineering

Tools Used

Figma, Jira, Confluence

Deliverables

Atomic component library, Figma variants and usage rules, multi‑framework implementation guidance, CRM audit and drift remediation logic, scalable UI templates for CRM/Payroll/Onboarding

Results

• 40% faster UI delivery across CRM modules

• Reduced styling debt and cognitive load

• Unified design logic adopted across three product teams

• Increased engineering trust and consistency

• 30% faster underwriting decisions

• Reduced cognitive load and manual lookups

• Design system adopted across GENESIS G2 platform

30% faster underwriting decisions
Reduced cognitive load and manual lookups
Design system adopted across GENESIS G2 platform

The Challenge

Madison’s CRM had grown across multiple frameworks with no shared design logic. UI drift, inconsistent components, and ad-hoc styling slowed delivery and increased cognitive load for staffing coordinators. Engineering trust was low, and scaling design across Payroll and Onboarding teams felt brittle and reactive.

MY ROLE

Senior UX Designer

As the Senior UX Designer, I led the end‑to‑end creation of the Gator Design System, partnering closely with Product and Engineering to untangle UI drift, define atomic components, and establish a unified visual language across CRM, Payroll, and Onboarding tools. I drove audits, component architecture, accessibility alignment, and multi‑framework implementation guidance, ensuring the system was both scalable for teams and trustworthy for developers.

I led the strategic redesign of General Star’s underwriting dashboard, architecting a unified workflow that replaced fragmented tools and manual triage. I partnered with underwriting leadership, product, and engineering to define risk logic, streamline decision paths, and deliver a scalable, Material-aligned UI system adopted across the GENESIS G2 platform.

THE APPROACH

Process

Led the creation of Madison’s atomic design system, Gator, in partnership with product and engineering. Audited UI drift, defined scalable components, and unified design logic across CRM, Payroll, and Onboarding workflows. The system reduced styling debt, increased engineering trust, and enabled consistent delivery across multiple frameworks.

Faster UI delivery with reusable, governed components
Scalable design logic adopted across three product teams
Less cognitive load from consistent patterns and reduced visual noise

STEP 1

UI Audit & Stakeholder Alignment

Reviewed CRM screens, legacy modules, and engineering workflows to identify drift, inconsistencies, and delivery bottlenecks across teams.

Comparative System Benchmarking

Evaluated Material, Salesforce Lightning, and internal tools to benchmark component structure, accessibility, density, and multi-framework compatibility.

STEP 2

STEP 3

Atomic Architecture Definition

Established the atomic hierarchy, naming conventions, token structure, and governance rules that would anchor the system long-term.

Component Design & Figma Variants

Designed core components with states, variants, constraints, and usage rules ensuring clarity for both designers and developers.

STEP 4

STEP 5

Theme & Token Development

Created a tokenized theme aligned to Material and WCAG, enabling consistent styling across CRM, Payroll, and Onboarding tools.

Multi‑Framework Implementation Guidance

Delivered specs and engineering-ready documentation to support React, Angular, and legacy modules running in parallel.

STEP 6

STEP 7

Governance, Rollout & Adoption Support

Partnered with engineering to integrate components into active sprints, establish contribution rules, and ensure long-term adoption.

Results & Outcomes

Metrics

40% faster UI delivery across CRM modules
60% reduction in styling inconsistencies and ad‑hoc overrides
Component adoption across CRM, Payroll, and Onboarding teams
Increased engineering trust through predictable, governed patterns
Lower cognitive load for coordinators through consistent layouts and behaviors

Conclusion

Gator established a unified, atomic design foundation that replaced years of UI drift with a scalable, governed system. By aligning product, UX, and engineering around shared components and tokens, the platform now ships features faster, with less friction, and with a level of consistency that supports long‑term growth across the Madison ecosystem.

DELIVERABLES

Project Gallery

Components

Token Settings

Page Components

Page Templates

Color System

Other Projects

Flame

Sensor

Underwriting

Experience

Financial

Workspace