Fleets Portal Design System
Context
I led the design of SunDay's first Fleets Portal. As the MVP came together, I kept noticing the same friction across design and engineering workflows.
Patterns were being recreated from scratch, UI decisions varied from screen to screen, and there was no shared system tying the product together. As the product started growing, it became clear we needed a stronger foundation before scaling more.
Problem
Every new feature meant reinventing the wheel.
Without a shared component library or visual language, design and engineering were making one-off decisions on every build. QA cycles were longer because there was nothing to QA against. Handoffs were messier because there was no single source of truth. The product was scaling, but the foundation wasn't.
Solution & Impact
A design system built from the ground up: tokens, components, documentation, and adoption.
Eight weeks from audit to shipped library. One source of truth for every screen built after MVP. The system was adopted by 100% of design and engineering from day one.
My Approach
Three phases, one goal: make it easy for anyone to build a new screen and have it look completely on-brand.
Pulled every existing screen together and mapped inconsistencies across color, type, spacing, and components. Ran QA on the shipped MVP to identify the gaps causing the most friction for dev and design.
Defined core tokens first: color, typography, spacing, and grid, before touching a single component. Started with sketches on paper to validate spacing scales before building anything in Figma.
Followed atomic design principles, building atoms into molecules into organisms. Added usage documentation, release notes, and a changelog so the system could be maintained without tribal knowledge.
Key Decisions
I made the case for investing in a system before scaling the product further.
While leading the Fleets Portal MVP, I noticed the team was repeatedly solving the same UI and workflow problems from scratch. After launch, I scoped the effort, outlined the long-term operational cost of continuing without a shared system, and partnered with product and engineering to align on building the foundation.
Tokens before components.
A lot of design systems get built component-first and fall apart when brand decisions change. I locked in the core tokens: color, spacing, type scale, grid, before building a single component. It took more time upfront but meant every component downstream was consistent by default, not by coincidence.
I built for the developers, not just the designers.
Most design system documentation gets written for designers. I structured the Figma library and handoff specs specifically for the engineering workflow: clear usage guidelines, real-world examples, and a dedicated page for upcoming changes so nothing caught developers off guard. That investment is what got us to 100% adoption.
Documentation was part of the deliverable, not an afterthought.
I built release notes and upcoming changes pages directly into the system file from day one. It changed how the team related to the system: it felt like a living product, not a static file someone handed them once and forgot about.
What Shipped
A system the whole team actually used, and still uses.
The design system quickly became the source of truth for every screen built after the MVP. Handoffs were smoother, QA cycles got shorter, and new features shipped faster. Engineers actively referenced the system, and cross-functional partners contributed feedback and improvements along the way. It gradually became part of how the team worked day to day.
Reflection
Design systems have always been a passion of mine. This project reminded me why.
Getting the chance to build one from the ground up combined so many things I love about design: problem-solving, bringing structure to chaos, and collaborating across teams to make everyone's work easier and more consistent. I did not just hand off a Figma file. I handed off a way of working. That is what made this one stick.
To see the full product work, check out the Reimagining the Fleet Experience case study.