GoCardless: Product

I was a design systems designer where I built scalable frameworks and component libraries that teams could rely on. I was an interaction designer, focused on crafting those seamless moments where users connect with interfaces. And I was an end-to-end product designer, taking products from initial concept all the way through to launch.

I was a design systems designer where I built scalable frameworks and component libraries that teams could rely on. I was an interaction designer, focused on crafting those seamless moments where users connect with interfaces. And I was an end-to-end product designer, taking products from initial concept all the way through to launch.

Team

1× Senior Product Design Manager
1× Engineering Manager
2× Senior Engineers

My contribution

User flows
Component detail
Microinteractions
Prototyping
Product demos

I took full ownership of our design system, transforming it from a collection of components into a strategic foundation for our product ecosystem. Through a comprehensive refactor of components (both within Figma and in code), I enabled our design team to work 60% more efficiently while maintaining consistency across all touch points.

Using Figma and After Effects, I was involved in analysing product flows, prototyping, and creating smooth-flowing demos used cross-functionally across Product, Sales, and campaigns within Marketing.

There were a lot of demos made for a number of products. To ensure consistency, I created a motion library to lay our foundations within brand and product. This library with bespoke easing styles, has been used internally and also passed to onboarded agencies.

My team expanded the system's impact through an adoption dashboard that provides visibility into usage patterns, while establishing robust documentation standards and integrating ongoing user research to ensure our system evolves with real user needs. I designed this tool alongside two front-end developers.

Using Figma and After Effects, I was involved in analysing product flows, prototyping, and creating smooth-flowing demos used cross-functionally across Product, Sales, and campaigns within Marketing.

Before: Components lacked descriptions, structure and formatting. There was no link to code, and designers were confused as to component usage.

Before: Components lacked descriptions, structure and formatting. There was no link to code, and designers were confused as to component usage.

Before: Components lacked descriptions, structure and formatting. There was no link to code, and designers were confused as to component usage.

Before: Components lacked descriptions, structure and formatting. There was no link to code, and designers were confused as to component usage.

After: Each component in the library were synchronised with their counterpart in code. Each Figma equivalent had a format (description, link, keyword) for better education and awareness.

After: Each component in the library were synchronised with their counterpart in code. Each Figma equivalent had a format (description, link, keyword) for better education and awareness.

After: Each component in the library were synchronised with their counterpart in code. Each Figma equivalent had a format (description, link, keyword) for better education and awareness.

After: Each component in the library were synchronised with their counterpart in code. Each Figma equivalent had a format (description, link, keyword) for better education and awareness.

I was involved in the end to end development of new features, prototyping, and creating smooth-flowing demos used cross-functionally across Product, Sales, Solutions Engineering and campaigns within Marketing.

I created a motion library to lay our foundations within brand and product. This library with bespoke easing styles, has been used internally and also passed to onboarded agencies. I helped develop micro-interactions, introduced animation patterns throughout the product, and supported product marketing.

Using Figma and After Effects, I was involved in analysing product flows, prototyping, and creating smooth-flowing demos used cross-functionally across Product, Sales, and campaigns within Marketing.