Transmit Security
This project was done as part of my work at "Triolla"
Evolving the enterprise design system for a global
cybersecurity powerhouse.
Process
From research to Dev in two weeks.
1. Research
Dove deep into the existing platform, mapping what existed, what was inconsistent, and what needed to be rebuilt from scratch. Studied interaction patterns across leading enterprise platforms.
2. UX Concepts
Developed three distinct interaction models: Side drawer, Overlay card, Horizontal scroll and evaluated each for
technical feasibility with
the dev team before selecting the overlay approach.
3. Component build
Defined all tokens, variables, and states at the atom level before composing the full component. Maintained constant dev communication throughout to ensure nothing was designed that couldn't be built.
4. Documentation & kickoff
Produced a comprehensive behavior notes document covering all states, edge cases, keyboard navigation and interaction rules. Then ran a formal kickoff with the dev team to align on implementation.
.png)
Design
Built from atoms up, validated with engineers
After auditing the existing system and benchmarking filter interaction patterns across enterprise platforms, three distinct concepts were explored, a side panel drawer, an overlay card, and a horizontal scroll model. Following feasibility checks with the dev team, the overlay card was selected.
The rebuilt filter system is a two-part architecture: a persistent Filter Line in the page header (always visible, minimal footprint), and a floating Filter Panel that opens on demand. The panel supports two modes.
Every component was built to the atomic level: design tokens, variables, and the full matrix of states (default, hover, focused, active, disabled, removable) were defined before any composition work began. Left and right columns of the panel scroll independently, and all interactions: keyboard navigation, real-time counter updates, truncation with tooltips were specified precisely for dev handoff.
Challenge
Designing clarity inside complexity.
The existing filter system expanded elements vertically, stacking them into a cluttered row directly in the header. This layout compressed the workspace heavily — pushing critical graphs and data tables downward and fragmenting the user's view of the page.
The goal was to design a cleaner, more minimal filter line that
optimized screen real estate, kept data front and center,
and introduced an intuitive, non-disruptive interaction model
for a complex, multi-category filtering system.
The broader context was equally demanding: a fast-paced engagement that required rapidly auditing an entire existing design system, understanding undocumented component behaviors, and aligning with developers in real time before a single component was fully rebuilt.
