Reshaping the ZeroTrust experience
The challenge of redesigning and improving the UX was overcome by establishing an OOUX template and visualizing relationships between objects.
The Challenge: Tangled Mental Models in Enterprise Security
Cloudflare’s Zero Trust suite is a massively powerful security perimeter, but enterprise security is inherently complex. The legacy UX suffered from disconnected settings pages that forced administrators to hold the system's architecture in their heads. To scale the product, we needed to shift from "screen-based" design to "object-based" design, ensuring the UI accurately reflected the underlying relationships between Users, Policies, and Network Assets.
The original library was assembled primarily using Tailwind UI, which inherits its own set of challenges related to scaling outwards. While Tailwind UI is a phenomenal tool for startups and prototyping, relying on its "legacy" approach (copy-pasting raw markup and utility classes) introduces massive friction at an enterprise scale. When you are building something as dense and critical as Cloudflare’s Zero Trust suite, the drawbacks of standard Tailwind UI become engineering bottlenecks.
The legacy object summary experience suffers from a cluttered and untethered relationship mapping, which tends to obscure relational objects and pushes important content downwards, since the information hierarchy offers unclear guidelines on object configuration and relationships.
Many of the primary controls for the objects were inconsistently displayed at both the table and object level. Additionally, your recent activity or insights related to the object are buried behind mountains of usage logs.
The primary task was decoupling the current state of the ZT UI, and establishing a new scalable layout, consistent with the and mapping relational entities available within each sector of the ZeroTrust product suite.
The Strategy: Object-Oriented UX (OOUX) Architecture
Before initiating in UI designs I wanted to create a relational matrix that represented each object’s location and effect on the experience. To do this, I initiated an OOUX framework to map the fundamental entities of the Zero Trust ecosystem, as they related in their relative workflows. This involved two stages of impact:
Object Mapping: I led the effort to define the core objects, their attributes, and their bidirectional relationships. This created a single, shared mental model for how a "Policy" interacts with an "Access Group" or a "Device Posture."
Relationship Visualization: By redesigning the relationship mapping experience at the object level, we transformed abstract security configurations into legible, predictable administrative workflows.
Establishing information hierarchy: I ‘grey-box’ designed the page-level component specifications in a way that would feel both consistent and comfortable to existing users, as well as newly onboarded users.
Mapping the elements out made assigning each page type to my fellow designers easier, as they could quickly identify and annotate their efforts to update designs.
Why use Kumo component library?
With the greater organization of Cloudflare adopting a wider design component space, more geared towards technical visibility and flexibility, the Kumo component library was a reliable choice for our utilization. Different benefits of the library migration were primarily boiled down to scalability, which afforded us the following advantages over the traditional Tailwind UI library:
Kumo is built directly on top of Base UI primitives. It inherently handles advanced accessibility requirements—like focus trapping, ARIA attribute management, and complex keyboard navigation rules—out of the box. In an enterprise security product like Zero Trust, accessibility isn't a nice-to-have; it's a legal and compliance requirement. Kumo guarantees that baseline without requiring engineers to write custom event listeners.
Kumo replaces utility sprawl with a strict Semantic Color System. It utilizes CSS light-dark() functions mapped directly to Cloudflare's design tokens. This means you aren't hardcoding hex values into your components; you are referencing semantic logic (e.g., "Surface Background" or "Action Primary"). When the system theme switches, the UI adapts at the foundational level, ensuring 100% consistency across the entire Zero Trust dashboard.
Kumo was explicitly forged in the fire of Cloudflare’s infrastructure products. It includes highly specific, data-dense components (complex tables, multi-select comboboxes, nested dialogs) that are specifically engineered to handle complex Object-Oriented UX (OOUX) relationships—like mapping a User to a Device Posture to a Security Policy.
The Execution: Scaling with the Design System
Architectural redesigns in enterprise environments fail if they aren't grounded in existing component libraries. Our redesign meant breaking down the page-level objects at a perspective which could scale outwards into different scenarios and implement them to scale future design workflows outwards.
System Integration: I translated our OOUX blueprints directly into Cloudflare’s Kumo design component library, by using AI skills and our Figma bridge tool in OpenCode.
Component Velocity: By strictly utilizing out-of-the-box Kumo components, we avoided introducing technical debt and ensured the new object relationships felt natively integrated into the broader Cloudflare ecosystem.
Team and organizational alignment
A structural UX shift requires absolute alignment. I organized and facilitated this architectural effort across the triad:
Product Management: Aligned the OOUX maps with PM business logic to ensure the UI exposed the exact levers required for enterprise security compliance.
Engineering: Used the object maps as a shared language with frontend and backend engineering, ensuring our UX relationships perfectly mirrored the underlying data schema and API dependencies.
Design Org: Synchronized with fellow designers to ensure these new relationship-mapping patterns could be standardized and adopted across other Cloudflare product surface areas.
Across the board we received buy-in on the new structural layout by surfacing how page-level CRUD layouts should work within the relationship of objects. This gave us the opportunity to showcase how our layouts would tackle most of the primary ZeroTrust use cases in a scalable way.
Page designs by use-case
To scale the Object-Oriented UX (OOUX) framework across Cloudflare's massive Zero Trust suite, I led the design effort to establish a strict taxonomy of Semantic Page Archetypes. Rather than designing hundreds of bespoke screens, my team and I utilized the Kumo design system to engineer high-fidelity, repeatable layouts based on the user's specific cognitive intent.
By categorizing the ecosystem into these core semantic types, we created a predictable, heavily systematized user journey:
Object Details (The Relational Hub): The most critical translation of our OOUX strategy. I designed this layout to prominently feature a visual node-mapping header (e.g., connecting a Login Method to an Application to a Destination). This immediate visual context eliminates the "black box" of security routing, grounding the metrics and policies below it in a clear, relational mental model.
Configuration (Context-Preserving Workflows): Enterprise configuration often requires referencing external data while inputting rules. I explored "split-page" configurations to allow administrators to manipulate settings on one axis while maintaining visibility into previews, data tables, or associated objects on the other, dramatically reducing cognitive load and tab-switching.
Analytics & Overviews (High-Density Telemetry): Leveraging Kumo’s rigorous semantic tokens and data-dense primitives, we standardized the telemetry layouts. These dashboards were optimized for scannability, utilizing strict grid systems to handle complex network analytics, bar charts, and security recommendations without overwhelming the administrator.
Settings (Predictable Administration): A unified, strictly ordered approach to global configurations, utilizing Kumo's accessibility-first form controls and list components to ensure compliance and rapid data entry.
The Impact on Velocity: These high-fidelity semantic layouts weren't just design deliverables; they were engineering blueprints. By strictly composing these archetypes out of Kumo components, we gave Product and Engineering a modular toolkit. When a new Zero Trust feature was proposed, PMs no longer asked, "What should this look like?"
Architecting the Object-Level Topology for Zero Trust
Within the Zero Trust ecosystem, not all objects are created equal. An Access Application is a massive, highly interconnected node with dozens of attributes, monitoring telemetry, and dependencies. In contrast, an Access Token is relatively simple but highly sensitive. My core responsibility was to design a unified object-level details architecture that could elegantly stretch or shrink based on the underlying complexity of the entity, without breaking the user's mental model.
The Solution: A Spectrum of Object Archetypes To establish structural consistency across the dashboard, I developed a sliding-scale taxonomy for object details pages using the Kumo design system. I categorized every entity into one of three structural tiers:
Complex Objects (e.g., Access Applications): Designed for maximum data density and relational context. I integrated React Flow node-based relationship maps at the top of the visual hierarchy. This allowed administrators to instantly visualize how an application routed through specific policies and destinations before they scrolled down to manipulate monitoring objects or dense configuration attributes.
Semi-Complex Objects (e.g., Access Policies, DLP Profiles): Optimized for rule-building and condition logic. These layouts utilized Kumo’s split-pane and nested-form primitives to keep the focus on logical IF/THEN configurations, maintaining relational visibility without the need for a full React Flow graph.
Non-Complex Objects (e.g., Tokens, Lists): Streamlined for rapid, high-stakes functionality. I stripped away unnecessary spatial containers, utilizing Kumo's inline components and minimalist tables to reduce cognitive load while preserving the overarching page structure and navigation paradigms.
Systemic Impact via Kumo UI By strictly enforcing this "Complexity Spectrum" through Kumo UI components, I ensured that every object page felt like a localized instance of the exact same system. This modular approach meant that when Product Managers introduced a new entity to the Zero Trust suite, we didn't have to design a new layout—we simply classified its complexity level and populated the corresponding Kumo structural template.
Outcome and summary
The Handoff: De-risking with OpenCode Designing complex, node-based architectures like the React Flow relationship maps requires more than static redlines. To ensure the interactions behaved appropriately in production, I shifted from static design tools to OpenCode. I built out interactive, code-backed prototypes that demonstrated the exact interaction models, edge cases, and structural behaviors of the core objects.
Engineering Collaboration & Specs These OpenCode prototypes were packaged alongside rigorous, component-level specification documentation. Rather than tossing designs over the wall, I established an "early and often" synchronization cadence with my engineering partners. This allowed us to pressure-test the Kumo UI integrations and React Flow behaviors in real-time, drastically reducing friction and rework.
Current State: This strategic alignment ensured that the ongoing implementation effort was completely de-risked. Engineering had total clarity on the primary interactions, allowing them to focus strictly on the backend plumbing rather than second-guessing the frontend UX logic.