Letter.png

Hudl Manage Columns Redesign

Visual Design | Interaction Design

Background

Hudl has had a large focus on broken windows lately, so I wanted to focus on an aspect of our interface that looks particularly dated. Manage Breakdown Data is used to manage columns (used to enter breakdown data, such as formation, play type, etc.) for American Football users. As the page predates the existence of Hudl’s design system, it would need to be redesigned to be compliant with our design system, Hudl Uniform.

I interviewed internal support representatives to get a feel for what questions they frequently hear about the page, and what tasks users usually look to accomplish on this page. I kept the scope fairly tight, focusing on visual design more so than interaction design.

Research Insights

  • Users largely see information they'd like to edit in their Library page (where they can consume both video and data), and only navigate to this page once they've decided they need to edit data or delete a column.

  • Most teams have been using Hudl for 7+ years, and their column list can become bloated, long, and difficult to navigate.

  • Users frequently clean up break down data at the beginning of the season and/or during periods of staff turnover.

  • Who created the column is important information to know, as it differentiates between columns that can be deleted vs. Hudl default columns, and users need context around who created a column to determine their comfort level with editing or deleting a column.

Current Manage Breakdown Data Page

Tablet.png

Proposed Redesign

Manage Columms Redesign.png
  • Edit has been pulled to the top layer for each column, as the primary reason users visit this page is to edit columns rather than explore.

  • Filters and a search have been added to allow users to easily sort through long column lists.

  • Values are now able to be edited without individually selecting each value.

  • Permissions around columns are more explicit, and an additional permission has been added. Currently, users need to select which columns (if any) they'd like to send with an exchange each time they exchange film. However, most users have columns they regularly exchange and columns they never exchange. This allow column exchange settings to be set on a per team basis.