One of the easiest ways to start working out or participating in a sport is to do it with other people. Whether it’s on a team, a club, or just a dedicated group of friends, exercising with other people is how a lot of people stay committed. However, when people aren’t able to exercise with their team, they usually fall off the boat — aren’t able to stay committed to exercising — relatively fast.
The Challenge:
How might we provide team-based athletes with a tool to help them train remotely?
The Goal:
Design an app platform that allows people to organize team goals, training plans, and inter-team competition to facilitate structure, foster community, and motivate team athletes to perform their best, even when alone.
Understanding Users
As a team, we conducted 7 qualitative, semi-structured interviews in order to identify pain points, motivations, and needs of coaches & athletes while they’re away from their team. Our interviewees spanned 5 different sports — rowing, football, water polo, sailing, and swimming — at the high school, collegiate club, Division-1, and National Team levels.
After a thematic analysis of our interviews, we identified these key findings:
We then took our findings to create 4 personas (primary, secondary, tertiary, & anti) and a user journey map to ground our design. The personas and journey map captured the pain points, motivations, and needs of athletes & coaches identified in our interviews.
Ideation
The first step in the ideation phase was creating a design spec to outline what our solution would entail. After reflecting on our user research, we identified several problems that our design should address to meet the needs of our persona archetypes.
Our team created 3 storyboards to highlight key interactions between users and our design solution. The left and the middle storyboards depict interactions with athletes while the right storyboard shows one with a coach.
Afterwards, the team came together to create a list of features that we would want to include in our design. Grounding ourselves within our research, we brainstormed and then narrowed down the list of features into 5 main sections: workout feed, leaderboards, add workout, training, and communication. These were then mapped out with an information architecture to show how each section would exist within our design.
Each of us then created paper prototypes of the 5 different sections. This primarily allowed us materialize our ideas into a low-fidelity prototype of our app. These prototypes were then digitized and further iterated upon through the creation of wireframes.
Interactive Prototype
After some time working apart to create paper prototypes and wireframes, we then came together to create a centralized design system to ensure that our high fidelity prototype would be visually and functionally cohesive.
The orange was chosen as our primary color because of its bright vibrancy and natural energetic feeling. This in combination with its association with the seasons encourages users to be active and achieve their goals.
The main headings within our design use Futura while everything else is in Open Sans. Futura conveys a sense of efficiency and forwardness that many athletes are accustomed to while Open Sans was chosen for its welcoming and friendly feeling.
Below is our high-fidelity interactive prototype! (if it’s not working, click here to view in Figma).
Next Steps
At the beginning of the quarter, we had a lot ideas for what we wanted to do with our project. However, we realize that many of them wouldn’t be attainable within the scope of 10 weeks. If we had more time to continue, we would conduct usability tests, design an interface from the coach’s perspective, and further iterate on existing features of the prototype.
Reflection
The entirety of this project was done remotely due to the on-going COVID-19 pandemic. It was hard navigating through our different schedules while attending university full-time on Zoom. Nevertheless, we quickly found our rhythm working independently and made the most of our team meetings.
Team Base Camp
- Isabel Klein | www.isabelklein.com
- Kenny Le | www.kennyle.com
- Yvonne Huang
