Breakdown of what stood out from Fitbit Coach App.
Utilizing AI to increase performance for lacrosse athletes
I had the opportunity to be work on the development of the MVP for a fitness startup called Crease Pro. They are a Lacrosse instructional app whose goal is to utilize AI along with customized training programs to help athletes of all skill levels increase and optimize their performance as well as allow coaches to provide feedback and tailor individual programs. There are focusing just on goalies to start since their position is the most complicated on the field.
What was worked on
A mobile fitness app that customizes training and fitness programs for lacrosse athletes.
Designed for coaches and players of all skill levels. The goal was to develop a way that coaches could quickly and easily help program custom training regimens for their players as well to have players practice, record, and track their progress.
I led the UI design and wireframing efforts. My Primary/Secondary research was in regard to how users like to engage with instructional videos and how to effectively display them within the app so that they could be easily found and utilized. I also conducted usability testing, as well as a card sort with users. I worked alongside two other interns, Tolga E. and Gurveen Sekhon, who worked on developing the gamification and social engagement features of the app. I took on a leadership role amongst my fellow designers and oversaw and managed the majority of the project.
...and what do users expect from instructional videos in general?
I first wanted to tackle the question "what do people expect when viewing videos online or in an app?" and found that is broken into two categories. Entertainment and Instructional.
Since what we are working with is instructional learning, I focused on what usability features viewers expect the most from them.
What I surmised was there were 4 main points of consideration.
I looked into 10 fitness and sport training apps to gain insights into what is already out there, and to assess varying strategies other companies in the same space implemented to accomplish a similar goal.
The apps I looked into
- Nike Training Club
- Fitbit Coach
- Smart Coach
- Dribble UP - Medicine Ball
- There were only a couple of companies that attempted to do something similar, none of which were related to lacrosse. (Zepp -Baseball Smart Coach- Basketball)
- There were several consistent practices. This insight will lay the foundation for design solutions during the next stage of the design process.
- The fitness apps were the main competition, but Crease Pro had a clear advantage to be able to leverage the customized program and lacrosse-specific training.
- There were a lot of UI insights on how to best display information in a clean and informative way.
We interviewed 3 athletes and 1 coach
Before diving into design solutions we wanted to talk with our user base so that we could confidently say we're tackling the right questions and know we were addressing their needs. My two fellow interns conducted the interviews and this is high-level results of what was uncovered.
What we were Looking for
- To understand if they had used fitness apps in the past and what they liked/disliked most about them.
- To understand what level of importance social engagement played in their experience as well as what incentivized them to use a fitness app on a regular basis.
- What did they expect from fitness apps in regards to program development and accountability?
While I was not the one to conduct the interviews, the findings gave us a better understanding of who we were developing this app for. This allowed my co-interns to create proto personas.
- Based on conversations with the owners and the design team, along with the interviews, Tolga and Gurveen created 4 proto personas. Each demonstrative of skill level. Beginner, Intermediate, Professional, and Advanced (i.e. coach).
- We applied the main concerns each persona had, as well as frustrations, motivations, and goals. We also noted how tech-savvy they were as well as their level of engagement with social media.
- It was noted that not many people engaged with social media within a fitness context, which led us to questions the level of importance this would play in the launch of the MVP.
Next StepsIt should be noted these personas would need to be fleshed out with a minimum of 3 more interviews per persona for them to have more influence over design directions.
Developing a user flow for a daily survey as well as the video workout flow.
Sketching is a great way to get your ideas out quickly. Allowing me to iterate through several potential design options, and decide which direction is the strongest.
- The main purpose was to brainstorm ideas on "how might we..." come up with various solutions.
- I pulled concepts from my competitive analysis for inspiration as I liked the flow of a few of their questionnaires as well as layout for workout overviews.
- I did 2 "Crazy 8" rounds. 16 screens in 16 mins.
- I chose to go with the more "questionnaire" approach as opposed to numerical mainly because it would allow for more options to be expressed.
- I placed the sequencing of screens so users would follow a "Z" pattern with their focus which tracks with the average reading eye pattern of users.
- The sketches laid the groundwork for what would become my wireframes and eventually my high resolutions screens.
I like using LoFi wireframes for prototyping. It gives users a sense of what the final product will be but not over stimulate them with UI choices this early on. This also saves time in the design process developing highly developed UI screens for a process that may or may not work.
These were useful because
- It helped solidify the user-flow and start to see the formation of consistency throughout different sections of the app.
- Lo-Fidelity WireFrame for prototyping purposes.
- We used Sketch and Invision for prototyping and creating screens and symbols.
Check out the Prototype on the right >>>>>
Before taking out design solutions to the client, we did a testing round in order to reveal possible usability flaws.
- We were looking to see if the gamification suggestions were fun and engaging and if social media sharing played a role for users. Also, if the user flow from survey to workout made sense and was enjoyable and easy to follow.
- We conducted user testing after we had finalized our design solutions into LoFi wireframes.
- We interviewed a range of people in the level of experience and age. While they did not play lacrosse, they were, or are currently athletes with experience with fitness apps.
- It was clear that the social sharing function was not of importance to them, the gamification was fun and engaging and they all liked how the badge system worked. The workout flow was easy to follow and clear as to what would happen next in the sequencing of events.
- Change progress bars in the goals section to reflect progress in a clearer way.
- Add screens during onboarding to teach users how to set up their daily surveys.
- Change the social function to share to a group page instead of public feed.
after Usability testing...
and determined what needed to be changed, I started designing the final UI screens in Sketch.
- Modern, Clean, Sporty visual style
- Inspired by leaders in the industry (i.e. Under Armour, and Nike, etc.)
- iOS platform design
- It incorporates easy to follow bright buttons for CTA, and included progress markers.
- It gives users a quick glance at their progress, inspires daily usage through gamification, and allows users to be in control of their experience.
So what's next?
This app is going to need to be constantly iterating to meet the lofty goals of the client. They are attempting to tackle a lot all at once, and focusing on just one player position (Goalies), I think is a prudent decision, or they run the risk of doing too much at once which could lead to adverse outcomes.
What I've learned from this project?
- This was my first project working with other UX designers, and I found myself drawn to being a team leader and helping delegate tasks by recognizing the strengths are weaknesses in the team so that we were all working on the areas we were strongest at, while simultaneously getting experience it areas that needed development. "Putting Aces in their places" so to speak.
- We were able to turn around a complete project based on the scope and proposed deliverables along with design suggestions for the next steps to be focused on to take their MVP to the next level.
- Team communication was solid. We met several times a week and were open and honest about where we were at and if anyone needed help with anything.
- Estimating scope and timeline. I wasn't sure there would be enough time to develop all the assets they were looking for in only a 4 week, 40-60 hour runway. The team struggled a bit to stick to getting everything done by specific windows, We are all over-achievers, however, it would have made more sense to limit our scope to make sure we had enough time to go through everything thoroughly.
- Food Poisoning. One of the interns came down with food poisoning which shifted the workload to the remaining two of us for a few days. As this is not uncommon to have someone fall out and shift the workload. We made it work but it did come with some late nights.
This is an ongoing project. There are still a few iterations on designs based on user testing to be implemented. It was a pleasure working with such a dedicated team and my fellow interns really stepped up in their roles to help bring this project to life. Gurveen was a beast at research, and Tolga was able to step in wherever he was needed to support everyone.