Overview

Sports have a magical way of bringing people together, but let’s be honest, life doesn’t always let us watch the game live. Inspired by this reality and my researching Pro Football Focus, the idea for chatPFF was born. This app gives sports fans the power to connect with real and artificial companions and chat about games on their own timeline, using game time as a shared reference point.

Primary Feature Concepts

Imagine watching a play where one of these incredible athletes hurdles a defender backwards. You might want to be in that moment with others, but in reality, you’re watching the recording of the game. With this app idea, you can share this moment with others or converse with a GPT to see if there has ever been a backwards hurdle in NFL history.

Simply select the game, quarter, and clock time, and you’ll be matched with others watching the same play, even if it’s hours (or days) after the live event. It’s like a time machine for sports conversations—designed to fit your schedule.

AI-Powered Chat Filters

• Not every comment belongs in your chat. That’s why the app includes a slider to filter out offensive, irrelevant, or just plain annoying remarks in real time. You control the vibe, whether you’re after thoughtful analysis or meme-worthy banter.

GPT-Powered Chat Assistants

• Ever wish you had a sports expert on call? Enter the chatPFF GPTs. These chatbots are trained to jump into discussions with unprompted insights, advanced stats, and historical context. Want a private chat with one? No problem. Ask about player histories, team analytics, or even get fantasy football tips.

Flowchart

Being motivated by the features thought up for the feature concepts, I opened up FigJam and went to work on a flowchart to get a deeper understanding of what would be needed from a design perspective. This helped not only with keeping the creative juices flowing, I referred to this flow several times while designing the initial screens.

Designs

I wanted to start at the beginning. So I set off on the exploration with an onboarding process.

First things first, you need to be able to create an account or log in. Next, I added a three-question intro to get an idea of what sports and teams to prioritize for the user and to get an idea of how to start off filtering comments within chatrooms. Let’s face it, sports chat can get vulgar and down right nasty when someone is being affected by the outcome of a game.

Home Page

To wrap up the initial set of screens, I added a home page and navigation to set up what a user would see upon opening the app. Plus, I needed a way to wrap up the whole onboarding process prototype.

Below is a recorded session where I went through the home page design from a blank slate…well the beginning of it anyways. I continued to iterate after completing this video since that’s what you do as a designer. That’s the beauty of design. There’s always room to improve and make things better.

For context, the session was right around 40 minutes, condensed down to about 1 minute.

Buttons

Part of the iterative process was improving the buttons. I felt fine about the contrast I had developed with the initial iteration, but during some color exploration, I found a turquoise I wanted to use as the active state. It especially worked well for the tabs (such as the AFC/NFC UI) to dial down some of the outlined look I admittedly got a little overboard with.

Maybe you’re asking “why does the Yes/No answer UI still have the outlines?“. Good on you for spotting that and asking about it! I kept the outlines for this set of answers because of their relationship starting once one of the answers is tapped. When that happens, the answer turns blue, which can be seen in the prototype (or the overview video). This then begins the button relationship.

The user can and will change their mind, so the Yes/No UI now acts as a toggle. Leaving the answer as incomplete initially invites the user to interact with the answer.

“Why are AFC/NFC not outlined? They are related.“ Great observation. First, one tab of the set is always highlighted, even upon initial glance. This is inherently different than the answer UI from the get-go. The tab is also a filter for the content below, whereas the answer UI is following its related question. With enough differences discovered, I felt this was great a place for dialing back the outline outrage and taking advantage of that beautiful turquoise.

Wrap Up

When I get an idea like this, I really like to dig into it. I even did a bit of research by polling a sports message board, but I wasn’t really asking the right question at the time, and the concept evolved a bit after the poll had finished. So the info isn’t really relevant. It kind of is, but I digress.

I touched on the iterative process when talking about the decisions made for button treatments. There were many more updates along the way for these initial screens, too much to go into for a write-up like this. But holy moly, do I enjoy going through iterations in Figma.

More coming (question mark?)

I’ll no doubt have more ideas that keep me up past my bedtime and will probably end up doing some more of these visual design explorations. In fact, I have an idea for integrating a GPT into an onboarding process for a grocery shopping and delivery app. Keep an eye out!

*I have no affiliation with PFF. I was looking into Pro Football Focus at the time the idea came to me and thought “chatPFF” sounded like a pretty sweet name.

Check out my case studies