SparkMySport

ROLE

Product Design Intern

DURATION

7 weeks | Summer 2021

OVERVIEW

SparkMySport is a mobile app that allows basketball players to build skills through receiving feedback from their trainers and a motion/position tracking AI.

TEAM

As the only designer on the product, I worked closely with these team members:
‍
Anand Hebbale: Founder/CEO
Bibin Sebastian: ML Engineer
Chandra Shekara: Full Stack Developer
Brandon Thomas: Basketball Trainer / Industry Relations

Skip to final product

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

CHALLENGE

How might we take basketball players’ skill to the next level though intuitive evidence based training?

Feedback from coaches in the development of specific skills are confusing and lack clear metrics or evidence to show progress.

That’s why the team at SparkMySport developed an AI model that tracked joint positions, angles, and body movement accurately regardless of the position and angle of the phone camera. However, they struggled to offer this tool in an intuitive user experience to trainers and athletes.

I was brought on the team to present these tools in an intuitive, well-designed app that fulfills the user objective of athletes and trainers/coaches.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

INITIAL PROBLEM STATEMENT

Feedback from coaches in the development of specific basketball skills are forgotten, confusing and lack clear metrics or evidence to show progress.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

RESEACH & DEFINE

Understanding the basketball skill training experience

User Interviews

To better understand the experience of building basketball skills with a trainer, I conducted 17 interviews with basketball players ranging from grade school to aspiring professionals as well as basketball skill coaches and trainers who conduct private training sessions with clients.

7

Basketball players

All working with a skill trainer

10

Skill Coaches/Trainers

Conduct private skill coaching

I created and used the following interview guides to ensure we were getting accurate and useful insights. The goal of the interviews was to understand the experience, motivation, and pain points of players and coaches in the process of building skills.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

Empathy Maps

I now had a bunch of user interview notes from trainers and players of various levels with various user objectives. In order to make sense of these, I divided the interviewees into 4 user personas and created empathy maps for each.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

Main Pain Points

After analyzing our user journey map to find the most pressing issues, we determined that the top pain points that users face are:

Difficulty grasping skills

When athletes try to learn skills, it’s hard to fully grasp their trainer’s instruction without carefully seeing themselves practicing the skill and understanding what they’re doing wrong

Unorganized and not interactive videos

When trainers record athletes, it’s difficult to annotate the footage, share annotated footage with their athlete, and store the videos in a way intuitive for skill building

Difficulty tracking progress

Athletes struggle to view their progress in building skills over time in an organized way.

Trainers validating their program

Skill coaches struggle to prove the effectiveness of their training programs to potential clients.

Maintaining accountability and communication

Coaches/trainers struggle to maintain accountability and consistent communication in regards to their athletes practicing between sessions

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

Revised PROBLEM STATEMENT

The process of learning specific basketball skills from a trainer lacks communication through visual evidence and the ability to view progress over time.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

IDEATION & PROTOTYPING

Ideating solutions based on our findings

Product Goals

Now that I deduced the main pain points in the experience of building basketball skills with a trainer, I determined that our product should allow users to:

Easily record, annotate, and save footage
Intuitively organize and share footage between client and trainer
View relevant metrics from videos like joint angles and vertical jump height and compare these metrics to the ideal for respective skills

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

User flow

At this point, I needed to begin thinking about what the actual experience will be. This was a challenge considering that the trainer and the athlete have different uses of the product. And there is so much intended functionality with these recorded videos including sharing, annotating, and organizing.

So after determining what makes the most sense for trainers and athletes respectively, I came up with these user flows:

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

Low-fidelity wireframes

How might we organize videos in a way that makes sense to athletes and trainers?

A dillemma presented itself when deciding whether to organize videos by the session or the skill category.

So we went back to our interviewees.

I found that trainers and athletes want to view videos by skill when viewing an athlete’s progress at a particularly skill.

However, they wanted to view videos by session when they wanted to see what the athlete has been working on recently or in a specific session.

So I decided to include both views, accessible through a toggle.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

How might we allow athletes to learn from footage through useful and easy tools?

The experience allows for users to easily record the athlete and use a variety of tools to draw, view in slow motion, and view joint angles and vertical jump heights. Though the functionality of marking up a video for basketball training is a pretty niche and novel experience, I incorporated elements of familiarity with common photo and video editing apps like the iPhones Photos app and VSCO.

I initially designed the metrics tool to have all of the joint angles on the screen at once.

However, I realized that this might cause analysis paralysis for the user, as they are being exposed to too much data at once.

So I did some online research and went back to the interviewees to find out what metrics matter to basketball trainers and athletes.

Here are the primary uses for these metrics:

Shot form - elbow, shoulder, and knee angles, vertical jump height for jump shots
Dribbling/crossover skills - angle of knee and hip bend
Defensive stance - knee and hip angles

None of these uses require all of the angles shown at once. So I decided to employ progressive disclosure and let the user select which angles they want to see so that they aren’t being shown irrelevant data.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

THE PRODUCT

Organizing, recording, and annotating videos to build basketball skills

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Content organized in a way that makes sense

By understanding the different use cases in which athletes and trainers would use the app, I organized the content in a way that is easy to navigate and conducive for different situations.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

Easy and familiar recording

The recording experience is incredibly simple to keep the focus on the subject being recorded. The interface is similar to existing mobile recording tools to create an easy, familiar experience.

introduction
CHALLENGE
RESEARCH & DEFINE
IDEATION & PROTOTYPING
THE PRODUCT
TESTING & VALIDATION
RESULTS & LEARNINGS

Save and organize videos quickly and intuitively

I decided to have the user tag videos with skills covered instead of organizing videos into folders or categories to make the experience quicker and because some videos may cover multiple skills.

RESULTS & LEARNINGS

Designing a high functionality tool for a quick and simple experience

Implementation

The product launched and is being used by hundreds of basketball trainers and athletes throughout the Bay Area. It’s been incredibly exciting to see my designs come to life and help trainers help athletes build skills.

What I Learned

Keep it simple stupid!

If you have different users with different goals, create different experiences for each user persona to optimize their experience for their objective.

Design information architecture around use cases

The organization of content should be the most intuitive for situation in which the user is looking for that content.

Communicating design thinking to engineers

The engineers built this impressive motion/position tracking AI and thought that the AI should be primary function of the product, since it was indeed the most impressive tool. However, I found that the users primarily needed a tool to record, annotate, and store footage of skills, and that the AI is a useful additional feature, but not the primary function. This discussion with the engineers helped me learn the art of communicating design thinking to developers.