Car IQ - Design System

Constructing a scalable fleet payment design system


Car IQ


Design system


6 months


2 UX designers,
1 product manager

My role

Design system, illustrations, visual design

Grid of Car IQ style guides.



Car IQ is a payment solution for vehicles and fleets created to enable vehicles to transact securely. For this project, they wanted to redesign the look and feel of their mobile products. My initial thought was that just because users are using the product for unglamorous things like managing payments and car services, doesn’t mean the product needs to be cut-and-dry.

The existing Car IQ products and design system also lacked brand recognition and consistency. Internally, there wasn’t clear alignment across departments, delaying feature updates and hindering effective teamwork. As the company evolved, it needed a design system that would scale alongside its growing product and brand.

With other designers on the team, I spruced up the Car IQ brand and helped to create an efficient design system for collaboration and product scaling.


Components library icon, abstract shapes and lines
Style and component library

Create a “here’s-where-everything-is” for all of Car IQ’s mobile and desktop products.

Brand recognition icon, lightbulb and book
Brand recognition

Align Car IQ’s marketing + brand visuals with those of their products.

Handoff icon, staggered checkboxes
Development handoff process

Establish a proper designer to developer handoff process.

Venn diagram of the intersection between product design and branding.

The Shiny New System

Typeface and colors

Since Car IQ works primarily with other businesses, I aimed to give the brand a professional but also modern feel. The result? A refreshing update with a straightforward typeface and a vibrant, accessible color palette.

Car IQ color, type, and logo

Car IQ logo, color palette, and type.

Even though tasks like making payments for fuel and parking can be rather banal, I developed clean and crisp illustrations to bring much needed vitality to the brand.

Four illustrations of unavailable services including fueling, parking, maintenance, and tolling.

Unavailable service illustrations

Four illustrations of Car IQ services including fueling, tolls, maintenance, and parking.

Service illustrations

Four illustrations of error illustrations including error, no fueling stations, deactivated account, and unavailable fuel pump.

Error illustrations

Mobile mockup of fueling instructions and illustrations.

How to fuel screen

Mobile mockup of no purchases found screen.

No purchase found screen

Mobile mockup of Car IQ setup screen.

Setup screen

Patterns, everywhere

We set a systematic pattern across all the components and screens so all the visuals are consistent across their products.

UI patterns for three different Car IQ mobile screens.

Patterns for Car IQ

UI component for purchased parking service.

Parking card

UI pattern for purchased parking services.

Dashboard pattern

Mobile UI for Car IQ dashboard that highlights purchased parking services.

Dashboard screen

One united brand

Altogether, the updated visual style paired beautifully with Car IQ’s marketing and brand.

Landing page for Car IQ marketing website.

Car IQ website landing

Mobile screen for navigating to fuel stations.

Find fuel screen

Mobile screen of scheduling a parking reservation with Car IQ.

Book parking screen

Ensuring Collaboration, All Around


With designs changing at such a rapid pace in a startup environment, the team wanted a way to reference past designs, especially those earmarked for future features that wouldn’t be part of an MVP.

Screenshot of an array of archived Car IQ designs.

Car IQ archive


The product team often collaborated with Car IQ leadership and clients to pitch new features and show updates. These weren’t necessarily developed features but proof of concepts to advocate for product buy-ins.

Car IQ developer Figma handoff structure that shows developer-ready designs based on epics and tickets.

Development handoff organization

A new development handoff

A pressing issue at Car IQ was that product, design, and engineering teams had varying project timelines and team members were spread out across time zones, often with huge time differences. Updates to designs were getting lost in online communication.

The design system I put together made it apparent what designs were works in progress, currently implemented, in development, or reserved for a future development cycle, so developers knew which designs were ready to be built or still being worked on.



Visual components and patterns

Instituting a robust system across the board made designing and developing much more efficient.


Custom illustrations

Illustrations brought personality to Car IQ products, improving overall brand recognition.

Team icon, three people sitting around a table
Better team collaboration

A one-stop shop for Car IQ products allowed product managers, engineers, marketing, and other stakeholders to keep track of ongoing projects, reducing communication friction among the teams.