Carrying a data-heavy web product onto a small screen.

The website holds a lot of information, so the core challenge was carrying that depth onto mobile without clutter, keeping dense data readable, and key actions one tap away.

The goal

Create a mobile app that feels like a natural extension of the PlayoffBlitz web experience, clear navigation, readable data displays, and quick fantasy actions users can complete without friction.

Constraints

• Align to an existing website identity and feature set
• Keep data-heavy screens readable on mobile
• Build a prototype that demonstrates realistic behavior

Audience: fantasy football players & NFL fans. Inputs: the existing website, common sports/fantasy patterns, and usability principles from Steve Krug's Don't Make Me Think.

Mapping the flow before a single screen.

I started by charting how a user moves through the app, the three core sections, and the actions inside each. Mapping the structure first kept navigation shallow and made sure the most-repeated tasks stayed within a tap or two.

Low-fidelity first, to pressure-test structure.

Before any visual polish, I wireframed each screen to test hierarchy, density, and the repeated patterns, stat rows, player cards, list sections, that would carry across the app. Working in low fidelity let me resolve layout and navigation problems early.

Structured around how fantasy users actually think.

Fantasy users bounce between the same repeat tasks, so I organized the app around three sections rather than a deep menu tree, each built for a specific mindset. Here's the prototype in motion, showing all three at once.

I treated AI like a prototyping partner — prompt, review, refine.

After the UI was established, I used Figma Make to accelerate app behavior and build a high-fidelity prototype. Instead of generic click-throughs, I prompted specific behaviors one at a time and refined each to match expected mobile patterns.

Key behaviors I prompted & refined

• Replace / swap players when a position is full — converting "remove" into "swap" during replacement mode
• Highlight the relevant lineup players for the selected position, and blur the rest to focus the decision
• Selection reflected across the full row, not just one cell, so it feels intentional
• An interactive Data Center table that pins the player name while stats scroll, with tap-to-sort columns

Try it out.

The prototype is genuinely interactive, click through the real flows below, right here on the page.

A scalable component system, built to stay consistent.

To keep the UI consistent across many screens, I built a small component system that could scale, navigation, headers and back behavior, player cards and stat rows, buttons and action states, alerts, modals, and confirmations, with type and spacing rules for data tables and lists.

Aligned to the PlayoffBlitz brand and web product.

The app was designed to feel like one product with the website, matching typography tone, color and contrast, spacing rhythm, and overall interface tone. The same visual system carries across the marketing site, the logged-in product, and the app.

A prototype that communicates the whole experience clearly.

The final prototype shows how the mobile app extends the existing website into a focused playoff fantasy product. A consistent visual system plus realistic interaction behavior makes the concept easy to understand, present, and evolve.

What I learned

• How to translate an existing web identity into a cohesive mobile UI system
• How to design data-heavy sports content with readable hierarchy and controlled density
• How to build scalable Figma components that keep large projects consistent
• How to use Figma Make strategically — clearer prompts, evaluating suggestions, refining outputs
• How interaction details can reduce friction as much as layout and visuals

If this continued

• Expand onboarding and league setup so new users can start quickly
• Validate key flows with more user feedback and prepare handoff specs