RouteOne Design System
RouteOne LLC
Overview
RouteOne is a digital platform that connects automotive dealers, lenders, and consumers through tools for credit applications, financing, and vehicle purchasing. As RouteOne expanded its consumer-facing experiences, the team needed a scalable, consistent design system to support rapid product development while maintaining a cohesive brand experience.
I led the design of a consumer-focused design system built on Material Design 2, establishing reusable components, design foundations, and documentation that enabled teams to design and ship faster across multiple digital retail experiences.
Problem
RouteOne’s consumer experiences were evolving rapidly as the company invested in digital retail tools. However, the design foundation was fragmented.
Key challenges included:
Inconsistent UI patterns across consumer workflows
Limited component reuse between teams
Slower product development due to design duplication
Accessibility inconsistencies
Difficulty scaling design across new consumer products
Without a unified system, designers and engineers were rebuilding common UI elements repeatedly.
Goal
Create a consumer-facing design system that would:
Standardize UI patterns across RouteOne’s digital retail ecosystem
Improve design and engineering efficiency
Ensure ADA-compliant and accessible experiences
Provide reusable components and tokens
Support scalability as consumer features expanded
My Role
UI/UX Designer
Responsibilities included:
Designing foundational UI patterns
Creating reusable components in Figma
Aligning the system with Material Design 2
Partnering with developers to ensure implementation accuracy
Documenting usage guidelines and component behavior
Design Framework: Material Design 2
The system was built using Material Design 2 principles, which emphasize consistent components, strong visual hierarchy, and adaptable theming. Material Design provides a set of guidelines, components, and tools that help teams create intuitive and consistent user interfaces across products.
Material Design 2 introduced greater flexibility for branding, with customization of color, typography, and shape while maintaining component consistency.
This allowed us to combine:
Material foundations
RouteOne branding
Automotive retail UX needs
Color System
A structured palette ensured consistency across consumer interfaces.
It defined:
Primary brand colors
Neutral surfaces
Semantic states (success, warning, error)
Accessibility-compliant contrast
The color tokens enabled both designers and engineers to maintain consistency across components and pages.
Typography
Typography established hierarchy across:
Headlines
Body text
Form labels
Helper text
Error messaging
We used scalable type styles aligned with Material guidelines to ensure readability across devices.
Layout & Grid
Layouts were based on responsive grid principles.
This allowed the system to support:
Desktop dealership workflows
Tablet experiences
Consumer mobile flows
Spacing tokens ensured predictable rhythm and alignment across screens.
Inputs & Forms
Consumer flows rely heavily on form input.
Key components included:
Text fields
Dropdowns
Checkboxes
Radio buttons
Error states
Helper text
These components standardized validation patterns and error messaging.
Actions
Primary and secondary buttons provided clear hierarchy.
Button variants included:
Primary
Secondary
Tertiary
Disabled states
Loading states
Documentation
The design system included usage guidance to ensure consistency.
Documentation covered:
Component anatomy
Interaction states
When to use each component
Accessibility considerations
Responsive behavior
This helped both designers and developers implement patterns correctly.
