INTRODUCTION

I designed FantaZscores, a dynamic web app that provides fantasy basketball enthusiasts with useful tools to craft their best possible fantasy basketball team.

The final product was launched in October 2022, and has since gained over 800 active users and exceeded initial sales projections by over 300%.

CLICK TO JUMP TO SOLUTION

My role

01 OVERVIEW

02 DISCOVERY

03 IDEATION

04 SOLUTION

05 IMPACT

Click to navigate to the section

01 / 05

OVERVIEW

🏀 What is fantasy basketball?

Fantasy basketball is an online game where participants act as general managers of a virtual basketball team based on players from the NBA. Participants select their players in a draft and manage their team throughout the season. They then compete in weekly matches against other participants and points are awarded based on the real life performance of their players.

The early vision and how I got involved

My involvement with FantaZscores starts with a conversation I had with my friend Matt about placing last in our fantasy basketball league. After hearing me complain, Matt (a software dev) told me about how he created a z-score model to help draft his teams. I was fascinated. He mentioned that he was thinking about turning his model into a web app and I was sold.

Quickly we realized that strong user experience and nice visual design would be major competitive advantages in the fantasy basketball web app space - a huge opportunity.

THE OPPORTUNITY

Large and growing market

The global Fantasy Basketball Market is projected to grow from USD 3.8 billion in 2021 to USD 6.7 billion by 2030, at a Compound Annual Growth Rate (CAGR) of 12% during the forecast period (2021-2030). Source: https://dataintelo.com/report/global-fantasy-basketball-market/

As the industry continues to grow, supplemental services (like web apps) that help enthusiasts gain an edge over their competitors will become increasingly popular.

The projected growth of the Fantasy Basketball market (dataintelo)

Web apps are in prime position

Web apps that assist participants with their fantasy basketball strategies have been increasing in popularity as the market has grown. However, almost all of these web apps have dated and poor user-experiences, clunky user-interfaces, and lack a depth of features. Fixing a lot of these issues could propel our web app to the forefront of the market.

THE PROBLEM

Users find it difficult to develop draft strategies

The goal of fantasy basketball is to draft the best possible team of players. To do this, users rely on a multitude of historical statistics to inform them of which players to draft. There are many of these stats and so it can be difficult to implement an effective strategy. Therefore, many users rely on web-apps to assist them.

Fantasy basketball web apps are statistics-heavy and poorly designed

Fantasy basketball web apps display many stats via large spreadsheets. This can make it difficult for users to acquire the information they are looking for when utilizing web apps to formulate a strategy. Because there is so much info on display, almost every current web app feels cluttered and poorly navigable.

GOALS

Design a fantasy basketball web app that helps users find the best drafting strategy.

Create a strong user experience, functional user interface and pleasant visual design

02 / 05

DISCOVERY

RESEARCH

Competitive Analysis

To begin the research process, I signed up for Basketball Monster and Hashtag Basketball - the two leading fantasy basketball web apps. Both these services occupy the majority of the market. I then conducted two mock drafts using each service, to fully understand the strengths and weaknesses of both products in their most common use-case.

I wanted to answer three main questions:

How is the product’s overall user-experience?
How does the product handle punting categories? (see below for explanation)
Is the product helpful for my draft?

*IMPORTANT CONTEXT: Punting Categories

Most fantasy basketball leagues are scored based on whose team performs best in 9 basketball categories (points, assists, rebounds, free throw %, etc).

The most common strategy in fantasy basketball is to “punt” a category, which means to draft players who are poor in ONE category but strong in the OTHER EIGHT.

Punting is powerful. I try to punt free throw percentage each year. However, figuring out which players to select for my punt strategy is where the difficulty lies. This is where web-apps come in.

If you draft Giannis, you'll want to punt "free throw %" as he is terrible at it but great at everything else.

Hashtag Basketball

USER-EXPERIENCE

After my mock draft using Hashtag Basketball I started by reviewing the product's overall user-experience. Creating an account and logging in felt intuitive. I then moved on to the player rankings and core draft-tool page, which is where the frustrations began. I quickly outlined some things I noticed, as shown below:

Hashtag Basketball's player rankings which make up the core draft-tool

At first glance, Hashtag Basketball's draft-tool had a nice general design. Only the core stats were displayed which made it easy to read. There was also a color interpretation guide which made the visual hierarchy understandable. I noticed there was no highlighting on the "TOTAL" column and had to look around before I realized it was the one displaying the actual z-scores.

To the left, I've identified the pros and cons of the overall user-experience for Hashtag Basketball.

While this chart outlines a variety of pros and cons, by far the BIGGEST problem I had was figuring out how to punt a category.

PUNTING

Trying to punt a category on Hashtag Basketball's web app was frustrating to say the least. On my first mock draft attempt, I couldn't figure it out at all and assumed that it wasn't possible. Nowhere on my screen showed how to do it. This was a DESIGN FAILURE.

It wasn't until afterwards when I googled "hashtag basketball punting" that I was able to navigate to this separate page on their site that showed how to do it:

I read through the text, which explained punting strategy and got to the last sentence which finally explained how to do it. I needed to UNCHECK the little boxes beside the categories to punt it and the projections would auto-change. This felt very unintuitive and was frustrating that I had to literally do a google search to figure it out.

I made sure to note down that I would NOT follow this method of punting a category

HELPFULNESS

Once I finally figured out how to punt categories, Hashtag Basketball was helpful for my draft, legitimizing the core concept. It had z-scores for every category which assisted with my decision-making.

During the middle of my draft experiment, I wished that there was a live team-viewing function - some way where I could indicate the players I was selecting in my draft. I really wanted to know HOW my draft was going and what the cumulative z-score of my team was after each individual player selection.

Basketball monster

USER-EXPERIENCE

I then repeated the mock-draft experiment, but this time with Basketball Monster. I examined the user experience as I went through the draft. Below are my observations:

Baskteball Monster's player rankings which make up the core draft-tool

The top of Basketball Monster's draft-tool page was a little bit cleaner as it had less filters at the top. However, the stats chart felt busier/more dated than Hashtag Basketball's as it was left-aligned and displayed an overwhelming amount of numbers.

Again, I've identified the pros and cons of Basketball Monster's overall user-experience in this specific use-case (while live-drafting a team).

PUNTING

In order to punt a category, I had to first check “punt categories” under Value Column Settings which expands a chart with the 9 categories (see below).

I simply checked off the categories which I wanted to punt and then the player rankings automatically changed. While finding the "Punt Categories" checkbox was initially hard to find, the overall function of this feature was extremely intuitive. This felt much better than Hashtag Basketball's solution.

I made sure to remember this as I believed that this was the best way of incorporating punting.

HELPFULNESS

Despite feeling a bit dated, Basketball Monster was also helpful for my draft. Once again though, I really felt the need for a live-team viewer. I did not understand why there was nothing that could tell me how I was doing as my draft progressed. This would be something that would come to define a large portion of the design process.

Key Research Insights

After completing the competitive analysis, these were the key insights I gained:

03 / 05

IDEATION

DESIGN

The key insights discovered during the research phase helped a lot in informing the beginning of the design process - particularly when sketching out my initial concepts.

Original sketches done on the Concepts iPad application.

Low-Fidelity Wireframes

SOLVING INSIGHT #1 (punting should be easy)

To make punting easy I added a punt selector module at the top of the draft tool page. When selected, this instantly changes the player list to reflect the punted category. This is similar to Basketball Monster's selector, however it is more visible and doesn't require a checkbox to appear.

I believe that this method of punting a category is by far the best solution and is a significant improvement over Hashtag Basketball and Basketball Monster.

First low-fidelity wireframe of the draft tool, showing how to punt categories.

SOLVING INSIGHTS #2 & 3
(easily navigable UI and live team tracker)

To solve insights 2 and 3, I created a separate live team tracker page. The idea was to utilize number boxes to indicate when each player was selected in the draft (1st, 2nd, 3rd, etc). Selected players then show up in drafted order on the Live Team Tracker page (something I repeatedly wished for during the research phase).

For easy navigation, I placed tabs at the top. This makes switching between the draft-tool and live team tracker very intuitive during a draft.

Low-fidelity wireframe showing the navigation between the draft tool and live team tracker

After incorporating the research insights into the sketch and low-fidelity wireframes, Matt and I reconvened. I shared with him my designs and solutions to the problems I discovered. We agreed that we were on the right track and needed to build out a high fidelity prototype so that we could start user testing.

First High Fidelity Prototype

I used Figma to create the high fidelity prototype. The gif below shows the flow of punting a category and choosing a player with the first pick. Users can immediately view that player in the Live Team Tracker. It also shows what both pages look like when a full team has been selected.

First High Fidelity prototype that shows punting and the player selection process

USER TESTING

Early User Testing and Design Critique

After the first high-fidelity prototype was finished, Matt and I decided to start user testing. We sent our prototype to three friends who also play fantasy basketball. We asked them to give us their pros using the draft-tool/team tracker We accumulated their feedback and found some key commonalities that are highlighted below:

USER TESTING FEEDBACK #1:
Colors were confusing

Every person that user tested the early prototype mentioned that having the punt tool green (and red when selected) was confusing - especially in relation to the red/green shades highlighting the z-scores. They also wanted something that explained the different shades.

USER TESTING FEEDBACK #2:
Text sizing felt awkward

When testing the prototype, users felt that the differences in text sizes felt awkward and “a bit jarring” (as our friend William put it). Looking at it afterwards, there were indeed large variances in text size that weren’t considered during the initial design of the prototype.

USER TESTING FEEDBACK #3:
Player list was too low on the screen

Users felt that the player list appeared too low on the screen and that there was too much space above it occupying the punt module and team icons. This was particularly an issue on widescreen displays.

USER TESTING FEEDBACK #4:
"Team rating” was hard to understand

The final point we received during our user-test was that the “team rating” z-score (largely displayed on the draft-tool and live team tracker) was hard to understand. Similar questions such as “what does that score represent?”, “is it out of ten or one hundred?”, and “is this a good or bad team score?” were asked by almost every tester.

High Fidelity Iterations

Once the feedback from user-testing was identified and organized, I revisited the high fidelity prototype. Much like the post-research phase, I looked at the problems that were presented and implemented tangible solutions. Below are the iterations to both the Draft-tool and Live Team Tracker.

DRAFT TOOL ITERATIONS

Draft-tool changes made in direct response to the user-testing feedback

Font size of the headings was made smaller.
Punting module's colours were changed to a more white and blue - more natural and neutral colours.
Team player icons were moved below the list to give more space for the player list, particularly on widescreen displays.
"Team Rating" changed to "Team Z-Score" to specifically articulate what it represents. A link was also added just below it that reads "what does this mean?" It links to the explanation of Z-Scores on the Live Team Tracker.

LIVE TEAM TRACKER ITERATIONS

Live Team Tracker changes made in direct response to the user-testing feedback

Font size of the headings were made smaller.
"Punted Categories" card removed as it didn't add much and was redundant information that took up a lot of unnecessary space.
A "Team Distribution" card was added instead, which includes a graph displaying the users' team in relation to a normal distribution. A sentence was added at the bottom explaining team z-scores. This was to give users a better understanding of z-scores, how good their current team is, and if they're doing well drafting.

User Flow

Userflow starting from the landing page

Once we had a good idea of which features we would include, I created the User Flow. Our goal was to include a simple onboarding process, navigable from the landing page. At this point, we weren't set on our specific pricing strategy, but did know that using Stripe would likely be our best option. The main features would therefore be locked behind a paywall.

04 / 05

SOLUTION

FINAL DESIGNS

Try Live Prototype

After completing our first iterations of the high fidelity prototype, Matt and I reconvened and did another big design audit. We made many changes over a period of two months (I wish I could show you ALL the iterations!). Finally, in May 2022 we were happy with what we had and were ready to start developing. Below are my final designs.

The final design for the draft tool included a few more additions:
‍

Z-scores/Averages Toggle
‍
Player Icons with Team Colours
‍
Player List expand button
‍

Render and Prototype of the Draft Tool

Live Team Tracker

The Live Team Tracker remained mostly the same from the last iteration with a few small additions. I added an interpretation guide for the colours and added a gradient on the distribution curve that makes it more visually pleasant. I also adjusted some of the text weight in the z-score explanation, exemplifying the most important metrics. This makes the messaging clearer for the user.

Rendering of the final Live Team Tracker design on an iPad (portrait orientation)

Trade Analyzer

By far the largest addition in the final design phase was adding a Trade Analyzer. This was something Matt and I had discussed many times and we finally decided to implement it. From a UX perspective, the concept was quite easy to design. However, because it was a feature that had not been user-tested, it was the first thing we decided would be revisited once the product was built (and would be user-tested using the actual site).

Render and prototype of the Trade Analyzer

BRANDING

Matt had come up with the name "FantaZscores" before we started building the product. I liked it, as it was extremely clear what one of the main value propositions of the product was.

Tasked at designing the brand identity and main logo, my goal was to capture basketball and the product's usefulness. Eventually I landed on a logo of a microchip - fitting as it looks similar to a basketball court and gives the feeling of data/science.

05 / 05

IMPACT

Offical Website

Building the product + dev limitations

Once the designs were finalized, Matt, the creator and developer of FantaZscores, started building. Unfortunately, because our team was just the two of us (and wasn't our full-time jobs), Matt ran into some limitations during development. At this point, because of time and man-power, there were certain things from my initial designs we wouldn't be able to build.

However, a positive was that most of these limitations were small, secondary things like the player icon images, distribution curve card, and Z-score/Averages toggle. The core functions could be, and were eventually built and shipped.

Hero image of our initial landing page.

Launch

FantaZscores was launched in September 2022, right in time for the start of the 2022 Fantasy basketball season. Our initial launch goals were small - we wanted a small base of users that we could continue to user-test with and gain valuable feedback for next year when we would do a large-scale marketing rollout. We expected some sales, but not a ton.

In order to gain a base of users, we decided to advertise our product on the fantasy basketball subreddit (reddit.com/r/fantasybball) and offer them free one-year access if they signed up within a week. We weren't sure what the reception was going to be, however, from reddit we gained over 150 initial users.

FantaZscores' pricing page

The momentum from reddit was huge, and after the one week promo was finished, we ended up doing over 300% of our expected sales and approached the beginning of the fantasy season with over 800 active users. People were genuinely excited about the product which felt like a huge win for us and validating as a product designer.

Post-launch user feedback

After we gained a base of users, Matt ended up getting a lot of messages from users giving their feedback. It was almost universally positive. People loved the product and in particular, how intuitive and "clean" the UI/UX felt. Below are some of the messages Matt received:

‍

WHAT I LEARNED

FantaZscores was my largest project to date and working on it has made me a better Product Designer. It was an incredible experience getting to design such a cool product from the ground up and doing it with a friend made it even better. Obviously, I learned a ton. It's hard to describe everything, but I've outlined a couple of key points below:

Effective research is KEY

Before FantaZscores, I had a very linear view of UX research. I thought that it could be simply boiled down to interviews and surveys. Little did I know how deep it can go and how much it can involve analyzing other/similar products. If I didn't do the mock draft experiment in the role of a user, I likely wouldn't have gained many of the insights that ended up defining my design process. Now I know.

User-testing is where it happens

As this case study illustrates, the biggest iterative design changes happened after the user-tests. I knew it was important, however I didn't realize how much it would play a role. This is super important to know, as I believe I'll put a lot more stock into preparing and evaluating user-tests going forward.

Colour theory and text size is important

Colours and text size ended up playing a big role on this project. It has given me valuable info on how much they impact the overall user experience and how using them improperly can cause a lot of confusion for the user.

Development limitations are real

This was the first project I've worked on from design to launch. It was eye-opening seeing what exactly goes into building a product like this and understanding what was actually realistic based on the team we had. If I could do it again, I'd try to understand the development limitations at an earlier stage of design to hopefully improve workflow and efficiency.

CASE STUDY