Lead Product Designer • AI Fluent

Design for
people

Research-led product and service design across banking, wealth, and insurance — from strategy through delivery.

More about me
Yoko Reynolds
19years in UX & product
10years in financial services
2024TD Project of the Year
Case studies

Selected work

Complex internal platforms and customer-facing products across banking, wealth, and insurance.

Credit card payment options

Credit Card Payment Options
Private wealth advisor portal

Private Wealth Advisor Portal
Wire transfer employee app

Wire Transfer Employee App
Auto-loan platform

Auto-Loan Platform
How I work

AI in Design

I use AI in my design process. My role as a designer is to decide when and how to use it. Drawing on my 19 years of hands-on design experience, I create the initial design concept, set the direction, and co-create and share ideas with people.

I used AI to create this portfolio website. This is how I used it:

1. Research & synthesize

I researched 2026 design trends, AI-enabled practice and tools, and job-market signals, then turned a pile of raw notes into my design objectives. I set the questions and decided which patterns and tools to use. I used Claude Code to organize my file structure before starting the next step: content design.

Claude, Claude Code

2. Content design

I used LLMs to synthesize the existing contents from my past work and portfolio and shape it into the new structure I directed. I reviewed every line and kept using AI to edit towards the final copy. Most of my time was spent here, in extensive back-and-forth with AI. I used ChatGPT to generate and edit imagery.

Claude, Claude Code, ChatGPT

3. Production & craft

I made the initial design with Figma Design, exploring options and design patterns and adopting usable elements. I used AI for the systematic work: the typography system, auto-layout, layer naming, and consistency checks on colour, type, and spacing. I used Figma Sites to kick-start the responsive layouts.

Claude, Claude Code, Figma Agent, Figma Sites

4. Design to code & validate

To generate the responsive code, I iterated between Figma Agent and Claude Code, drawing on the strengths of each to produce the final HTML and CSS. After the initial build, I checked every component in every break-point to validate every pixel-level visual-design outcome.

Figma Agent, Claude Code

Let’s talk.

Whether it’s design leadership, product strategy, or a human-centred problem worth solving, I’d love to hear from you.

Contact me