Founding CAP Index's first design system

CAP Index had deep informal knowledge of its users — sales calls, support conversations, years of client relationships — but none of it was documented in a format that design decisions could be built on. I led the company's first user personas, synthesizing internal expertise and periodic client conversations into profiles spanning our core industries: retail, banking, and healthcare. Alongside them, I gathered and documented feature requests and pain points from across the organization, turning scattered requirements into a prioritized foundation for the redesign.

The old platform organized navigation around three flat tabs — Dashboard, Table, and Map — with everything else, from user accounts to system settings, buried under a single account menu in the top right. Users had to hunt for basic administrative tasks, and Table and Map, which were really just two views of the same site list, lived as separate destinations rather than a single connected experience.

I merged Table and Map into one Sites tab with an in-page toggle between views, so switching how you looked at a site list no longer meant losing your place or reapplying filters. I split the old account menu into two purposeful groups — User Management and Admin Settings — so users could find what they needed by what it was, not by memory. A global search bar tied it together, letting anyone jump straight to a page instead of navigating down to it.

Dark mode brought its own set of challenges in a system this data-dense. With risk scores, map icons, and status indicators already carrying meaning through color, dark mode colors were deliberately muted to keep those signals readable. The map added another layer on top of that: beyond its color-coded risk layers, the base map itself needed a true dark-mode variant, not just an inverted light one. Surfaces and elevation posed a different problem — shadows that read clearly in light mode nearly disappeared in dark mode, so surface tokens needed real definition, backed up by highlighted borders where contrast alone wasn't enough to separate layers.

We also wanted the platform to be responsive from the start, not retrofitted after the fact — building it to look and work well on mobile as we went, alongside desktop, rather than adapting it once the project was already finished. That meant simplifying dense features, prioritizing the information that mattered most, and cutting back on data density so nothing overwhelmed a phone-sized screen.