Challenge: At MyVest, as we expanded the engineering team and introduced increasingly complex features, several challenges arose:

• Bug reports grew as new features were added.

• Guidelines were scattered across repositories, difficult to find, and often inconsistent or outdated.

• Enhancement requests took too long to implement, affecting usability.

• Production efficiency lagged, technical debt built up, and user experience declined as user flows expanded.

Task: I was asked to revolutionize the design and development process by creating a scalable design system that would:

• Establish a reusable component library for a multi-tenant wealth management platform.

• Define foundations for styles, UX interactions, and consistent user experiences.

• Standardize collaboration and feedback across cross-functional teams.

• Create a central repository of UI components, their variants, and documentation for developers.

• Provide UX documentation, personas, workflows, and decision flows.

• Deliver page templates and design patterns to reduce waste and effort.

• Expand components to meet requirements, exceed constraints, and enhance usability with animations.

Actions: To achieve this, I:

• Conducted a UI Inventory and Audit
  What: Performed a comprehensive review of hundreds of legacy code instances, deconstructed outdated user flows, and compared them against best-in-class e-commerce and finance design systems.
  Why: To identify redundancies, reveal inconsistencies, and establish a clear set of foundational and custom components (e.g., buttons versus data tables/charts) tailored to MyVest’s unique workflows.
  

• Defined Design Tokens
  What: Created a set of design tokens (colors, typography, spacing, states) emphasising accessibility, information density, and functional clarity, implemented in Storybook.
  Why: To unify the visual language across the platform, ensure scalability, and provide developers with a single source of truth.
  

• Partnered in Component Development
  What: Collaborated directly with front-end developers in Angular, CSS, and Figma to co-create UI components through rapid iterations, rather than relying solely on handovers.
  Why: To surface usability issues early, reduce duplication of effort, and significantly cut development cycles by aligning design and engineering in real time.
  

• Published a Living Style Guide
  What: Developed an internal style guide with examples, usage guidelines, and best practices, continuously updated and circulated for feedback.
  Why: To ensure consistent application of the design system across teams, reduce ambiguity, and foster a feedback loop that evolves with product needs.