Main Event

 

Backstory

Boxing has a rich history as one of the world’s oldest professional sports, with many supporters and fighters across the globe. Following these events can be difficult because the information is fragmented. Even if you know the date and time of the event, you are still given little information about the event as a whole.

For example, if you’re really only interested in one fighter, what time is your fighter coming on? How many fights are on the main card? Who are the other fighters on the card?

The Main Event app’s goal is to answer those questions by providing users with a detailed schedule and more detailed information about those scheduled events.

Role

UX | UI Designer

Team

Jonathan Narvaez, Design


Tyler McDowell, Character Artwork

Project Length

April 2021 -

— Discovery

Where do boxing fans find the info they’re looking for?

Searching for a boxing schedule will give you the names of the fighters headlining the event, a date, a time, and a location if available.

Anything beyond that is kind of a struggle unless you want to search for items individually. Who else is fighting on the card? What time does the main event start? I know one fighter, but who is the other?

With the information scattered, I wanted to see where potential users are currently getting their boxing info first. Information is going to be cycled quickly, and any major announcement is going to be everywhere at once. So I wanted to specifically know where users generally see their boxing related news and information for the first time before it’s recycled to other outlets.

I was able to ask people I knew in person, plus get a nice reddit thread going (that has since been removed) asking people where they see their boxing related news and announcements for the first time. You can see that Twitter has a wide lead, but it should be even bigger. Reddit and Instagram posts are either a screenshot of the original tweet or a link to it. So I quickly realized that all of the major announcements were not only coming from Twitter, but from a single person.

Any boxing related news is really going through one person: ESPN boxing insider Mike Coppinger. If you follow him on any social media, there isn’t much that you can miss when it comes to boxing. If he doesn’t make an announcement himself, he’ll retweet and repost all the news from the major boxing outlets.

Because of the nature of boxing news coming from a single source, I was hesitant to have a news feature for the app. There didn’t seem to be a problem in getting access to news and announcements, but there was a problem keeping all of those announcements organized. I felt that there was more of a need for organizing access to scheduled events, and then providing further detail.

What is needed for a boxing app?

With the goal of organizing schedules and event announcements, I took a look at similar combat sports apps to see what they provided to their users. The UFC App and similar apps organized information in a way that I was looking to include in a boxing app. Looking over and comparing the following categories would help determine what was needed.

Upcoming Fights: Schedule of upcoming events when they are announced. Ideally, this page would lead to more information about the event including the entire fight card and comparisons of the fighters.


Fight Results:
Past events that have been completed. I’m looking for displays of punch stats, judge’s scorecards, maybe a round - by - round breakdown by someone watching?


News Section:
General boxing news. Section about fight announcements, weigh-ins, signings, etc. I feel pretty strongly about not wanting a news section, but I can’t ignore that the feature is prominent in similar apps.


Fighter Profiles:
A section that has more information on the individual fighter. Could be base stats like height and reach, include a list of previous fights to see how they’ve done in the past. Any upcoming events that they are involved in would be listed as well.


Fight Stats:
Before the fight, this section would have a Tale of the Tape on the fighters. Comparisons between them including height, reach, records, and other stats will allow users to form an opinion and choose a fighter they’d like to win.


Viewing Options:
Services the allow users to watch the upcoming events on the app itself.

UFC App: Unsurprisingly had everything that I asked for. The emphasis on individual fighters is a big influence. The Upcoming Fights section has comparisons between the fighters in the form of stats and previous fights. Previous events are also available, with stats like strikes landed and control time are displayed, telling the user the story of the fight.


Boxing Showtimes:
More of an event-based app. Has a complete schedule of upcoming fights including location, date, time, and how to watch. Doesn’t have the ability to watch the fights within the app, but clicking on the provided link will take you to the right place. For instance, if a fight being broadcasted by ESPN, the link within the app would take you to the ESPN site.


Fite.tv app:
Almost a dedicated viewing app with a schedule for upcoming events, where you can purchase the event and view it on the app. Previous events are listed, but there are no stats displayed. Interestingly, they have an On Demand section to watch the previously broadcasted event.


Boxing News:
Primarily a boxing news based app with an unexpected community element. Upcoming events are posted as news articles, so they’re mixed in the with the other news. The most interesting thing about this app, however, is that there is a message board with a up-to-date community. There’s only a handful of people, but they are discussing matchups and playing what looks like a season’s long game of picking matches. Like fantasy boxing. This is a really interesting twist on what I thought would just be a news app.

— Identifying Users

User types were identified by comparing users in similar apps and even fans of other sports. A user may only follow one particular fighter or all fighters from a particular country. There are also users that may only be interested in watching events in a social setting, using it as a reason to hang out with a particular friend group. The following user types would be kept in mind when implementing features or making design decisions.

Loyal: Usually a big fan of boxers from a particular country or region. The Canelo Alvarez fan may fall into the category. They are huge Canelo fans that will also support other Mexican fighters.

Daily: An everyday user of the app. They have a handful of favorite fighters that they keep up with regularly and will keep up with the events as they are announced. This user will want to check the punch stats and judges’ scorecards of previous events and will be up to date with general boxing news.

Casual User: These users may not be general fans of the sport, but they will watch major events if they know about them. They may not be boxing fans, but they will watch major boxing events in a social setting. This user would probably be more of a boxing fan if finding scheduling information was easier.

Bonus User, Artists: These are users that may be fans of the artwork. A big feature of the app that I had in mind were user submissions for the artwork for the fighters. One could be highlighted as the main picture, and the artist given credit through their socials.

What we learned from our users

Having a clear schedule for boxing events will allow each user to actually watch more boxing. This may allow them to plan social events, start following more fighters, or just level up their boxing knowledge. The original goal of providing a detailed schedule and giving users more information about the events was still on target.

— Organizing Features

Navigation

Because the nature of the app is to provide detailed information quickly, I had to figure out how to organize the information in a way that made natural sense to the user. Having easily understood navigation was key. I decided to split the information into four sections which would help users quickly find the information they needed to access.

The pages are split into four sections. The Upcoming and Previous sections contain information about the events, including schedules and results, while the Champions and Contenders sections contain information on the individual fighters.

— Design: Inspiration and low-fi

The style and overall feel is heavily influenced by fighting games. The versus screens displaying both fighters ready to face off is a common pose in boxing promotion and is a staple in fighting games. Having something similar while displaying key information about the event would make it easy for users to identify who headlining the event, while giving them other details about the event.

Versus Card

The versus card would show the fighters in the main event and details including the date, location, and the network airing the event. The background represents the city in which the event is held.

Upcoming Events

The event card displays all of the fights for the event. Clicking a card takes you to a page with more information on the event, including statistics between the fighters known as the Tale of the Tape.

Post Fight

The Post Fight section includes statistics for the fights including results of the fight, punches thrown and landed, and official judges’ scorecards.

Champions and Contenders

We’ve talked a lot about how to find information on events, both upcoming and in the past, but what about individual boxers? Separating title holders, popular fighters, up-and-comers, and challengers would be a challenge. I decided to reach back into the fighting game design and see how the fighters are categorized.

The Champions separates the current World Champion title holders by weight class. There are four World Title belts available per weight class. Tapping on a boxer’s card will take you to their Fighter Profile.

The Contenders page has non World Champions separated by weight class. They are in alphabetical order, and taping on a card will take you to the Fighter Profile.

Champions Page

Contenders Page

— Design: Mockup & Prototype

Design System

 
 
 
 
 
 

Mockup

The Upcoming section is the landing page for the app. The event cards depict the fighters headlining the event, as well as the city in the background setting the stage. For example, if the event is in Las Vegas, NV, the background will be the Las Vegas skyline.

Tapping on an event card will take you to a page listing the main event where you can access the Versus Cards for each of the event’s fights. From this page, the Fighter Profile can be accessed. It now has links to the fighter’s social media platforms if you want to follow them.

On the Previous page, the event cards are in black and white to more easily show users that they are looking at past events. Clicking on a card will take you to the event page with the results of the events displayed on each card at a glance.

Tapping one of the cards will take you to the detailed results of the fight with access to the punch stats and the judge’s scorecards, if available.

The Champions Page, with the four world champion fighters sorted by weight. Tapping on a tab will take you to the fighter’s profile.

The Contender’s page evolved quite a bit. It now has a horizontal scroll to make it easier to identify boxers by their picture and larger font.

— Walkthrough and Prototype

Here is a quick video walkthrough of the app in progress, and below that is the prototype that you can mess around with.

It works better on your phone, so try and use this link to access it here: Mobile Prototype

 

Prototype

Moving Forward

The Main Event app is still in progress and I’m thinking about plenty of features for the future. For instance, a live round - by - round report by someone watching the fight. It would be for users unable to watch the fight but still want to follow along, or for users looking to see the details of a previous fight.

Also, the more I look around at any boxing related news, I’m seeing plenty of conversation in the comments. People are asking about boxing group chats or something similar or nearly every post. So the need is out there, just need to think of a way to implement a social aspect in the future.


—— Other Work

Manufactured

Manufactured builds digital manufacturing supply chains to support the sourcing needs of brands, agencies, and enterprises in the new age of connected commerce.