trAIn 121
–
Spring 2021
trAIn 121
Streamlining workout automation for coaches at scale
Overview
Elevating Athletic Performance
Organization
trAIn 121
My Role
Part-time Contracted Designer – UX Design, UI Design, Prototyping, Interaction Design, Visual Design, User Flows
Timeline and Status
2 Months – Launched Spring 2021
The Goal
Designing for an MVP to simplify and automate workout programming for coaches and athletes, featuring a workflow for creating and deploying customized workout and training programs.
The Problem
Excel: The Manual Productivity Killer
Migrating to Automation and AI
Coaches grapple with hundreds of manual, Excel-based training programs that lack coach-friendly design. This manual workload takes away valuable time that they could spend coaching.
Manual Struggle
Coaches struggle with numerous manual, Excel-based training programs lacking user-friendly design.
Limited Resources
Providing high-quality training to athletes on a limited budget and matching the resources of well-funded programs is a constant struggle.
Scalability
As programs grow, managing individual training programs becomes increasingly complex and time-consuming.
Design an intuitive platform that simplifies program creation, improves coaching quality on a large scale, streamlines time-consuming tasks, and enhances athlete performance.
Project Timeline
User Research & Persona Development
Preliminary research & user persona development.
Competitive Analysis
Identify existing solutions.
User Story & Feature Mapping
Draft stories & map key features.
Low-Fidelity Prototyping
Focusing on discoverability, clarity, hierarchy, & intuitiveness.
High-Fidelity Prototyping
Define UI styles, sizes, & spacing specifications.
Handoff to Engineering
Hand off finished designs for development.
Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
User Research & Persona Development
Preliminary research & user persona development.
Competitive Analysis
Identify existing solutions.
User Story & Feature Mapping
Draft stories & map key features.
Low-Fidelity Prototyping
Focusing on discoverability, clarity, hierarchy, & intuitiveness.
High-Fidelity Prototyping
Define UI styles, sizes, & spacing specifications.
Handoff to Engineering
Hand off finished designs for development.
2.0
Project Timeline & Tasks
Diagram
Audience
Collegiate Coaches
Always looking for that competitive edge
Collegiate coaches are the primary target user. They are frustrated when they can’t offer the best training opportunities to their athletes. They are determined to find a solution that allows them to compete at a high level and provide their athletes with the best possible training.
Struggle to provide quality training with limited resources.
Too much time spent on manual, Excel-based programs instead of coaching.
Balancing program growth without increasing administrative overhead is a constant challenge.
Straight from the source
"I shouldn’t have to manage, update, and maintain 550 different training programs."
Interview Participant
"Excel was never meant to be a strength and conditioning software solution for coaches, and we maxed out its potential long ago."
Interview Participant
"My goal is to continue to build well-rounded, hard-working student-athletes who can find success in the classroom, on the field and in the weight room."
Interview Participant
"I shouldn’t have to manage, update, and maintain 550 different training programs."
Interview Participant
"Excel was never meant to be a strength and conditioning software solution for coaches, and we maxed out its potential long ago."
Interview Participant
"My goal is to continue to build well-rounded, hard-working student-athletes who can find success in the classroom, on the field and in the weight room."
Interview Participant
Process
An 8-Week sprint to the finish
Initial Research & Goal Setting
Before even sketching the first wireframe, I took a deep-dive into the research that was available from the founders and started an inspiration board to get some ideas flowing. I also collaborated with the Lead Creative Director to understand business objectives and user pain points better. This helped me set clear goals for the user experience design.
4.1
Inspiration/Mood Board
Image
Competitive Analysis
I scoped out the competition to identify gaps and opportunities. This gave us insights into where we could offer better solutions.
Competitive Analysis
Brands
Strengths
Weaknesses
MyFitnessPal
Big user community and offers a wide range of exercises and nutrition info. It's also available on mobile devices.
It's not entirely tailored for athletes and coaches. You can't create detailed workout programs, and it's not the best fit for coaching needs.
Trainerize
Excellent for personal trainers and coaches. It lets you create workouts and engage with clients. Plus, it has a handy mobile app.
It leans more toward individual training and might not have all the in-depth athlete analytics some coaches desire.
TeamBuildr
Built for sports teams and coaches. It allows program creation, athlete performance tracking, and team communication.
It's primarily designed for teams, which might not suit individual athletes. Plus, the pricing could be a bit steep for smaller groups.
TrueCoach
Coach-focused, offering program creation, athlete performance tracking, messaging, and client management.
On the pricier side for small coaches or solo athletes, and it could include more features for athlete engagement.
trAIn121
Stands out by catering to both individual athletes and coaches. It supports custom workouts, athlete performance tracking, and even has potential for a workout marketplace.
It's relatively new in the game and needs to grow its user base. It might also need to add more features for coaches.
4.2
Competitive Analysis
Table
User Stories & Flows
With a clearer view of the market and our users, I drafted user stories and created user flows for different scenarios and workflows that users might encounter.
User Stories
As a coach
I want to:
So I can:
Athletes Page
Add new athletes
Give them workouts or include them in existing workout plans
Group athletes together
Organize those who will get similar workout plans
Assign workout plans to athletes or groups of athletes
Schedule personalized daily exercises for many athletes at once
Set rules for adjusting workouts
Change exercises for multiple athletes at once
Exercises Page
Add a new exercise to the database
Include it in workout programs for my athletes
Edit the details of an existing exercise
Keep exercise information accurate and up-to-date
Delete an exercise that is no longer relevant or needed
Maintain a clean and organized exercise database for my training programs
Workouts Page
Create new workout plans
So I can provide clear instructions for individual gym sessions
Edit workout plans
Update workout details and specific exercises
Assign workout plans to athletes
Give them specific workout sessions or add workouts to their training schedules
Programs Page
Create new training programs
Provide structured workout plans for many athletes and athlete groups
Create templates for program cycles
Easily build workout plans
Assign workout programs to athletes or groups
Provide them with training plans
4.3
User Stories
Table
User Flows
These user flows outline the streamlined process for various sections of the platform. This design emphasizes ease of navigation and a user-centered approach, ensuring a smooth and intuitive experience.
Enter Athlete Info
UI
Athlete details form
User
Fill in athlete's name, sport, position, age, and physical attributes
Nav
Next button
Add to Groups (Optional)
UI
List of suggested athlete groups
User
Choose groups (auto-suggested or manual)
Nav
Next, Skip, Go Back
Add to Programs (Optional)
UI
Program options based on attributes
User
Select a program, set scalability
Nav
Next, Skip, Go Back
Review & Confirm
UI
Summary of athlete info, groups, and program
User
Review, click "Confirm"
Nav
Confirm, Edit, Go Back
Enter Group Info
UI
Athlete details form
User
Fill in athlete's name, sport, position, age, and physical attributes
Nav
Next button
Select Athletes
UI
List of suggested athlete groups
User
Choose groups (auto-suggested or manual)
Nav
Next, Skip, Go Back
Add to Programs (Optional)
UI
Program options based on attributes
User
Select a program, set scalability
Nav
Next, Skip, Go Back
Review & Confirm
UI
Summary of athlete info, groups, and program
User
Review, click "Confirm"
Nav
Confirm, Edit, Go Back
Enter Exercise Info
UI
Athlete details form
User
Fill in athlete's name, sport, position, age, and physical attributes
Nav
Next button
Review & Confirm
UI
Summary of athlete info, groups, and program
User
Review, click "Confirm"
Nav
Confirm, Edit, Go Back
Enter Workout Info
UI
Athlete details form
User
Fill in athlete's name, sport, position, age, and physical attributes
Nav
Next button
Add Exercise(s)
UI
List of suggested athlete groups
User
Choose groups (auto-suggested or manual)
Nav
Next, Skip, Go Back
Modify Exercise Details (Optional)
UI
Program options based on attributes
User
Select a program, set scalability
Nav
Next, Skip, Go Back
Group Exercises (Optional)
UI
Summary of athlete info, groups, and program
User
Review, click "Confirm"
Nav
Confirm, Edit, Go Back
Save Workout
UI
Summary of athlete info, groups, and program
User
Review, click "Confirm"
Nav
Confirm, Edit, Go Back
Deploy Workout (Optional)
UI
Summary of athlete info, groups, and program
User
Review, click "Confirm"
Nav
Confirm, Edit, Go Back
Enter Program Info
UI
Form for program details
User
Enter program name, description, and settings (including public/private visibility)
Nav
Next button
Add Cycle
UI
Calendar view with start and end markers
User
Define the program's cycle: Macro, Meso, or Micro
Nav
Next, Go Back
Save Program
UI
Summary of the program
User
Review and confirm program details, click "Confirm"
Nav
Confirm, Edit, Go Back
Deploy Program (Optional)
UI
Options to deploy to athletes, groups, or create new athlete/group
User
Choose deployment targets, click "Deploy Program" when satisfied
Nav
Confirm, Go Back
Design Iterations
I started with initial sketches and moved on to more detailed wireframes. By the end of this phase, I had developed a clickable low-fidelity prototype. My design focus was on ensuring discoverability, clarity, and hierarchy in the user interface.
4.4
'Athletes' Page (Low-Fidelity)
Image
4.5
'Groups' Page (Low-Fidelity)
Image
4.6
'Exercises' Page (Low-Fidelity)
Image
4.7
'Workouts' Page (Low-Fidelity)
Image
4.8.A
'Programs' Page (Low-Fidelity)
Image
4.8.B
'Programs' Page (Low-Fidelity)
Image
Feedback & Refinement
We made iterative improvements using feedback from usability tests. I then developed a polished, high-fidelity prototype using Figma. This included defining the UI kit, color schemes, typography, and other visual elements.
4.9
Example of components used
Image
Handoff to Engineering
For a smooth transition to the development phase, I used Zeplin to hand off all the design specifications to the engineering team.
4.10
'Athletes' Page (High-Fidelity)
Image
4.11
'Groups' Page (High-Fidelity)
Image
4.12
'Exercises' Page (High-Fidelity)
Image
4.13
'Workouts' Page (High-Fidelity)
Image
4.14
'Programs' Page (High-Fidelity)
Image
Outcome
Crossing the finish line
Results
After launching the initial design, we gathered feedback to evaluate its impact.
Preliminary reports from the coaching staff were positive, noting that the tool was easy to use and saved them time. Overall, the feedback was overwhelmingly positive, with users praising the modern, clean interface and user-friendly navigation.
Preliminary reports from the coaching staff were positive, noting that the tool was easy to use and saved them time. Overall, the feedback was overwhelmingly positive, with users praising the modern, clean interface and user-friendly navigation.
Challenges
Time Constraints: Balancing this project with a full-time job meant burning the midnight oil, so I worked extra hours to ensure project completion.
Limited Leadership Interaction: I didn't have direct access to the decision-makers so I maintained open communication channels with the Lead Creative Director.
Project Follow-through: Being a contractor meant I couldn't see the project to its end.
Takeaways
Adaptability Over Everything: Resourcefulness is key when you don't have all the pieces of the puzzle.
Communication is Key: Maintain clear communication, even when you can't be there in person.