top of page

Fantasy Football Draft App

CHALLENGE

Make our family’s annual in-person fantasy football draft easier to follow without replacing the physical draft board and traditions everyone enjoys.

​

PROJECT TIMELINE

September 2026
 

MY ROLE

Product design, UX research, testing, and AI-assisted development


METHODS AND TOOLS

Observation, rapid prototyping, usability testing, iterative design;

Next.js, Supabase, Vercel, GitHub, Sleeper API, ChatGPT

​
 

BACKGROUND

My family holds an in-person fantasy football draft every year using a large physical draft board and player stickers. It’s part of the fun, but it can also get chaotic. In a room full of very loud people (trash) talking, picks can be hard to hear, people lose track of who’s up next, and someone may try to draft a player who’s already been taken.

​

With people in my family of different hearing abilities, I was especially concerned about the accessibility of relying so heavily on spoken announcements. I wanted everyone in the room to have the same access to what was happening, rather than having to hear a pick clearly or ask someone else what they missed.

​

Rather than replace the physical draft, I wanted to see if a lightweight digital companion could make the experience easier to follow and more equitable without changing the parts of the experience we all already liked.
 

RESEARCH QUESTIONS

The study explored four main areas:

  • What information does everyone need to keep the draft moving?

  • What should the app handle, and what should stay physical?

  • How can one person manage the draft without the admin work becoming distracting?


 

APPROACH

I started by thinking through what information people needed during the draft and where technology could actually help. I didn’t want to replace the physical draft board, so I focused on the parts that were hardest to manage in the room: keeping track of whose turn it was, making each pick visible, and preventing duplicate selections.


From there, I sketched out the main screens and how they would work together before moving into the build. That helped me think through what the admin needed to see on a phone, what should appear on the shared TV, and how people could check player availability without interrupting the flow of the draft.


That led to three main parts of the app: a mobile admin view for recording picks and managing the draft, a shared TV display that showed what was happening in real time, and a player lookup so people could check whether someone had already been drafted.


I built the app with the help of ChatGPT, using it to generate and troubleshoot code while I made the product and interaction decisions. We used Next.js to structure the app and its different views, Supabase to store draft data and keep everything in sync, Vercel to deploy the app so it could run across devices, and GitHub to manage the code as I worked. I also connected the Sleeper API so the app could pull in current player and defense data. I was learning the stack as I went, which made the project as much about understanding how the pieces fit together as it was about getting the app built.

​

I ran a pilot with an experienced fantasy football commissioner.  That helped me check whether the flow made sense in practice and catch anything that might feel obvious to me as the person who designed it, but confusing to someone actually using it during a draft.

​

Before draft day, I ran through the full experience several more times and adjusted anything that felt confusing or too slow. That included things like how long announcements stayed on screen, what information appeared before and after each pick, how undo and confirmation worked, and what happened at the very end of the draft.


I also checked the interface for accessibility issues, including color contrast, and made adjustments before the final version was used.


 

OUTCOME

The final app brought the different pieces of the draft into one place without replacing the physical board. I could manage picks from my phone while the TV kept everyone in the room up to date on who was picking, who was next, and which player had just been selected. People could also check player availability without having to rely on hearing every announcement.


Just as important, building and testing it helped me catch small things that made a big difference in the moment, from the timing of the pick announcements to confirmation and undo controls. By the end, I had a working tool that made the draft easier to follow and easier for me to run, while still feeling like our usual family draft.
The project also gave me a chance to work differently than I usually do: make decisions quickly, build something, try it out, and adjust based on what happened. It reminded me how useful quick prototyping can be when there’s a clear need and you just need to get something in front of people and learn from it.

An illustrative flow of the Rochester Fantasy Football League Display App (sample data used)

Follow me

  • LinkedIn
  • Instagram

© 2026 by Joann Agnitti
 

bottom of page