Bellator MMA

Mobile App Redesign, 2017

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

My Role: 

  • Product Strategy
  • UX/UI Design & Prototyping
  • User Testing
  • Asset Delivery

Leveraging the existing platform to build a new experience

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 the 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 mapping how to use the existing platform

Focusing on what’s important

As we worked out issues with the platform, I created initial wireframes to review with the business and product teams to see if they made sense. We went through several iterations and made some discoveries.

One significant change was how the home screen content was organized. It was originally conceived of as one single carousel of curated content. And while everyone loved the flexibility of it, it didn't make sense over time because everything Bellator revolves around their live events.

A new layout was created with distinct content modules—Upcoming Events, Past Events, and Trending News. This made it clearer which event each piece of content was related to.

 

Our home screen idea—a carousel of curated content

Other sections: Event Screens and Fighter Screens

Phone wireframes

Reinforcing the brand

In order to focus on the fighters and event art, we created a simple interface using big photos and minimal design elements. Working alongside Bellator’s art director, I explored iconography, color, and type that made sense. A custom icon set was designed for the core nav and we used a simple palette from Bellator’s brand. I added a custom typeface for headings that gave the app personality. I also created motion studies to see if the feel of the design was right. 

Custom icons created for the app; Brand typefaces and colors were used.

Phone UI design

Full phone UI comps

Motion Studies

 
 
 
 

Improving the design with user testing

Towards the end of UI design, I created Invision prototypes and we conducted a full day of user interviews. Overall feedback from participants was very positive, and great insights.

  1. The majority of users were focused on fighters they recognized. They expressed desire for a more personalized experience, similar to how apps like ESPN and the NBA let you choose a favorite team, and then tailor your experience around that.

  2. Users only liked watching the shorter video clips on their phones, while saving full and live events for desktop and TV.

Based off these findings, I was able to make some iterations on the design prior to development.

  1. We moved fighter favoriting to the top of the home screen, prompting users to pick their favorites when launching the app for the first time. 

  2. We also added a section for discovering videos of fighters with similar fighting styles to their favorites.

  3. In the navigation, video tabs were set as moved to the first position so users could access videos faster.

Learning from the process

There were a couple important lessons from this project:

  1. User testing, especially early in the design process, is invaluable. Had we done ours sooner, the insights gained would’ve gotten us to the final solutions faster.

  2. Giving stakeholders more frequent visibility into the design process helps when defining and solving new problems. Our organization had never presented live events on a mobile device (which includes unique considerations about notifications, authentication flows, etc.). Interacting with business members regularly brought us clarity and solutions more efficiently.

The app is currently being developed.