GTreasury

Role: UX engineer and design systems lead
The challenge: An established financial services product with six disconnected codebases and conflicting UX patterns caused fragmented workflows and struggled to maintain cohesion.
Top outcome: Created and deployed the Obelisk design system (40+ components), establishing a north star for 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 feature development and 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 for regular users 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 comprehensive multi-state options. It expanded to 40+ core components, including dense data tables, form controls, and financial charts and 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 critical workflows like payment creation and cash worksheet management. I translated research insights into high-fidelity Figma prototypes, testing complex experiences 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. Adoption varied depending on the team, with some opting for simple CSS overrides and others building more modern design-to-code pipelines.

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