Hudl Design Project

Throughout the process of working on this design project, my goal was to make a simple mobile app for volleyball coaches and athletes to easily view game films along with their associated stats.

Studying game film is a crucial part in helping teams succeed and win games. So for me to better understand what I had to do, I immersed myself into the minds of those users and thought about what kind of tool would help me and my team win.

First, I needed to understand the sport of volleyball and how the game is played. I read through volleyball forums and watched numerous game videos. I noticed that a team’s overall stats were really just a collection of each individual player’s stats. For example, during a single set, a team uses a combination of hits before returning the ball to the other side of the net. These combination of hits make up the players’ stats and inturn the number of sets, spikes, kills, etc.

Once I felt that I understood how the game is played, I dug into how to create an app for coaches and athletes to study these stats in order to win. I studied the existing Hudl app as best I could from the information given on the website, as well as other sports related apps like SportsCenter and FIFA. I gathered numerous ideas for features and layouts, then evaluated which ones would make sense for a volleyball app.

I wrote lists upon lists of ideas. Each idea had it’s own set of actions and views associated with it. Once I had everything on paper, it was time scale down. I broke the best features into two different apps, one for coaches and one for athletes. Both apps would have their own navigation separate from the other, with the coaches’ app having more functionality and permissions, as well as more features to capture, tag and highlight videos, while athletes would just be able to view and share.

In order to come out with an “MVP” version of my app, I scaled down once more. I combined the best of my two original app ideas into one app with the main goal of viewing videos with separate clips that included game stats. My navigation became: Home, Video, Capture and Exchanges.

The Home screen is just a dashboard/simple profile view with a main image and content indicating the school and sport along with recent videos to view and a countdown to the next game. The Video screen, which is the main focus, displays a list of videos from the season which can be tapped for further details including clips and stats. The Capture screen would access a device’s camera to instantly record a game, and the Exchanges screen is where users could share those videos with other coaches and athletes.

In addition to the mockups I created in Photoshop and my HTML and CSS prototype I’ve also included scans of my sketchbook where I drew out some wireframes and user flows. Enjoy!