Capital One
·
Auto Navigator
Auto Navigator Library
Auto Navigator Library
Auto Navigator Library
From scrappy side project to single source of truth.
From scrappy side project to single source of truth.
A robust design library that moved Auto Navigator from Photoshop to Sketch—centralizing UI components, patterns, and templates to improve consistency, speed up workflows, and unify design across web and mobile.
A robust design library that moved Auto Navigator from Photoshop to Sketch—centralizing UI components, patterns, and templates to improve consistency, speed up workflows, and unify design across web and mobile.
Role
Design Lead, Manager
Timeline
Dec 2016 – Dec 2020
4 years
Tools
Sketch
Adobe Illustrator
InVision
Google Workspace
GitHub
Confluence
Skills
Accessibility (WCAG)
Design Strategy
Design Systems
Governance
Iconography
Native Mobile
Responsive Web
Typography
UI Design
Version Control
Visual Design
Challenge
Not-so-smart-objects
When I joined Auto Navigator, our team was still using Photoshop—relying on smart objects to manage reusable UI, which was painfully slow and error-prone.
It quickly became clear that we needed a more reliable and scalable solution. Around the same time, Sketch was gaining traction, so we ditched smart objects and decided to try our hand at symbols.
Process
From what if,
to all in
During the 2016 holiday slowdown, I took it upon myself to learn Sketch and rebuild our core UI from the ground up. I began by establishing a library structure, then focused on foundational elements like color, typography, and icons. From there, I constructed our most frequently used components—buttons, inputs, and more—as a proof of concept.
Time for a test drive
After building the base elements and core components, I rebuilt one of our most complex product screens—in under 20 minutes. A task that used to take days in Photoshop became a matter of minutes.
This was my eureka moment.
Solution
Adopting atomic design
To support a growing design team, I created a modular design library with two core pieces: the source Sketch Library and a companion UI Kit. Both were structured around atomic design principles:
Foundations: Color, Typography, Grids, Spacing, Icons, Logos, etc.
Components: Buttons, Inputs, Avatars, Loaders, Tabs, Sliders, etc.
Patterns: Dialogs, Modals, Nav Bars, Filters, Vehicle Cards, etc.
Templates: Base layouts and key screens.
Add-ons: Devices, OS assets, etc.
Every element was crafted to support each experience team’s use cases while aligning to enterprise brand standards, across Web, iOS, and Android platforms.
Build the engine
The Auto Navigator Library contained all of the reusable symbols, shared styles, color variables, icon assets, and more—version controlled and centrally managed for consistency across teams.
Peek under the hood
The Auto Navigator UI Kit acted as a sticker sheet, making it easy to visually browse through all of the elements, and copy/paste components into your working files, while staying connected to the library.
Build.
Adapt.
Scale.
Over 4 years, I actively managed the library across three major versions—dedicating half my time to building and maintaining the system, and the other half to driving product work forward.
I collaborated with designers to audit patterns, unify naming, and adopt emerging Sketch features like Symbols, Smart Layout, and Color Variables. I also set up a GitHub repo for version control.
With that momentum, I earned support from design leadership and product partners to invest further.
What started as a grassroots effort became the foundation for our design practice—supported by documentation in Confluence, training sessions, and workshops across multiple teams.
It’s dangerous to go alone! Take this.
A hidden gem found deep in the library for only the most adventurous designers.
Results
Peak stats
At its peak, the Auto Navigator Library included a robust set of reusable design assets—centrally managed and synced across the full end-to-end product experience.
1.4k+
Symbols
560+
Styles
230+
Icons
30+
Templates
3
Platforms
1
Source of truth
Building less.
Solving more.
The library became more than just a toolkit—it changed how we worked, what we focused on, and how quickly we could deliver.
Dramatically reduced time-to-design with reusable components
Increased focus on solving customer problems instead of rebuilding UI from scratch
Unified platform design across responsive web and native mobile experiences
Achieved full adoption across all Auto Navigator designers
Improved design-to–dev handoff and collaboration through shared resources
Earned an internal MVP award for improving design consistency and efficiency
Influenced the direction of the Gravity Design System at the enterprise level
Sparked the creation of the FS Design System at the divisional level
Reflection
Design library ≠ design system
The Auto Navigator Library raised the bar for design quality and consistency—but without a coded counterpart, gaps still showed up in production.
This experience revealed a clear opportunity: to scale our impact, we’d need shared ownership across design, engineering, and the business. It sparked momentum that ultimately led to the creation of the FS Design System—built to serve the broader division.
Challenge
Not-so-smart-objects
When I joined Auto Navigator, our team was still using Photoshop—relying on smart objects to manage reusable UI, which was painfully slow and error-prone.
It quickly became clear that we needed a more reliable and scalable solution. Around the same time, Sketch was gaining traction, so we ditched smart objects and decided to try our hand at symbols.
Process
From what if, to all in
During the 2016 holiday slowdown, I took it upon myself to learn Sketch and rebuild our core UI from the ground up. I began by establishing a library structure, then focused on foundational elements like color, typography, and icons. From there, I constructed our most frequently used components—buttons, inputs, and more—as a proof of concept.
Time for a test drive
After building the base elements and core components, I rebuilt one of our most complex product screens—in under 20 minutes. A task that used to take days in Photoshop became a matter of minutes.
This was my eureka moment.
Solution
Adopting atomic design
To support a growing design team, I created a modular design library with two core pieces: the source Sketch Library and a companion UI Kit. Both were structured around atomic design principles:
Foundations: Color, Typography, Grids, Spacing, Icons, Logos, etc.
Components: Buttons, Inputs, Avatars, Loaders, Tabs, Sliders, etc.
Patterns: Dialogs, Modals, Nav Bars, Filters, Vehicle Cards, etc.
Templates: Base layouts and key screens.
Add-ons: Devices, OS assets, etc.
Every element was crafted to support each experience team’s use cases while aligning to enterprise brand standards, across Web, iOS, and Android platforms.
Build the engine
The Auto Navigator Library contained all of the reusable symbols, shared styles, color variables, icon assets, and more—version controlled and centrally managed for consistency across teams.
Peek under the hood
The Auto Navigator UI Kit acted as a sticker sheet, making it easy to visually browse through all of the elements, and copy/paste components into your working files, while staying connected to the library.
Build. Adapt. Scale.
Over 4 years, I actively managed the library across three major versions—dedicating half my time to building and maintaining the system, and the other half to driving product work forward.
I collaborated with designers to audit patterns, unify naming, and adopt emerging Sketch features like Symbols, Smart Layout, and Color Variables. I also set up a GitHub repo for version control.
With that momentum, I earned support from design leadership and product partners to invest further.
What started as a grassroots effort became the foundation for our design practice—supported by documentation in Confluence, training sessions, and workshops across multiple teams.
It’s dangerous to go alone! Take this.
A hidden gem found deep in the library for only the most adventurous designers.
Results
Peak stats
At its peak, the Auto Navigator Library included a robust set of reusable design assets—centrally managed and synced across the full end-to-end product experience.
1.4k+
Symbols
560+
Styles
230+
Icons
30+
Templates
3
Platforms
1
Source of truth
Building less.
Solving more.
The library became more than just a toolkit—it changed how we worked, what we focused on, and how quickly we could deliver.
Dramatically reduced time-to-design with reusable components
Increased focus on solving customer problems instead of rebuilding UI from scratch
Unified platform design across responsive web and native mobile experiences
Achieved full adoption across all Auto Navigator designers
Improved design-to–dev handoff and collaboration through shared resources
Earned an internal MVP award for improving design consistency and efficiency
Influenced the direction of the Gravity Design System at the enterprise level
Sparked the creation of the FS Design System at the divisional level
Reflection
Design library ≠ design system
The Auto Navigator Library raised the bar for design quality and consistency—but without a coded counterpart, gaps still showed up in production.
This experience revealed a clear opportunity: to scale our impact, we’d need shared ownership across design, engineering, and the business. It sparked momentum that ultimately led to the creation of the FS Design System—built to serve the broader division.
Challenge
Not-so-smart-objects
When I joined Auto Navigator, our team was still using Photoshop—relying on smart objects to manage reusable UI, which was painfully slow and error-prone.
It quickly became clear that we needed a more reliable and scalable solution. Around the same time, Sketch was gaining traction, so we ditched smart objects and decided to try our hand at symbols.
Process
From what if, to all in
During the 2016 holiday slowdown, I took it upon myself to learn Sketch and rebuild our core UI from the ground up. I began by establishing a library structure, then focused on foundational elements like color, typography, and icons. From there, I constructed our most frequently used components—buttons, inputs, and more—as a proof of concept.
Time for a test drive
After building the base elements and core components, I rebuilt one of our most complex product screens—in under 20 minutes. A task that used to take days in Photoshop became a matter of minutes.
This was my eureka moment.
Solution
Adopting atomic design
To support a growing design team, I created a modular design library with two core pieces: the source Sketch Library and a companion UI Kit. Both were structured around atomic design principles:
Foundations: Color, Typography, Grids, Spacing, Icons, Logos, etc.
Components: Buttons, Inputs, Avatars, Loaders, Tabs, Sliders, etc.
Patterns: Dialogs, Modals, Nav Bars, Filters, Vehicle Cards, etc.
Templates: Base layouts and key screens.
Add-ons: Devices, OS assets, etc.
Every element was crafted to support each experience team’s use cases while aligning to enterprise brand standards, across Web, iOS, and Android platforms.
Build the engine
The Auto Navigator Library contained all of the reusable symbols, shared styles, color variables, icon assets, and more—version controlled and centrally managed for consistency across teams.
Peek under the hood
The Auto Navigator UI Kit acted as a sticker sheet, making it easy to visually browse through all of the elements, and copy/paste components into your working files, while staying connected to the library.
Build. Adapt. Scale.
Over 4 years, I actively managed the library across three major versions—dedicating half my time to building and maintaining the system, and the other half to driving product work forward.
I collaborated with designers to audit patterns, unify naming, and adopt emerging Sketch features like Symbols, Smart Layout, and Color Variables. I also set up a GitHub repo for version control.
With that momentum, I earned support from design leadership and product partners to invest further.
What started as a grassroots effort became the foundation for our design practice—supported by documentation in Confluence, training sessions, and workshops across multiple teams.
It’s dangerous to go alone! Take this.
A hidden gem found deep in the library for only the most adventurous designers.
Results
Peak stats
At its peak, the Auto Navigator Library included a robust set of reusable design assets—centrally managed and synced across the full end-to-end product experience.
1.4k+
Symbols
560+
Styles
230+
Icons
30+
Templates
3
Platforms
1
Source of truth
Building less. Solving more.
The library became more than just a toolkit—it changed how we worked, what we focused on, and how quickly we could deliver.
Dramatically reduced time-to-design with reusable components
Increased focus on solving customer problems instead of rebuilding UI from scratch
Unified platform design across responsive web and native mobile experiences
Achieved full adoption across all Auto Navigator designers
Improved design-to–dev handoff and collaboration through shared resources
Earned an internal MVP award for improving design consistency and efficiency
Influenced the direction of the Gravity Design System at the enterprise level
Sparked the creation of the FS Design System at the divisional level
Reflection
Design library ≠ design system
The Auto Navigator Library raised the bar for design quality and consistency—but without a coded counterpart, gaps still showed up in production.
This experience revealed a clear opportunity: to scale our impact, we’d need shared ownership across design, engineering, and the business. It sparked momentum that ultimately led to the creation of the FS Design System—built to serve the broader division.
