Improving Video Management in the Hudl Technique App
Hudl Technique is a video capture app that enables instructors and athletes to learn from and improve their form. For any activity where form is vitally important, Hudl Technique users have a variety of powerful tools at their fingertips. They can analyze every millisecond of a video, compare videos, and use editing tools to point out areas of focus or aspects to correct.
Context
Hudl Technique is a game changer for analyzing athletic performance, but the original design isn't perfect. Users have expressed frustrations with a few pain points that I was tasked with addressing.
Pain Points
- Managing videos could be better
- Finding a specific video is difficult
- There's no way to group videos
Task
Find a solution for organizing, filtering, sorting and managing video within the Hudl Technique app.
Discovery and Research
I started off by researching competing sports video apps like Coach's Eye, Dartfish and Sklz Cam in order to get a better understanding of user interests in sports video analysis and the pain points found in these programs. I also researched file management apps such as Dropbox, FileApp and Documents 5 to discover common usage of tools such as file tagging, search, sort, and folder creation.
Analysis
Of the sports video analysis apps I investigated, only Dartfish allowed users to both search and group their videos. Most of them had neither. In terms of file management, I found that grouping and sorting tools are essential for streamlining and organizing content. Hudl Technique could easily stand out from the competition by incorporating a few simple, yet powerful features.
Design Process
After the research phase, I delved into the Hudl app itself to find solutions for organizing, filtering, sorting and managing video.
My Primary Hudl Technique Redesign Points
- Search - Search all content for a tag, sport, athlete name, etc.
- Group - Group videos into playlists
- Sort - Quickly arrange video list by name or date
- Filter - Onscreen filter gives access to categories with one tap, instead of the current dropdown/select
- Improved Tagging - Add unlimited technique and athlete tags to a video
What I Kept in the App
- The video info dropdown gives users easy access to key information and actions
- The favorites function was a very useful tool to quickly find important videos
- The techniques tagging function is vital, but has room for improvement
Initial Design and Feedback
After sketching, I started mocking up my designs. I originally designed the search function as a pop out text box, as it gave the app a clean, stream-lined look. However, upon testing this feature with users, feedback indicated that they preferred a permanent search box, stating it was clearer and easier to use.
As Curt Arledge says in his article about search box variations, “The most universally recognized icon for search isn’t a magnifying glass, it’s a wide rectangular box.” I found this to be true in my testing as well.
Refining the Main Navigation
I went back to the drawing board and began playing around with arranging the search and filter functions in the app’s top navigation. By removing the filter function from the dropdown, it has become an important and highly-usable feature. I didn't want users to think that the segmented control bar was only meant to filter search results. For these reasons, I placed the filter bar above the search bar.
I used the iOS Segmented Control buttons for the filter bar because I wanted to create a usable and learnable action, so I based this feature on a tool that users would already be comfortable interacting with.
Mockup and Prototype
After I was satisfied with the main navigation, I focused my attention on the remaining features I had sketched out - filter, search, tag, group and sort. In each feature, I aimed to address the pain points that were outlined by the Hudl team. My ultimate goal was to improve the overall functionality of the app and, in doing so, to make the user's life better.
Filter Bar
I consolidated the functionality of the previous design’s dropdown menu into a user-friendly action bar, in order to create a more cohesive flow. By putting the filter bar at the top of the screen, I made managing, filtering and organizing videos the app’s main focus.
Search
Users can now search their entire library. Search is dynamic so that when the user enters text in the search field, Hudl Technique will automatically filter the data and group it into categories - Videos, Athletes, Techniques, and even Comments.
Tagging
With a few simple taps, users can now add an unlimited number of tags to each video. Improved tagging allows users to better identify their videos, and the athletes in them - which in turn will make this content easier to locate via the app's new Search feature.
Playlist from Filter Bar
Users can group videos into playlists by accessing the ‘Playlists’s tab on the filter bar.
Playlist from Video Info Dropdown
Even if they're on the field, users can create playlists on the fly. Adding a video to a new or existing playlist from the video’s menu is quick and easy.
Sort Popover
Users can order videos by date or name. I used an overlay for the sort function because it doesn’t take up valuable screen space and is easy to click out of.
Hi-fidelity Flows in Photoshop and Invision
Once I had my core functionalities laid out, I mocked up the user flow screens in Photoshop and created a prototype in Invision. I went back and forth between these two programs many times, tweaking my design and the user flow through the app.
Mocking up screens in Photoshop
Filter flow in Invision
Search flow in Invision
