Fleetio
As a Senior Brand Designer at Fleetio, I specialize in web design and front-end development. I manage our brand design systems, ensuring consistency across all platforms, and create digital assets for the website as well as email templates to elevate the brand’s digital presence. I also manage Associate Brand Designers and interns and guide them in designing high quality assets for our team.
Featured Projects:
Fleetio Design SystemWebsite Work
Case Study
Senior Brand Designer
2021-Present
Fleetio color swatchesFleeticons
Example of Typography system

Brand Identity

Over the years at Fleetio, I have played an integral role in shaping our brand identity. I led the initiative to update our color styles, ensuring our greens, teals, and grays met accessibility standards and aligned with our brand's direction. I developed 'fleeticons' within a 24x24 pixel grid and refined our typography scale for seamless application across web and print. Beyond visual elements, I spearheaded the creative direction for photography, capturing all the images featured on our website. Additionally, I contributed significantly to our swag initiatives, enhancing brand presence through thoughtfully designed merchandise.
Sample of photographyExample of agnositc devicesExample of updated swag items

Web Design Systems

As the sole web designer on the brand team at Fleetio, I created a comprehensive design system of website components in Figma and custom-designed numerous pages for the company website. Leveraging technologies like React, Next.js, and Tailwind CSS, I developed many of these pages myself, furthering my coding expertise and contributing to a seamless integration between design and development. Notably, you can see the refinements made to our design systems up-leveled our web design. We've streamlined props across components to enhance quality.
Example of Case Study page designExample of Benchmarking Report page

Component Systems

I built our design system in Figma to mirror our codebase with a 1:1 relationship between design components and those in our repo. This included aligning prop names for smoother handoff to developers.

Beyond components, I also created a system of variables and color tokens in Figma that directly map to our Tailwind classes. This allows the design team to create development-ready designs with full accuracy and consistency.
Example of custom components

Navigation Redesign

• A Component-Driven Approach I designed a single, flexible component that supports icons, titles, and descriptions as props, making the build more streamlined and easier to test changes across the entire nav.
‍
• Refining the Announcement Bar’s Role Previously, it contained extra links—now, they’ve moved to a dedicated footer in the menu, allowing the announcement bar to serve its true purpose: highlighting key updates without clutter. We immediately saw results of increase in clicks as a result of this.
‍
• Small Delights, Big Impact Microinteractions matter! From an animated caret to smooth transitions between navigation menus, subtle details enhance usability and polish.
‍
• More Intuitive Information Architecture We reorganized the content to reduce cognitive overload and follow more expected user behavior patterns, making navigation feel effortless.

Print Work

I led the art direction for the Guide to Managing Fleet Maintenance, crafting cohesive paragraph and character styles alongside dynamic layouts that balanced readability with visual appeal. This project was highly collaborative, involving cross-functional work with our content team to develop the book's material and our growth team to promote it. I also created accompanying assets to support its launch. As a follow-up to The Fleet Manager's Manual, which I also designed, this book required a strategic approach to ensure the designs felt related yet distinct. The result was a fresh, engaging design that pushed my creative boundaries while addressing the unique challenges of the project.
Examples of Guide to Managing Maintenance