Marco M. - Director / Product Designer

BELLATOR

Bellator needed a brand new mobile and desktop experience to support a wide range of devices and audiences.

They were now on a global stage and needed a modern website to scale the brand and it’s fan base.


- ROLE

Product Designer


Viacom

- COLLABORATED WITH

  • Product Development
  • UX Design
  • Engineering

  • Brand Design

- DATE

  • 2016

Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

BACKGROUND

Bellator MMA™ Bellator is a leading mixed martial arts and kickboxing organization featuring many of the best fighters in the world. Bellator is available to nearly 1 billion people world wide in over 160 countries.


Along with making the site re-design fully responsive we had to rethink the messaging, site structure, and UX. We also developed the Bellator On-Air Brand for digital. The new site stays fresh weekly since it launched in 2015. 

APPROACH

The information architecture of the site was kept simple and focused, Events, fighters, videos, news, shop and app.


A strip under the hero would feature a countdown to the next Bellator even to increase fan anticipation. As you scrolled down the homepage you would see high quality artwork associated to each featured event.


The homepage was focused and would quickly bring fans to watch fights or find out about their favorite fighters.

HOME PAGE & FIGHTER PAGE MOBILE

WRAP UP COMPONENT ON HOMEPAGE

HOMEPAGE LAYOUT

A magazine style homepage layout would give fans the same feeling experienced in the ring and would open up each event with a large action photo that would lead fans into the action of the night.

PROCESS

We worked closely with the product manager and the UX designer to establish proper hierarchy to the homepage which included a carousel featuring the latest events and the associated key art to reinforce the brand design.


The site would surface a larger archive of fighters across the Bellator universe that included Women fighters alongside the men. Each fighter included a full fight history and fighter highlights. The idea was that a fan could research a fighter and always be a step away from watching them in action.

WRAP UP COMPONENT ON HOMEPAGE

VIDEOS HUB

BRAND

CREATIVE

We worked with the Bellator brand design team to update and interpret a mostly print based system into the digital space. We built one of the first design systems for our team that included web safe fonts, and colors, SVG iconography.



Web Safe Fonts Factoria, Titillium Web, and Heroic

Some of the components we outlined as part of the redesign.

MOBILE FRIENDLY

The Bellator site increased usability across a wide range of modern devices. Previous to the new design the site offered a sub-par experience on mobile and tablet devices. 

INFO

We worked closely with the product manager and their UX designer to establish proper hierarchy to the homepage which included a carousel featuring the latest events and the associated key art to reinforce the brand design.


The site would surface a larger archive of fighters across the Bellator universe that included Women fighters alongside the men. Each fighter included a full fight history and fighter highlights. The idea was that a fan could research a fighter and always be a step away from watching them in action.

ARTICLE PAGE