INDUSTRY:
FINANCE
CLIENT:
WESLEYAN
YEAR:
2026
ROLE:
SENIOR EXPERIENCE DESIGNER
Willow Financial Health Check Platform
overview.
Wesleyan, a specialist financial services mutual with over 180 years of history, needed to prove that their brand could feel modern without losing trust. The brief arrived at an inflection point: a live rebrand underway, a new audience to reach, and a genuine product to ship, not a concept, not a pilot, but a fully functional financial health check tool and supporting microsite, live in six weeks. Willow was the vehicle for that ambition: a guided, conversational tool designed to help professionals, teachers, doctors, dentists, and lawyers understand their financial wellbeing and take a meaningful next step. The strategic opportunity was clear: design something that felt as considered as their new brand, demonstrated the value of personalised financial guidance, and laid the groundwork for a scalable design system the whole organisation could build on.
challenge.
The core tension in this project wasn't aesthetic; it was temporal. Six weeks is not a comfortable timeline for a financial services product that needed to earn user trust, reflect a new brand identity mid-rollout, and ship production-ready code. Wesleyan arrived with a Lovable prototype that captured intent but not rigour, and a new brand book that was directionally strong but untested at component level. There was no existing design system to inherit, no pattern library to riff on, and no runway for the kind of extended discovery that enterprise design typically requires. Every decision needed to be right enough, fast enough, and defensible enough to withstand both stakeholder scrutiny and real-user behaviour.
The challenge was compounded by the dual nature of the deliverable. This wasn't just a tool; it was infrastructure. The microsite and the Willow experience needed to function as the first public expression of Wesleyan's rebranded identity, which meant every component we designed would be scrutinised not just as a UI pattern but as a brand statement. We were simultaneously building for the present (a live product) and the future (a system their teams could inherit), with a small, tightly resourced team and no margin for late pivots.
my role.
As the senior experience designer on the project, I sat at the intersection of design execution and strategic direction, close enough to the work to shape individual components, senior enough to make the architectural calls that held everything together. I led the UX and UI design of the Willow health check tool and contributed directly to the microsite experience, working in close collaboration with a principal designer who held overall creative direction, a midweight designer focused on component build-out, and two senior developers who were embedded from sprint one.
My specific ownership spanned information architecture and interaction design for the health check flow, design system token architecture within Figma, and the AI-assisted workflows that underpinned our velocity. I acted as the bridge between the design system's structural logic and the product's experiential ambition, ensuring that what we were building in Figma wasn't just visually coherent but engineered for reuse. I also carried a significant portion of the design-to-development translation work, using Figma MCP and Claude Code to reduce the distance between a finished frame and deployable front-end output.
approach.
Discovery within constraints
With no runway for extended research, we moved fast on structured assumptions. Using jobs-to-be-done framing, we mapped the core motivations of Wesleyan's target audience, time-poor professionals who are financially aware but anxious about complexity. A rapid heuristic evaluation of the Lovable prototype revealed the same pattern: the experience leaned transactional, where it needed to feel supportive, and lacked the progressive disclosure logic to make a multi-step flow feel manageable. Within week one, I facilitated a working session with the digital strategy lead to align on Willow's emotional register before any design began.
Building the system before building the product
I pushed to front-load the design system work, counterintuitive given the timeline, but the decision that made everything else possible. We ingested Wesleyan's new brand book and used it to establish a Figma token architecture first:
Colour and spacing tokens using Figma Variables
Core component library built on atomic design principles
Inline usage documentation for developer-side consistency
AI accelerated this significantly. I used Claude as a thought partner for token-naming conventions and component hierarchy, and Figma MCP to translate brand book values into structured design tokens, compressing days of work into hours.
Designing and shipping in parallel
With the system in place, design and development ran concurrently. Key tools and methods that enabled this:
Claude Code to generate front-end scaffolding directly from Figma specs
AI-assisted prototyping to stress-test branching question logic before production
Moderated usability testing in week four with five participants, using a high-fidelity prototype
Testing surfaced two interaction failures on the results summary screen, a progressive disclosure issue and a labelling ambiguity, both resolved and re-tested within 48 hours.
outcome.
Willow launched on schedule, a fully functional financial health check tool and supporting microsite, live within six weeks. The shipped product reflects Wesleyan's new brand direction with clarity: clean typographic hierarchy, a warm interaction pattern, and a results experience that gives users a personalised picture of their financial health alongside a credible next step. It feels supportive rather than sales-led, which was the core design intent from day one.
Beyond the tool, the 80-plus component library delivered in Figma gives Wesleyan the first structured foundation for their design system. Token-based and built for scale, it's already in production use across both Willow and the microsite, proving itself in a live context before the wider rebrand reaches it.
This project demonstrated what a small, skilled team can achieve when AI is integrated with genuine intentionality, not as a shortcut, but as a workflow multiplier. The velocity didn't come at the cost of craft. It came from removing the friction between thinking and making.
reflection.
Willow reminded me why constraints are often the most generative part of any project. Six weeks forced us to be precise about what mattered, and the AI-assisted workflow gave us the room to actually care about the details that usually get cut. Building a design system and a live product simultaneously felt impossible on paper, but it's the kind of challenge that reveals what a team is genuinely capable of.
