(SUPERHERO Enjoys conversations, brainstorming, drawing, dancing and drinks a lot of coffee.)
CASE STUDY
End to end application
OVERVIEW
CASE DETAILS
CLIENT
MMA Fight Fan
TIMELINE
2 Weeks
OBJECTIVE
Create a complete application for Mixed Martial Arts (MMA) spectators. Research, design and test the applications ability for users to gain information about the sport of MMA. Assess the usability of the app for following fighters and promoters, purchasing tickets and locating events.
SUMMARY
MMA Fight Fan is an application that both a novice or veteran fan of Mixed Martial Arts would benefit from. It works by having one central place to easily follow fighters, gain information, watch videos, view statistics or purchase tickets across all of the leagues promotors and fighters.
Initial findings pointed to difficulties in following various fighters because they may be under contract by different promoters. Also, league rules and quick access to terminology definitions and visuals for newer fans didn't exist, so MMA Fight Fan wanted to bring that to their fingertips.
The MMA fight fan app solves the users needs with simple navigation, removing extra promotor fluff and marketing materials and bringing the main points of interest to the forefront. The app contains fighter information including statistics and videos; MMA rules and terminology and the option to save favorites for easy recall.
PROCESS
PRODUCT DESIGN FOR MMA FIGHT FAN
Research
Interview
Generative
Market Research
​
Strategy
Product Roadmap
Persona
User Flows
​
Interaction
Wireframe
Prototype
Usability Test
​
Interface
Logo & Brand
Style Guide/UI Kit
Responsive Screens
​
RESEARCH
I conducted a comparative analysis of current MMA Promotors to gain an understanding of the current apps and trends that are on the market. Over the years, fighters may switch promoters which makes following their journey rather difficult. The apps that are available only follow their prospective contracted fighters and are also flooded with marketing, news clips.
Interviews helped determine that I wanted the MMA fight fan app to focus on bringing information to the fans, regardless of the fighters current promotor. This, in turn would allow fans to utilize one app.
Finding videos of my favorite fighters is sometimes hard. I don't like having to go to youtube all the time, it would be nice to have it all in one spot along with their stats. I can't always remember what fight that it was I want to look up or who they fought against, so I could scroll thru them and then I'd see it and remember.
​
STRATEGY
Carlos, the target user for the MMA app, is a 32 year old male who lives in Kansas City. He's been a long time MMA fan and goes to the events when they come to the metro, as it isn't very often. Otherwise, he's watching them on TV at home or in a local spot with his buddies. His interest level in the sport is mostly social and he could benefit from easily accessible information.
​
With Carlos in mind, I generated ideas, sketched screens, refined, conducted usability tests and ultimately, decided on an interface that would bring the sport of MMA to life for him.
​
I'm not sure about the settings icon. I didn't think of it as a menu icon with the menu at the bottom as well. I guess it should be the lines (sic. hamburger menu) and I would have thought to look there for more things to do in the app. I wasn't thinking settings for additional pages.
INTERACTION DESIGN
Key wireframes screens were created and put together for moving forward with a mid-fidelity mock up to test on target users. The application was a big hit, the tasks were logical, and matched the users mental model. The feedback we received allowed us to make revisions on the hamburger menu, the color scheme and a favorites heart icon addition to the bottom footer.
USER INTERFACE DESIGN
The fan base for this type of sport is quite loud and boisterous and we wanted the app to match that energy. The original idea was to use a monochromatic green, however after the prototype testing, we decided to revise this. The look is more clean and concise now and has an airy feel to it while still being bold and prominent.
A deep red and gray color scheme is now being used along with a heavy, versatile, font. This is being offset with clean accordion style pull down menus to mimic current market applications. The text now has a modern feel and allow for better legibility. The suggested revisions per our synthesized data have been made and a new usability test should be conducted.