UI / UX / Web Design / HTML & CSS
An operating hub for personal trainers, designed to bring client management, programming, communication, services, and business workflows into one coherent system.
Case Study
KōCH started from a practical operational problem: personal trainers were running their businesses across too many disconnected tools.
Personal trainers used separate products for schedules, payments, files, client communication, and exercise tracking. The product needed to connect both sides of the service: trainers managing a business and clients following a program.
I helped shape the product around a repeated coaching loop: understand the client, plan the program, deliver the session, track progress, and follow up.
The solution separated the experience into two connected surfaces: a web platform for trainers to manage services, clients, billing, and programs, plus a mobile app for clients to communicate, review schedules, and follow exercises.
The final direction clarified KōCH as a trainer-facing operating system supported by a client mobile app and a promotional website for the product launch.
The project lead owned a successful one-on-one fitness club in Toronto and collaborated with multiple local fitness clubs. That gave us direct access to trainers with real business workflows and helped ground the product direction in daily operational pain points.
During observation, I studied how trainers moved between Excel, Messenger, Zoom, Outlook, Google Drive, WhatsApp, PayPal, and other tools. The repeated pattern was clear: trainers were not missing effort, they were missing one connected workspace.
I worked as a UX/UI designer on a two-designer team. My responsibilities included improving existing web screens, designing mobile user flows and UI, aligning feature decisions with another designer, and working with the development team so design decisions could move toward implementation.
Evidence & Screens
These artifacts show how the trainer-facing platform organizes clients, services, billing, and program building into one operating surface.
.png)
Mobile Client App
The client app explains the other side of the platform: clients needed a lightweight way to communicate, check schedules, browse services, and follow exercises without carrying the whole trainer dashboard.
The web platform supports trainer operations; the mobile app supports the client experience. I designed mobile flows for messaging, calendar review, marketplace browsing, and exercise guidance so the client side could feel focused and easy to return to during training.
Together, these screens frame KōCH as a connected service ecosystem instead of a single website or dashboard.
Promotional Website
This horizontal collection shows how the launch site presented KōCH across acquisition, client education, product story, contact, and feedback moments. The visual language is intentionally different from the portfolio page because it reflects the original KōCH brand: dark fitness energy, yellow-orange action cues, and product-led marketing.
Reflection
KōCH was a strong lesson in managing complexity without letting the interface inherit that complexity.
A complex product needs ruthless feature priority. The clearer the MVP, the easier it is for design and development to move together.
A reusable component system would have reduced repetitive UI work and improved consistency across web and mobile screens.
For multi-sided products, a detailed flow prevents logic errors and makes implementation conversations much smoother.
Next Case
A campus community product focused on helping students find like-minded people and local activity information.
View Connect U