Overview
Recently, I paired with a software engineer student to help with his capstone project for two weeks.
1. Project Goal
Build an all-in-one platform for sports coaches to monitor and manage all their teams and training schedules.
2. Target User
Strength & Conditioning Coaches
3. Product Type
Web app
4. User’s Problems to Solve
- Allows coaches to have one place to store their athletes’ stats
- Allows coaches to have one place to store their athletes’ programs
- Can keep track of the schedules of their teams all in one place
- Provides graphs and charts for tracking improvements in performance
- Provides graphs and charts for tracking injuries and injury rates
- Allows the coach to easily communicate trends with other sport coaches
- Allows the coach to easily communicate trends with athletic trainers and physical therapists
5. Design Restrictions
- Time restriction — 2 weeks
- Technical restriction — this was a student project
Considering this was a student capstone project and we only had 2 weeks, I was only required to create around 5 main screens for the SE student to implement.
Domain Research and Comp Set Analysis
To better understand how sports coaches work and what kind of information is required for coaches to train their athletes properly, I conducted domain research and competitive analysis.
After analyzing the target users’ pain point, I identified the most critical information for coaches to have to make good training decisions.
- Ability to keep track of the progress of performance statistics and injuries for each athlete as well as general trends across each team
- Ability to view and adjust training programs and schedules
- Ability to keep track of each athlete’s Injury histories and medical conditions
- Ability to view profile info and data for each team and athlete
Low fidelity Wireframes
The SE student and I worked together to iterate and finalize the wireframes. The goal was to make sure my design was feasible for him to implement within limited timeframe.
Style Tiles
The SE student wanted to use yellow as the main color for the product. Therefore, I created two style tiles, one being the light theme and one being the dark theme.
After I presented both style tiles to him, he decided to go with the light one.
High Fidelity Wireframes
Dashboard flow
Team Profile Flow
Schedule Flow
Final Prototype
Usability Testing
I tested the final prototype with 4 users. Here are the biggest takeaways.
- All users found the overall user flow, IA structure, visual hierarchy and UI design to be very clear and straight forward.
- Most of the feedbacks are about UI because yellow can be a hard color to play with.
“Be careful of the yellow, it’s hard to see it in some areas. Make sure you check the accessibility and contrast ratios.”
- Users think it would be more helpful to see some specific example data instead of the placeholder text.
“I am also curious to know what kind of data each individual chart is showing.”
