Court Vision
Create and Share 🏀 Highlights Effortlessly with Machine Learning
Court Vision is a machine learning-powered mobile app that digests raw basketball footage and outputs highlight clips of made baskets which you can share with groups of friends.
TEAM
MY FOCUS
1 Product Lead
4 Engineers
2 Designers
-
Designed core feature allowing clip processing, selection, and sharing
-
Designed member organizational structure mimicking real-life player relationships
-
Constructed and maintained design system emphasizing reusability and modularity
MY ROLE
IMPACT
User & Market Research
Design System
Wireframing & Prototyping
Product Strategy
-
Core flow reduced highlight generation time 1.5 hr → 30 min (-66%)
-
Reduced clip selection flow abandonment rate 37% → 9% (-28%)
-
Reusable component adoption in design and development reduced design-eng handoff/mismatch sync time per cycle 120 → 45 min (-62%)
"You play ball?"
Turns out, many young professionals in major cities do.
We spoke to seven of them.
_gif.gif)
Share basketball memories with friends and family
They want to
Get better
at basketball
Send their clips
to friends and family
Watch their form
through video playback
To do that, they need to
But...
Links get disorganized and lost in various chats
There's a lot of downtime and irrelevant footage
in raw game videos
Research revealed
USER INSIGHTS
Editing raw footage takes
a lot of time and effort
Friendships are made and strengthened through sharing clips
MARKET INSIGHTS
No basketball video analysis solution for
amateur players
No central platform for viewing, sharing and discussion of highlights
The question
How might we assist amateur basketball players in creating and sharing basketball highlights efficiently?
The solution
Drastically reduces
time and effort spent on clipping highlights through machine learning
Provides a central location for viewing and sharing basketball highlight clips
Strengthens friendships on and off court through basketball clip sharing
Frees up phone storage by editing down raw footage
into highlight reels
Sounds like a fairytale so far right? If only...
CONSTRAINTS & PROBLEMS
STRATEGIES TAKEN & LESSONS LEARNED
With limited engineering power, I strategically narrowed the technical scope towards a tightly-defined, proof-of-concept MVP.
This meant I had to lean down our designs while making sure that future iterations would integrate smoothly.
Narrow technical scope and limited resources
Due to our narrow technical scope, seemingly simple elements such as live search were extensively evaluated for whether they were truly necessary right now.
The design team took on the role of setting the product roadmap by using the mindset of Product Over Features.
Design-Engineer delay
When the engineering team requests a specific change, my design modification might still not be what the engineers are looking for. This game of Slack/Figma tag significantly slowed our progress.
To address this delay, I proposed a batched design-engineering sync where we would review designs and talk through limitations together.
UPLOAD & PROCESSING
I have a 20 minute game video, but I just want to see made shots!
Core Experiences
While we intend to support video hosting in the future, the current iteration requires videos to be uploaded to Youtube.
However, this means that any video that the user finds can be clipped, and they aren't limited to videos they took themselves.
It is a working solution that could complement the future capability of uploading from camera roll.
Design Notes: Trade-offs with engineering
Facing time and resource limitations, the engineering team decided that throughout the app, updates would be triggered upon user interaction (tab switch or refresh) instead of pushed to the user automatically. Users may commonly expect push notifications, and I didn't want them to wait for an update and be frustrated when it doesn't come.
Thus, in keeping with the Visibility of System Status heuristic, I communicated through subheading text and toast message to let the user know what action they need to take to monitor the status of their upload. On screens with a background action, I was able to reduce misclicks by 15%.
I got all these cool clips, I want to share them with my friends!
EDIT CLIPS & SHARE TO GROUP
Our machine learning algorithm does its best to return clips of made shots. Before sharing to a group, the user can preview the clips.
In the event a false positive is included, or the user simply does not wish to keep a clip, they may choose to exclude it from the final compilation.
The decision is editable before posting.
The belief that sets our product apart is that sharing clips strengthens the community overall. This emphasis on the community aspect is reflected in the structural design of our app. Clips are meant to be shared with the people you played with. Therefore, the editing sequence begins with assigning the clip compilation to a desired group.
*It is possible to create a group with just the user in it.
Design Notes: Guiding users through a complex interaction
To do so, I made sure that choices were reversible throughout and that there were clearly marked exit points. I also employed visual hierarchy and progressive disclosure to indicate the immediate next action for the user to progress in the flow. By reducing the cost of mistakes, I hoped to reduce friction and drop off for users. Over iterations, I raised 28% in task completion.
Selecting clips after ML-processing is the most central flow of the app that makes the entire UVP possible, and it involves many steps and decisions. Therefore, I wanted the experience to be as smooth as possible, in the hopes of driving user adoption and engagement through communicating its value.
I'd like to see how my friend is playing lately!
FILTER BY PLAYER
Oftentimes, different players show up on different days within the same pickup friend group.
If the uploader couldn't recognize or remember the scorer of a specific shot, they can leave the field blank, and members of that group can tag the scorer post-upload.
Using modular components, I was able to deliver on concepts with a quick turnaround, and I also cut down time spent on handoff and mismatch syncs by half.
Working closely with the engineers throughout the entire process, I learned quickly that having a consistent design system with reusable components not only provided visual cohesion, it also enabled faster development.
Design Notes: Prioritizing reusability and modularity
Feel free to play around!
To recap
MISSIONS ACCOMPLISHED
✅ Tailored my solution to the unique needs of amateur pickup players
✅ Drastically reduced time spent on editing and compiling highlight clips
✅ Created a unified platform for sharing and viewing basketball clips
Future
FAST FOLLOWS
DISCOVERABILITY
ML IMPROVEMENTS
Building upon our intentionally minimal MVP, in the future we plan to support more basics:
-
Live search
-
Video hosting
-
Push-based architecture
As our user base grows, we will explore more ways for users and groups to connect:
-
Ability to see a group's videos without being a member
-
Ability to "follow" groups or players
Our engineers are developing our Re-ID algorithm, which attributes a player to a made basket. For our users, this means:
-
Ability to tag a player just by a picture, instead of watching the entire clip
