Video Library
I looked over the old UI and started fresh. The font on the Hudl homepage (app) uses a font called trade which I cannot get so I used Oswald which is a very similar font although the letter spacing is a little different. This page does seem to do a lot of heavy lifting so simplifying it for the user is my first priority.
Version One
Full Image: http://samtoms.me/img/library/v1.png
Video List
The right hand list when full (according to a youtube video) is quite daunting at first and when you are working with videos I think it is so important to use thumbnails. Whilst adding thumbnails I thought it might be cool to give the user an overview of edits and a quick share function. As you may notice I also put a play icon in the top video to symbolise which video is playing. I feathered the text with a white fade to match the breadcrumb style.
Search is so important and can really improve the speed of which a user can complete an action. I saw a season title so I have provided the user with an option to select a season date to filter out the bulk of the videos. Search is then a simple autocomplete textbox with a search icon in the classic Hudl orange.
I have also added stats at the bottom to show a quick overview of the videos in your library and possibly attachments if they existed. I paid homage to the old layout and provided a list view for people that enjoyed the textual representation of the list.
Player
The play presents a bit of a challenge because it does not have the space for all the stats a user may want. I propose in the settings on the right of the player you can toggle which stats to show on the player. I used the Hudl orange to create a sleek progress indicator as well as showing the progress in the video list. As you can see the video playing is also highlighted in the bottom stats panel. I believe the video would go full screen when on mobile devices, with some nice UI to explore the videos.
Stats!
The stats section is now a simple fully configurable list with highlighting on hover. You can toggle which rows using the settings button on the right. To add a new stat row just type the name of a new column and hit enter. I thought it might be handy if the user could set max values and we could then provide a bar graph in the background of the cell so they can easily spot outstanding or terrible play.
Versions
I have done the two versions to outline how my designs are easily changed according to feedback or collaborative working. There are serveral differences which I will explain below.
Versio Two
Full Image: http://samtoms.me/img/library/v2.png
There are subtle differences in the layout that provide a completely different look and feel. Most noticeable is the stats bar on the video which has a Gaussian blur over the video. This allows for quite a neat layout however does distract from the video. My personal favorite is V1 because it creates an interesting space below the video that attracts the eye.
Manage Coaches
I looked at this what is essentially the first view when you sign up for the web app. I felt the tiny un-styled form at the top was really hard to use. First of all you have to guide your mouse into the tiny text fields. Then the form does not allow for any custom details that may be needed for a coach. I have added a few more details which I will explain next...
I have added some elements designed from the video library but i think this could be improved even further with more details and elements. For example perhaps we could add some stats on each coach or even gamify it a little and add awards badges/trophies.
I started by dropping the table based layout because it needed to have more details than what was currently on offer. The main requirement for me was to make the cards easy to scan which is why my first thought was to add profile images for each coach because humans are designed to recognise images quicker than text.
I also thought it would be cool to be able to add custom details to each coach. If the extra meta data was searchable then it would be super handy for the user to find someone who lives in the area or has medical expertise. I can only imagine that a phone number would be more important to a user than a coaches email address. Although that would be worth user testing.
All in all it has gone pretty well and I can see many ways in which this design can evolve.
