My Role
Lead Product Designer
Team
- 5-9 Engineers
- 1 Product Manager
- 1 Quality Assurance Analyst
Duration
Ongoing from Q1 2023 - Q1 2026
Tools Used
Overview
During my time at Traction Rec, I led the end to end redesign of the billing and payments platform serving YMCAs, JCCs, and community recreation centers across North America. The existing suite of financial features had been built exclusively by engineering teams over the company's lifetime, accumulating significant technical debt that made new feature development nearly impossible and left users managing complex financial workflows through confusing interfaces. The redesign touched every part of the payments experience; from checkout and receipts, to refunds, recurring billing, and third-party payment integrations — ultimately unlocking a generation of new financial capabilities while delivering measurable improvements in staff efficiency and member satisfaction across our client organizations.
The Problem
The platform's financial feature set had reached a hard ceiling. Features like billing schedules, refund management, and payment processing had been built by developer-only teams with no design involvement, prioritizing maximum information density over usability. Every screen consumed all available screen real estate, leaving admin staff (the primary users) navigating dense, cluttered layouts to complete time-sensitive financial tasks. The compounding cost of this debt was real and client-facing. Organizations were fielding member complaints about billing transparency, manually processing refunds through literal paper trails, and losing revenue to unresolved payment failures because the platform had no intelligent retry logic or automated decline alerts. Worse, our clients were beginning to fall behind billing timelines in their inability to offer flexible payment structures such as: weekly, bi-weekly, and monthly billing schedules, prorated billing, and third-party billing processing — because the existing codebase simply couldn't accommodate new feature requests without significant engineering risk. The problem wasn't just technical. It was a trust problem with our customers.
Constraints
- —A three-year phased rollout — meaning designs needed to be modular enough to ship incrementally without breaking existing client workflows mid-cycle
- —A design system that needed to evolve alongside the product — we couldn't redesign the features without also establishing a more rigorous component library to ensure consistency as new billing features were introduced over time
- —Highly regulated financial data meant that clarity, auditability, and error states were non-negotiable parts of every interaction
- —The admin app was not a mobile-first context — most workflows occurred on desktop, but certain components were reused in a customer-facing mobile experience that required them to be designed with greater care and responsiveness than the internal context alone would demand
Project Goals
The core product goal was to rebuild the billing suite in a way that would eliminate technical debt while simultaneously delivering a new generation of financial capabilities that clients had been requesting for years. Success was defined in two dimensions:
- —Platform capability - Could we ship features we previously couldn't build due to backend constraints and technical debt.
- —Measurable client outcomes - Did the redesigned workflows reduce manual labour required previously for our users and did it reduce friction and save them time.
Work Process
How I approached this challenge
Discovery & User Research
The first phase was understanding who was actually using the product and what they needed from it. Through contextual interviews and workflow observation sessions with admin staff across multiple client organizations — including front-desk registrars, financial coordinators, and CFO-level approvers — we mapped the full lifecycle of a billing event: from initial registration and payment setup, through recurring charge management, to exception handling like declines, refunds, and third-party subsidy applications. This research surfaced a consistent pattern: staff weren't struggling because they didn't understand finance — they were struggling because the product didn't reflect the mental model they already had. Refund requests, for example, required navigating between multiple disconnected screens and relied heavily on email chains and manual handoffs to route approvals to the right people. The platform had no concept of a structured approval workflow, so every organization had improvised their own.
Design System Foundation
Before any feature redesign could begin, we audited the existing component library and identified the inconsistencies that were contributing to the claustrophobic layouts. We established a revised spacing system, a consistent information hierarchy for financial data displays, and a set of core components — data tables, status indicators, action panels, and form patterns — that would serve as the foundation for every feature that followed. This was a deliberate investment: building component-first meant that as each feature shipped, it reinforced rather than fragmented the overall experience.
Feature Design & Iteration
We worked through each feature area in structured design sprints, beginning with the highest-impact pain points identified in research. For each sprint, we moved from problem framing to low-fidelity exploration, into stakeholder and engineering reviews, then to tested prototypes before handing off. The **refund workflow** was redesigned as a structured multi-stage approval process — a registrar initiates the request with full transaction context visible, which then routes automatically through the client's management hierarchy (supervisor → financial coordinator → CFO) with all relevant information surfaced at each stage, and automated email notifications at approval and fulfillment. This replaced a manual process that previously required 45–60 days and significant staff coordination. The **make a payment experience** was rebuilt around payment status transparency — giving both staff and members clear visibility into what was owed, when, and why — with a streamlined checkout flow that reduced the number of steps required to complete a transaction. New receipt designs made transaction history auditable and legible across both admin and member-facing contexts. **Billing schedule flexibility** — weekly, bi-weekly, monthly, and prorated options — was introduced through a modular configuration model that let admins set up billing rules without needing engineering intervention, and that surfaced upcoming payment commitments clearly to members so they could plan accordingly. **Automated decline management** introduced smart retry logic and proactive alerting so that failed payments were handled systematically rather than falling through the cracks and requiring manual follow-up. Throughout, we ran usability testing at each major iteration point — testing with both admin staff and, where applicable, community members — and used findings to refine interaction patterns, label clarity, and information hierarchy before each feature reached production.
Solution
The Solution
The redesigned financial suite shipped progressively over the two-year project window and drove measurable results across the client organizations that adopted it but the most significant outcome was less visible but more durable: by resolving the technical debt that had prevented feature growth, the redesigned platform gave client organizations the financial flexibility to continuing serving communities seamlessly — and gave our product team the structural foundation to keep building.
Success Metrics
93%
reduction in billing administration time and a 33% reduction in credit card declines for clients leveraging the new recurring billing and automated decline management features
30 hours
saved per month on average by staff dealing with refund coordination. Reducing processing times from 45-60 days to 7-9 days
100%
successfully completed registrations and enrollments through the new digital service platform
The component system established during this project became the design foundation for subsequent platform areas, accelerating design and development velocity for future feature work.
Visual Documentation
