East Coast Hockey League App Redesign

My team and I redesigned the ECHL app to be more engaging and to give it a more modern, updated feel.

The ECHL App

The ECHL App features stats, schedules, and general information about the league. Additionally, users can select a specific team to follow. The app lacks visual elements such as photos and images, however, and it directs users to external sources for much of the information users would generally want to access quickly.

Research

First we conducted a competitive analysis and heuristic evaluation of the ECHL app and determined that the ECHL's competitors had sleek, modern looking designs that featured many large, clickable images and videos, as well as dark mode settings.

Research Plan

Initially, we wanted to incorporate as many features into our design as possible in order to appeal to a wide array of users. So we decided to research the problem from multiple angles: sports fans as well as non-sports fans.

Surveys

We conducted 2 surveys to get a broad sample of sports-related data from the two sets of potential users. We envisioned a scenario in which our proto-personas were in a relationship together.

Affinity Diagram

As we gathered data from both the surveys, one of the tools we used was an affinity diagram to help determine insights about potential users.

Key Findings

Our data suggested that sports fans dedicate a significant portion of their daily routine to using sports apps. They actively track scores and other statistics, and enjoy watching highlights via videos. Non-sports fans, on the other hand, find enjoyment in attending sporting events, but typically aren't deeply involved in understanding the game. They will make efforts to participate and will learn the basics for the sake of their partner, however.

Proto-Personas

Sports Fan

Non-Sports

Fan

Next, we created two proto-personas and fully fleshed them out using the data and insights we had gleaned from our research plan. We also began considering what features we could incorporate in our redesign to appeal to both sets of users. It was as this point that we started to feel that the scope of our project might be getting away from us.

The Pivot

After careful consideration, we opted to concentrate our efforts on a single target audience to prevent scope creep. Given time constraints, we wouldn't be able to adequately cater to both target audiences in our design. So going forward, our focus would be the sports fan.

Problem Statement

"How might we redesign the ECHL app so that hockey fans are able to get news, stats, and highlights from their favorite team in a way that is simple and visually appealing?"

User Journey Map

For Darrell's user journey, we envisioned that his team is playing for the league championship, but Darrell is unable to watch from home. He is delighted to be able to watch the games on the redesigned ECHL app, however.

Feature Prioritization Matrix

Now with a solid grasp of the user journey, we started the ideation process for possible features for our redesigned app, and we organized our ideas onto a feature prioritization map. Some of the features we wanted to incorporate were up to date stats, game highlights, in-app watch feature, and custom team homepages.

User Flow

The path to what Darrell wanted most--videos and imagery--would be short and as uncomplicated as possible, allowing Darrell to quickly find and consume his content.

Paper Sketches

In the initial sketches, we focused on giving the user many big, colorful videos and images that would focus on the action of the game. This layout would convey excitement and draw in users and keep them engaged with the app.

Style Tiles

ECHL Homepage

Team

Homepage

Next we created style tiles to be our guide for stylistic choices, making one for the ECHL homepage and another featuring the color palette for the Cincinnati Cyclones. Both style tiles were similar and would visually coordinate, the main differences being the logos and color palettes.

Navigation System

Main Header

Team Header

Account & Settings

Header

Tab Bar

We kept simplicity, usability, and moderninity in mind as we designed the navigation system. We wanted it to be appealing to Darrell and to feel second nature to him as he navigated to the content he desired.

LoFi and Mid-Fi Prototypes

LoFi

Mid-Fi

Cont...

The LoFi and Mid-Fi prototypes start coming together. We focused on staying true to our original vision of incorporating exciting videos and imagery with a modern layout.

Usability Testing

As we conducted usability tests, it became apparent that one of the testers' pain-points was finding the dropdown menu. As a result, much of our effort in making enhancements was dedicated to improving the navigation experience, particularly when it comes to accessing the team pages.

Final Prototype

At the conclusion of this project, we were pleased with the testers' reactions to the final prototype. One of the testers who is familiar with the ECHL said (unprompted) that they preferred our redesign to the actual ECHL app. Future states might include giving users the ability to create a profile to save their preferences, as well as being able to purchase game tickets and merchandise via the app.