Bellator MMA

Mobile App Redesign, 2016-17

Bellator is a leading Mixed Martial Arts organization available on TV to 500 million homes worldwide. In Fall 2016, Viacom hired me to lead the UX/UI redesign of their mobile app. The goal was to give fans on-the-go video access to live events, increase viewership and revenue streams, and further solidify the brand.

My Role: 

  • Product Strategy
  • IA/UX/UI Design
  • User Testing
  • Design Production

Leveraging existing platform to build a new experience

I began my UX process by absorbing as much information as I could about the sport, the league, and its fans. The business and product teams provided me with an initial outline of requirements which I used to start thinking about the IA.

One initial challenge was our app needed to be built on Viacom’s existing platform. However, it was designed and used for TV shows and episodes, not events and fighters. I spent time analyzing and sketching out how this might work. 

Early sketches

Focusing on what’s important

As we worked out how to use this platform, I created initial wireframes of the app architecture and functionality and reviewed them with the business and product teams to see if they made sense. We went through several iterations and made discoveries.

One significant change I made was how the home screen was designed. It was originally thought of as a large carousel of curated content which we liked for editorial flexibility and visual impact. However, it lacked structure and focus around the events—central to what Bellator is all about. 

I created a new layout that placed content modules within containers—trending news, upcoming event, and past event. It made it clearer which event was happening and what each piece of content was related to. 

Event Detail and Fighers screens

Updated phone wireframes with new Home screen

Reinforcing the brand

The fans know the league by the fighters, so we created a simple interface using big photos and minimal design elements. I consulted with Bellator’s art director to explore icon style, color, and type use. A custom icon set was designed for the core nav and we used a simple color palette from Bellator’s brand. I also added a custom font for headings that gave the app personality. The feel of the design was brought to life with animation prototypes.

Iconography designs

Phone UI comps

 
 
 

Improving on the product with user testing

After we built prototypes, we conducted user testing. I helped develop a script of questions and tasks related to areas we were uncertain of. It included questions on general topics like ease of use and content, as well as specific tasks related to events, fighters, and videos. The overall feedback was very positive. 

Two key insights surfaced from the interviews: 

  1. Users were surprisingly focused on the fighters they recognized and liked. They liked the idea of a personalized app based on their favorite fighters similar to apps like ESPN and NBA.

  2. They wanted to use their phone primarily to watch videos, and they preferred viewing short clips on the app, and saving full events for TV and desktop viewing.

In response to the findings, I made some revisions:

  1. We prioritized fighter favoriting by moving it to the top of the home screen and prompting the user to pick their favorites when launching the app for the first time. 

  2. On home, we also added a section that allows users to discover videos based which fighter and styles they liked. 

  3. In detail screens, we promoted video tabs to the front position so users could access videos faster.

Learning from the process

There were a couple important lessons from this project.

  1. It’s good to test with users as early and often as possible. It helped us gain key insights we otherwise wouldn’t have on our own. If we had tested in the beginning, we would’ve arrived at solutions faster.

  2. Give stakeholders visibility into the design process often, especially when defining and solving new problems. We had a particular problem of how to present live events to users on a mobile device—including when and how to notify them, as well as take them through the authentication flow. When we let business members interact with designs often, it brought clarity to issues and made problem solving more efficient.

The app is currently being developed.