Defined V1 foundations and led transition to semantic V2 architecture.
Defined V1 foundations and led transition to semantic V2 architecture.
Established governance processes for 8+ designers and cross-team alignment with 50+ engineers.
Led dark mode cross-platform design & implementation across core product streams.
Transitioned the system into a scalable semantic architecture under active development.
Reduced UI inconsistency and component duplication across teams.
Improved onboarding clarity and design–engineering predictability.
Enabled scalable multi-theme support (light / dark).
Strengthened design–engineering alignment & collaboration.
The MyStoneX roadmap introduced a fundamental shift: moving from individual product ownership toward ecosystem-level consolidation. The ambition was clear: unify up to 40 digital financial products under a single application & single account structure, while allowing selected applications to operate independently within a broader ecosystem.
At that point, the UI function operated with three designers and a planned expansion. The scale of projected output - across web, mobile and parallel engineering teams and dynamic roadmap - made it evident that even under a reduced product portfolio, the projected surface area across platforms, segments and parallel engineering streams introduced structural complexity that could not be managed through isolated design decisions.
The first iteration of the system was introduced alongside MyStoneX under tight project and budget constraints. It established a unified visual baseline and enabled initial delivery across products, but its structural limitations surfaced quickly as team size and product scope expanded.
What began as a tactical foundation had to evolve into a layered architecture designed for scale.
The second iteration introduced:
The shift from V1 to V2 was not cosmetic, it redefined the system from a delivery enabler into a scalable architectural layer - designed to support multi-product growth, theming expansion and cross-team collaboration under real-world constraints.
The system was designed around a layered model: a centralized Foundations file providing primitive layer of color, standarized typography, and visual effects, with separate Web and Mobile libraries inheriting from it.
This architecture allowed platform-specific semantic layer and component logic while maintaining structural consistency. Updates at the foundation level propagated predictably across environments, reducing duplication and manual overrides.
This separation enabled controlled scalability: updates at the token level propagated consistently across environments without fragmenting implementation.
As product complexity increased, the architecture expanded from its initial V1 setup into a parallel V2 structure. Rather than introducing a disruptive rewrite, the transition was staged. V2 libraries were built alongside active production work, allowing ongoing delivery while gradually introducing semantic layers and improved component standards.
As product delivery scaled across multiple teams and streams, maintaining architectural integrity required a structured operational layer. Governance was introduced to ensure the system evolved deliberately rather than fragment under parallel development.
A controlled update workflow was established: new components were first developed within a shared playground environment, allowing iteration without destabilizing the core libraries. Updates followed validation cycles before publication, ensuring alignment with semantic structure and platform standards.
Recurring design critique sessions and early UX review touchpoints were embedded into the workflow to reduce duplication, surface architectural implications early and maintain cross-team visibility. Oversight of the Web & Mobile library and its migration process ensured structural consistency across dependent product streams.
Responsive web support for tablet & mobile screens and a full dark theme were requested while active product streams were already in development. The challenge was not visual inversion, but preserving semantic integrity across an evolving architecture.
Dark mode was introduced as a native extension of the semantic token architecture, leveraging variable modes to maintain consistency without duplicating component logic. Core flows were audited to validate dependency chains, and specialty tokens were introduced where isolation from global logic was required.
Responsive expansion adapted web library across breakpoints without duplicating the Foundations layer.
These extensions validated system’s ability to scale under active delivery without structural compromise.
Parallel product streams operated within a shared architectural framework, reducing fragmentation across web and mobile.
The V1 → V2 transition enabled architectural upgrades without halting active development, preserving delivery continuity under expanding scope.
What began as a constrained foundation evolved into system-level infrastructure capable of supporting multi-product growth across teams and platforms.