GTreasury

Role: UX engineer and design systems lead
Challenge: Six disconnected codebases and conflicting UX patterns causing fragmented workflows and high error rates.
Top outcome: Created and deployed the Obelisk design system (40+ components), unifying all product lines ahead of a major platform modernization and $1B acquisition.

From fragments to a shared system

GTreasury’s product ecosystem had grown through years of acquisitions. Five product lines lived across six codebases, each with different frameworks, visual languages, and interaction patterns. This fragmentation increased user error rates and made basic financial tasks tedious to complete.

Working alongside a UX researcher, I audited the platform to identify reusable interface patterns. The goal was to establish a design system that could drive modernization without forcing product teams to rebuild from scratch.

Sticky notes mapping shared UI patterns across legacy products — Auditing shared interface patterns and synthesizing research findings.

Building Obelisk

I led the creation of Obelisk, a Figma design system structured around design tokens, reusable components, and complex multi-state patterns. It expanded to 40+ core components, including dense data tables, complex forms, and financial dashboards.

Rather than treating Obelisk as a visual reference, I structured it for direct engineering handoff. Token naming, variables, and component properties were aligned to match frontend architecture, establishing a shared translation layer between design and code.

Color palette token hierarchy and variable definitions in the Obelisk design system — Core design tokens and multi-state UI components built for dense enterprise workflows in Obelisk.

Validating through prototyping

To prove the system in practice, we applied Obelisk to high-friction workflows like payment creation and cash worksheet management. I translated research insights into high-fidelity Figma prototypes, testing complex states and dense data layouts.

Next, I partnered with frontend engineering to build a production-ready Angular prototype. Writing the underlying Sass and component logic allowed us to solve layout constraints, accessibility edge cases, and interactive states before touching production code.

High-fidelity deal creation form layout in Figma — High-fidelity Figma prototypes evaluating complex form structures and internationalized worksheet flows.

Internationalized cash positioning worksheet prototype with multi-currency data — High-fidelity Figma prototypes evaluating complex form structures and internationalized worksheet flows.

Interactive prototype executing live Obelisk tokens, Sass architecture, and component state logic in the browser.

Modernizing a monolith

Obelisk was deployed across all five product lines, with over half of its 40+ components shared globally across teams. It gave design and engineering a unified vocabulary, drastically reducing redundant component development across legacy codebases.

The system established the design and implementation foundation for GTreasury’s platform modernization, positioning the product line ahead of its $1B acquisition.