Kevin Chang Freelance UX Designer

Kevin Chang Freelance UX Designer

Contact me

Messaging tools for
sports teams

I led the design for messaging features at Hudl, allowing coaches and athletes to send messages, videos, and attachments to each other.

User Research UI/UX Cross-platform

About Hudl

Hudl is a leading sports technology company that builds video analysis and stat tools for over 3.5 million pro and amateur coaches and athletes worldwide.

Project Summary

At Hudl, I designed the messaging tools that facilitate team communication. These tools allow coaches and athletes to send and receive messages and share content through the Hudl platform. The messages are synced across the iOS, Android and web products.

My Responsibilities

Our team of six simplified the UX across all platforms, standardized the UI, and focused on improving speed. As the sole designer I was responsible for leading the team through the user research process, iterating on designs through rapid prototyping and usability tests, and creating the UX flows and final high-resolution visual assets.

Design Challenges

For the first release, we identified two types of users across different types of sports (large football teams with multiple coaches vs. smaller swim teams): coaches and athletes. Through interviews with local teams, this led the team to three overarching design challenges:

How might we create an expressive platform that accommodates different types of communication (encouragement, practice updates, media content, etc.)?

How do we ensure that athletes receive important updates but also prevent messages from interfering with classroom work?

How might we make the messaging platform secure to protect coaches and athletes?

Historical Context

Before we began revamping the messaging tools, Hudl had an existing beta feature that allowed coaches to send one-way messages to their team.

Because it was an in-progress MVP, there were some drawbacks:

  • The web and mobile UX differed, leading to some mismatched expectations
  • Messages sent on the web weren’t displayed on mobile
  • Athletes weren’t able to reply back to their coaches’ messages
  • Coaches weren’t able to tell if their message was received or read
  • The UI was outdated
Research Process

As we audited this feature and analyzed competing products, our minds spun rapidly with new ideas. However, to figure out what direction we should take and what problems were core to our users, we needed to start afresh. Some guiding questions came to mind:

  • How do our users communicate with their team today?
  • How are our users meeting their communication needs today?

The research process comprised several concurrent efforts:

  • Analyzing and following up on a backlog of customer support tickets
  • Reaching out to designers, PMs, and customer support at Hudl for anecdotes about coaches' communication needs
  • Identifying coaches and athletes to reach out to and for video and on-site interviews
  • Conducting a competitive analysis of products we thought that address our users’ needs (including email, SMS)

After conducting several user interviews and on-site visits, several trends became apparent. From this initial response, I began fleshing out common user scenarios and archetypes.

Research Learnings

The following insights proved most instrumental in informing our design decisions:

  • Many coaches rely on existing products such as iMessage to set up groups and communicate with their team
  • High school athletes hardly check email but are highly responsive to texting
  • Privacy is a key concern, especially for high school coaches
  • Coaches need to be reassured that their team is receiving and reading their messages
  • There are three main uses a coach has: 1) sending reminders about practice times, 2) requesting feedback from the team, 3) sharing training content with the team
Rapid Prototyping & Iteration

With these use cases in mind, we broke the messaging product into different flows: viewing all message threads, viewing a message thread, and sending a new message.

I led multiple sketch sessions with the team to mock up different solutions to each experience. From these low-fidelity mockups, I created higher-fidelity wireframes and flows that our team could show users for feedback. Tools such as Framer.JS and Pixate allowed me to quickly replicate complex animations and interactions. For nitty-gritty details and copy, I used Sketch plugins that allowed me to display JSON data to mimic how my designs would look like to actual users.

Product Principles

The user research and iteration process helped us form several principles:

  • Consistency: the UX should be familiar across all platform
  • Accessible at all times: we need to launch on all platforms so that all users can send messages regardless of their location or device
  • Speed: messages should not only be delivered quickly, but users should be able to do their key tasks quickly
  • Reliability: in a time of ever-increasing notifications, we need to build trust in coaches’ minds by ensuring that their team will receive their messages no matter what
The Result

Within four months, our team delivered an MVP with the following:

  • Allow coaches and athletes to message any individual or group on their team
  • Enable two-way communication between coaches and athletes
  • Share external training content such as Youtube links in a conversation
  • View read receipts for each messages
  • Available on iOS, Android, and web from day one

© Kevin Chang, All Rights Reserved