top of page

Trayn-U

Trayn-U is a comprehensive fitness product built around a three-sided digital ecosystem: Gym Businesses, Personal Trainers, and Clients. The objective was to design a unified mobile application framework that allows gyms to showcase facilities, trainers to manage and assign programs, and clients to track progress dynamically.

Trayn-u overview
Trayn-u app mobile mockup

End-to-End Product Design for a Tri-Tier Fitness Ecosystem

My Role: Lead Product/UX Designer

Collaborators: Developer

Responsibilities: Competitor Benchmarking, Tri-User Information Architecture, Cross-Platform Wireframing, Custom Iconography Systems, UI Motion Graphics, and Developer Handoff Documentation.

Tools: Photoshop, Illustrator, Adobe Premiere

Challenge

The primary hurdle was managing high operational complexity. Because the app functions completely differently depending on who logs in, the design had to accommodate distinct task flows without feeling like three separate apps. We needed to prevent cognitive overload while engineering highly visual, interactive features (like animated exercise clocks and muscle-group mapping) that could perform smoothly inside production code.

Research & Strategy

  • Competitor Benchmark: I began by analyzing dominant fitness applications to isolate gaps in their product loops. I noticed that most competitors focused strictly on a single relationship—either client-to-app or client-to-trainer. They completely neglected physical gym facilities as an active, strategic business tier.

  • The Strategic Pivot: I structured Trayn-U to bridge the gap between physical brick-and-mortar spaces and digital coaching. The visual language was intentionally designed to feel energetic and encouraging for the end client, while maintaining structured utility for the business users.

Gym's Journey overview

Gym Journey

Trainer's Journey overview

Trainer Journey

Cilent's Journey overview

Client Journey

Fitness Routine Process

Routine Process

Tri-Tier Information Architecture & Wireframing

To ensure smooth navigation across three separate ecosystems, I mapped out independent information architectures tailored to each user's specific goals:

​

  1. The Gym Dashboard (Management View): A streamlined interface focused on facility discovery, amenity promotion, and internal trainer registry management.

  2. The Trainer Workspace (B2B Coaching View): A utility-forward layout optimized for rapid client lists, performance tracking, and a modular routine builder for fluid program assignments.

  3. The Client App (Consumer View): A highly interactive dashboard containing routine duration metrics, estimated calorie-burn calculators, built-in exercise timing, and localized muscle-group highlights.

Visual Execution & Purposeful Motion

  • Custom Iconography: Using Illustrator, I built a cohesive, intuitive custom iconography library from scratch.

  • UI Motion & Training Animations: Using Photoshop and Premiere, I designed smooth animation loops to illustrate proper exercise form. Rather than using static images, these animations were mapped directly to real-time UI counters that dynamically highlighted specific muscle groups, giving the client clear physiological feedback.

  • Cross-Functional Developer Collaboration: Because this was an intricate concept, I worked closely with a developer throughout the design and prototyping phases. By discussing structural limits and asset constraints early on, we ensured that the complex layout transitions, timer loops, and animated assets were fully optimized.

Results

While the product was not pushed to a live market release, the design process successfully translated a complex, three-sided platform into a seamless, high-fidelity interactive prototype. By delivering a granular UI kit, structured information architectures, and fully optimized animation assets, the final handoff packet provided a complete, production-ready framework prepared for full-scale engineering.

Promotional Video

bottom of page