OVERVIEW
Timeline
My Role
Overview
Overview
April 2024- June 2024
(2-months)
Monster Teaser League (MTL) is a fantasy sports startup with a mission to introduce a fresh, innovative game to the market. With a growing user base of around 1,500 users, MTL recognized the need to revamp its app to prepare for future growth.
Over the course of two months, my team of four embarked on an ambitious redesign project, diving deep into user feedback, behaviors, and pain points to create a modern, user-centric design that would elevate the overall user experience.
Design Lead - Creative
Workshops, Wireframes,
Usability Testing,
High-Fidelity Prototype,
Research
PROBLEM
Three Main Goals
Learnability
MTL receives high praise, but the game is hard to explain. This is a major issue for growth opportunity. We needed to create a quick, effective way to teach people how to play.
Commissioners Corner
To create a league, a commissioner is needed to manage it. Our clients wanted to simplify the commissioner's responsibilities as much as possible to ensure a smooth experience.
Intuitive Redesign
The current application has numerous navigation issues, and needs a modern look to compete in the current fantasy sports market. We needed to start from scratch.
It all began with a meeting where our clients laid out their primary goal: growth. From our discussions, we distilled the challenge into three core areas:
It all began with a meeting where our clients laid out their primary goal: growth. From our discussions, we distilled the challenge into three core areas:
PROCESS
Start
Start
Finish
Finish
Discover
Define
Develop
Deliver
PROBLEM
DEFINED
Ideate,
Prototype,
Test
IDEATION
DIVERGE
PROTOTYPE
CONVERGE
Understand,
Define
RESEARCH
DIVERGE
SYNTHESIS
CONVERGE
*INTERACTIVE IMAGE
Double Diamond Approach… Again!
Double Diamond Approach… Again!
Right from the start, we knew this redesign was going to be a tall task. The game of MTL has countless intricacies, so it was crucial for our team to not loose sight of our main objectives. To tackle this, we went back to our trusty Double Diamond approach to structure the project. Honestly, we had no idea what the step-by-step process would look like - there was no way to predict it! However, we wanted to understand current MTL users as much as possible, and this framework would allow us to do so.
Understand,
Define
RESEARCH
DIVERGE
SYNTHESIS
CONVERGE
Ideate,
Prototype,
Test
IDEATION
DIVERGE
PROTOTYPE
CONVERGE
Develop
Deliver
RESEARCH
User Research - Interviews
MTL has two types of users: players and commissioners (who are also players). We divided our research accordingly, conducting interviews with five players and five commissioners to address the unique needs and pain points of each user type. The insights we gathered closely mirrored our initial goals.
Users found the interface cluttered and navigation unintuitive.
The game itself is a lot of fun to play, but it is hard to explain. One user said "Eventually I just stopped telling friends because it’s annoying to do so."
Navigation + Learnability
PAIN POINT #1
The "Commissioner's Corner" within MTL isn't very useful. According to our interviews, Commissioners only use this section at the beginning of the season to invite players and at the end for final standings.
While the ability to communicate with the league is valuable, the current format is cumbersome and not user-friendly
Lastly, the Commissioners Corner just feels out of place - it almost feels as if you are using a different app all together.
Commissioners Corner
PAIN POINT #2
Both commissioners and players found the sign-up process tedious and confusing. It is tedious work for the commissioners, and confusing for new players.
Sign Up Process
PAIN POINT #3
Users found the interface cluttered and navigation unintuitive.
The game itself is a lot of fun to play, but it is hard to explain. One user said "Eventually I just stopped telling friends because it’s annoying to do so."
Navigation + Learnability
PAIN POINT #1
The "Commissioner's Corner" within MTL isn't very useful. According to our interviews, Commissioners only use this section at the beginning of the season to invite players and at the end for final standings.
While the ability to communicate with the league is valuable, the current format is cumbersome and not user-friendly
Lastly, the Commissioners Corner just feels out of place - it almost feels as if you are using a different app all together.
Commissioners Corner
PAIN POINT #2
Both commissioners and players found the sign-up process tedious and confusing. It is tedious work for the commissioners, and confusing for new players.
Sign Up Process
PAIN POINT #3
RESEARCH
Learnability Test
To effectively address the learnability issue of MTL, we needed to gather some relevant metrics. We invited individuals unfamiliar with MTL to explore the application and explain the game in their own words. We measured three key metrics during this process:
1. Time on task: How long it took participants to understand the game.
2. Pass or fail: Whether they successfully understood the game mechanics.
3. Ease of learnability: Rated on a scale of 1-5 by the participants.
We tested 10 individuals, and here are the results:
Average Comprehension Time
3m 19s
Ease of learnability on a scale of 1-5
2.4/5
Success Rate - no errors when explaining the rules.
40%
RESEARCH
Information Architecture
In order to tackle the navigation issues within MTL, we decided to layout the information architecture in a clear and concise manner. We highlighted the areas with overlapping information, and as you can see there was a lot. Additionally, a first glance shows that the pages don't seem to flow very well.
OLD INFORMATION ARCHITECTURE
IDEATION
Revamped Information Architecture
Our first challenge was to reorganize the information architecture. We created a global navigation system with five main pages: Dashboard, Game Day, Make Picks, Results, and League Info. This reorganization made the interface more structured and visually appealing.
NEW INFORMATION ARCHITECTURE
IDEATION
Learnability - Competitor Analysis
Instead of trying to devise our own method for teaching people how to play, we examined how industry leaders in the mobile application space handle learnability. We discovered a beautifully simple yet effective approach: telling a story. Inspired by this, we decided to create a story-like tutorial that guides users step-by-step through the game. This tutorial would be available both during onboarding and on the homepage for easy access.
IDEATION
Feature Prioritization
Less is more. That was our approach when contemplating the necessary features that needed to be implemented into this redesign. Based on our interviews with users and commissioners, here's what we landed on.
IDEATION
Sketching, sketching, and just a dash of sketching.
As the design lead for my team, I was determined not to take this step lightly. I passionately believe that sketching workshops are some of the most exciting and beneficial exercises in any project. So, we dove into three days of intense explorative sketching. The energy was amazing!
TESTING
Mid fidelity Testing
Although we were confident for our usability tests, we were pleasantly surprised by just how well they went. Users completed every task effortlessly and praised the new direction of the application. This step was incredibly rewarding, serving as a powerful reminder of why I love what I do.
USABILITY TEST RESULTS
TESTING
Tutorial Testing
This is the part I am most proud of. It may not look like much, but this tutorial took an incredible amount of time and effort to perfect. Explaining MTL can be quite challenging - even now, I still struggle to explain it to my friends. However, the results from testing our tutorial were outstanding, making this a massive win for our team.
Average Comprehension Time
1m 26s
60% Decrease
Ease of learnability on a scale of 1-5
4.3/5
39% Increase
Success Rate - no errors when explaining the rules.
100%
60% Increase
TUTORIAL SLIDESHOW
Gameday
The Gameday feature is a place for users to see how not only their picks are doing, but also how other players in the league are doing as well. Green is covering, yellow is close, and red is not covering. The more red you see with your friends, the better - root for red!
This is the part I am most proud of. It may not look like much, but this tutorial took an incredible amount of time and effort to perfect. Explaining MTL can be quite challenging - even now, I still struggle to explain it to my friends. However, the results from testing our tutorial were outstanding, making this a massive win for our team.
Make Picks
The picks tab is exactly as it seems - the place where playing go to make their weekly picks. The only thing we adjusted in the section was the ability to click into a matchup to allow users to get team info to better inform their picks.
Standings
Again, the standings page is exactly as you would think - a place to view weekly results and current league standings. We implemented clickable user profiles to allow users to see who their friends have been picking in the past. This was an idea multiple users found very useful during our user interviews and usability testing.
League - League Info / New Commissioners Corner
We wanted the league tab to be a place where all players could have access to info regarding the league rules, MTL gameplay rules, and player info. However, there is a portion of the league tab only accessible to the commissioner, allowing them to adjust league rules, contact players, make picks for players, and retire players.
I am aware that in a slideshow format these screens can feel pretty confusing. If you go the the main MTL file and use the "simple prototype", it is much easier to understand.
LEAGUE PAGE SLIDESHOW
PROTOTYPE
Quick Note
Framer is an amazing web-building platform, but I've reached my maximum file limit and cannot add more videos. Instead, I will provide slideshows for the main flows. To fully explore the MTL redesign, please use this link. I recommend using the "simple prototype" to get the best understanding of how the application truly works.
01 Making Picks
Users can opt to make this weeks picks, while also having the ability to view their pick history.
02 Results & Standings
Weekly results are front and center. See how you and your friends did this past week, while also noting who the top 3 players in the league currently are.
03 Gameday
View live and upcoming games. Click on cards to get more details about the game itself, and which of your friends have picked them.
DASHBOARD VIDEO LOOP
Dashboard
This is the landing page for your league. We wanted the dashboard to incorporate the three main functions users taking while using the MTL app.
STANDINGS PAGE SLIDESHOW
MY PICKS PAGE SLIDESHOW
GAMEDAY PAGE SLIDESHOW
REFLECTION
What I learned
Outline your goals early, and stick to them.
Taking on a project like this offers countless opportunities, challenges, and potential solutions. It's easy to stray off course and lose sight of the initial goals. Through this experience, I've learned the importance of keeping my objectives at the forefront of my daily tasks.
Make sure your decisions are backed by data.
Making decisions backed by data is crucial because it leads to the creation of products that are genuinely user-centered and more likely to succeed. Additionally, data-driven decisions make it easier for clients to understand and support your work.
NEXT PROJECT
RESEARCH
Learnability Test
To effectively address the learnability issue of MTL, we needed to gather some relevant metrics. We invited individuals unfamiliar with MTL to explore the application and explain the game in their own words. We measured three key metrics during this process:
1. Time on task: How long it took participants to understand the game.
2. Pass or fail: Whether they successfully understood the game mechanics.
3. Ease of learnability: Rated on a scale of 1-5 by the participants.
We tested 10 individuals, and here are the results:
Average Comprehension Time
3m 19s
Ease of learnability on a scale of 1-5
2.4/5
Success Rate - no errors when explaining the rules.
40%
OLD INFORMATION ARCHITECTURE
IDEATION
Learnability - Competitor Analysis
Instead of trying to devise our own method for teaching people how to play, we examined how industry leaders in the mobile application space handle learnability. We discovered a beautifully simple yet effective approach: telling a story. Inspired by this, we decided to create a story-like tutorial that guides users step-by-step through the game. This tutorial would be available both during onboarding and on the homepage for easy access.
IDEATION
Feature Prioritization
Less is more. That was our approach when contemplating the necessary features that needed to be implemented into this redesign. Based on our interviews with users and commissioners, here's what we landed on.
IDEATION
Sketching, sketching, and just a dash of sketching.
As the design lead for my team, I was determined not to take this step lightly. I passionately believe that sketching workshops are some of the most exciting and beneficial exercises in any project. So, we dove into three days of intense explorative sketching. The energy was amazing!
TESTING
Mid fidelity Testing
Although we were confident for our usability tests, we were pleasantly surprised by just how well they went. Users completed every task effortlessly and praised the new direction of the application. This step was incredibly rewarding, serving as a powerful reminder of why I love what I do.
TESTING
PROTOTYPE
Quick Note
Framer is an amazing web-building platform, but I've reached my maximum file limit and cannot add more videos. Instead, I will provide slideshows for the main flows. To fully explore the MTL redesign, please use this link. I recommend using the "simple prototype" to get the best understanding of how the application truly works.
Dashboard
This is the landing page for your league. We wanted the dashboard to incorporate the three main functions users taking while using the MTL app.
01 Making Picks
Users can opt to make this weeks picks, while also having the ability to view their pick history.
02 Results & Standings
Weekly results are front and center. See how you and your friends did this past week, while also noting who the top 3 players in the league currently are.
03 Gameday
View live and upcoming games. Click on cards to get more details about the game itself, and which of your friends have picked them.
DASHBOARD VIDEO LOOP
TESTING
Tutorial Testing
This is the part I am most proud of. It may not look like much, but this tutorial took an incredible amount of time and effort to perfect. Explaining MTL can be quite challenging - even now, I still struggle to explain it to my friends. However, the results from testing our tutorial were outstanding, making this a massive win for our team.
Average Comprehension Time
1m 26s
60% Decrease
Ease of learnability on a scale of 1-5
4.3/5
39% Increase
Success Rate - no errors when explaining the rules.
100%
60% Increase
TUTORIAL SLIDESHOW
RESEARCH
Information Architecture
In order to tackle the navigation issues within MTL, we decided to layout the information architecture in a clear and concise manner. We highlighted the areas with overlapping information, and as you can see there was a lot. Additionally, a first glance shows that the pages don't seem to flow very well.
OLD INFORMATION ARCHITECTURE
GAMEDAY PAGE SLIDESHOW
Make Picks
The picks tab is exactly as it seems - the place where playing go to make their weekly picks. The only thing we adjusted in the section was the ability to click into a matchup to allow users to get team info to better inform their picks.
MY PICKS PAGE SLIDESHOW
Gameday
The Gameday feature is a place for users to see how not only their picks are doing, but also how other players in the league are doing as well. Green is covering, yellow is close, and red is not covering. The more red you see with your friends, the better - root for red!
This is the part I am most proud of. It may not look like much, but this tutorial took an incredible amount of time and effort to perfect. Explaining MTL can be quite challenging - even now, I still struggle to explain it to my friends. However, the results from testing our tutorial were outstanding, making this a massive win for our team.
STANDINGS PAGE SLIDESHOW
REFLECTION
What I learned
Outline your goals early, and stick to them.
Taking on a project like this offers countless opportunities, challenges, and potential solutions. It's easy to stray off course and lose sight of the initial goals. Through this experience, I've learned the importance of keeping my objectives at the forefront of my daily tasks.
Make sure your decisions are backed by data.
Making decisions backed by data is crucial because it leads to the creation of products that are genuinely user-centered and more likely to succeed. Additionally, data-driven decisions make it easier for clients to understand and support your work.
NEXT PROJECT
League - League Info / New Commissioners Corner
We wanted the league tab to be a place where all players could have access to info regarding the league rules, MTL gameplay rules, and player info. However, there is a portion of the league tab only accessible to the commissioner, allowing them to adjust league rules, contact players, make picks for players, and retire players.
I am aware that in a slideshow format these screens can feel pretty confusing. If you go the the main MTL file and use the "simple prototype", it is much easier to understand.
Monster Teaser League
Monster Teaser League
Design Lead
App Startup
Sports Betting