Overview
Monster Teaser League (MTL) is a new sports gaming platform that combines a pick 'em' style of play with elements of Fantasy sports games. They have gotten great feedback regarding the psychological aspect of the gameplay from current users, however the usability and learnability of the game itself has room for improvement. In preparation for the next football season, MTL is looking to grow its user base, improve its gameplay, and provide a better experience for its users.
I came into this project as 1 of 4 designers seeking to understand user’s needs and pain points in preparation for a redesign. Not long after we started the project, my role became focused on UI and creating phase 1 of MTL’s new design system: A component library.
I championed collaboration throughout the entire project, collaborating with my design team, the MTL founders, and MTL’s developer to ensure every stakeholder could give feedback on the new components as I built them, ensuring a solid iterative process. Keeping MTL’s need for scalability in mind, each component is made to be usable across any sport MTL adds to its portfolio of games (they currently only have NCAA Football, NCAA Basketball, and NFL). I also led our ideation initiatives that moved us into the design phase of the project.
Project Goals
Redesign the MTL site focusing on usability, learnability, and scalability.
Create a new design system that allows for ease of collaboration across stakeholders, creates a more consistent and streamlined experience, enhances scalability, and reduces friction for new and current MTL players.
Application Design
Research Methods
User Interviews
Learnability Testing
Usability Testing
Heuristic Analysis
Competitive Analysis
Key Research Findings:
Overly complex UI with redundant information and poor navigation hindered user experience.
Desktop-centric design resulted in unusable mobile interactions, impacting the majority of MTL players.
Users desired a more immersive and engaging gameplay experience.
Explaining the game was challenging for both commissioners and players.
New players struggled to understand original MTL gameplay mechanics.
Competitors effectively presented complex information through simple, interactive interfaces.
EX: Clickable and tappable interactions that presented more information when the user needed it rather than always having that information visible.
What in tarnation is a Learnability Test?
You’re probably saying to yourself, “Marc, what do you mean you did a so-called learnability test?” No worries, I got you 👊🏼.
We created a brief test to quantify how learnable the original MTL gameplay was for users. For this test, we had new users navigate to MTL’s “How to Play” section within MTL’s landing page. After users read the section, we had them explain to us what they understood from the gameplay. If what they explained was wrong, the user went back to the MTL page to identify what they missed or said incorrectly and re-explained the game back to us. Below are the metrics we tracked for this test along with the initial results:
“Yes AND” Workshop
“How Might We” Workshop
Design Studio Workshop
User Stories
Below are several sketches that serve as a culmination of all of our ideation workshops. We combined all of our ideas into final sketches that laid the foundation for the components that I would later create for the new MTL.
Ideation Methods
The User Interface: Before and After
Original Picks Results Page
New Gameday Page w/Pick Results
Original Results History Page
New Results History Page
Original Live League Picks Page
New League Picks Page
Component Library- Atoms and Molecules
Thinking of HTML structure, I broke down each larger component into smaller pieces to help ensure a smooth handoff to development. This process also helped ensure that the product had a consistent look and feel throughout the entire design.
Some atom components from the new MTL component library
Some molecule components from the new MTL component library
Component Library- Organisms
These larger components make up a vast majority of the UI for MTL and represent a large portion of what users will interact with throughout the app.
Key organism components for the new MTL
Key Components and Use Cases
Score Card
Purpose: Game cards communicate to users crucial information related to the upcoming, in progress, or finalized results of the live gameplay.
Picks Game Card
Purpose: Pick Cards are used when users are picking their teams for the next round of gameplay. The card shows important information like spreads, the favored team, and team names and logos.
Team Picker
Purpose: The Team Picker shows the teams that users have picked for the current round of gameplay. As users select teams, their selection will appear in the team picker. Once all 4 teams are selected, the user will see a “Picks Completed” indicator appear within the picker, letting them know their picks are locked in. Users can delete a pick from the picker and make a new selection as long as the first game of the day hasn’t started.
Live Picks Card
Purpose: The live picks card shows the user the selections of the opposing players for the current round of gameplay and how those selections are performing live. If a pick is not covering, the pick label will be red. If the pick is covering, the pick label will be green. If a game with an opposing player’s pick hasn’t started, it will appear in a hidden and locked state, indicating that this pick is not live yet.
Results Card
Purpose: The results card shows the user the pick results for the current round of gameplay, after that round of gameplay is completed. This appears in the profile drawer of the user or an opposing player.
Game Drawers
Purpose: The Game Drawers show information for the teams and the actual game. When a user taps on a Score Card component, the Game Drawer appears as a more detailed view of that game. Added details include the following:
Game time and location
Live gameplay information
Time remaining
Downs and distance
Team record and MTL record
History for each team or Live Picks Cards for all of those with a stake in the game.
Profile Drawer
Purpose: The Profile Drawer shows a user the MTL team information of a player, the player’s position within the game and their record, the amount of MTL Points a player has, and the player’s pick history throughout all of their MTL gameplay for this game.
Results
We received overwhelmingly positive feedback from users after usability testing and our final learnability test. Users felt like everything they needed was easy to find and the UI was easy to use. Newer users felt that the new tutorial made learning the game easy. Below are the results of our final round of learnability testing.
