Reimagining
Fantasy Life's
Core Tools
A fast-paced redesign of three high-traffic pages — Draft Champion, Start/Sit, and Rankings — grounded in user research, JTBD methodology, and a shift from data-dumping to decision support.
PRODUCT DESIGN -- CONTRACT
Scope
3 Core Product Pages
Deliverables
Desktop and mobile web
Approach
Research → JTBD → Design
Project Overview
Fantasy Life brought me in to reimagine three of their most-visited pages. The brief wasn't a blank canvas — it was a constraint: work with what exists, understand why it falls short, and redesign with precision.
​
The engagement began with a review package: existing screen designs across all three tools alongside transcribed user interviews covering challenges, pain points, journey maps, and direct user suggestions. My first task was synthesis — reading across all of that material to identify not just what users were complaining about, but what they were actually trying to accomplish.
From that synthesis I developed a JTBD agenda for each tool, then categorized every potential improvement into two buckets: new feature opportunities where a gap existed, and optimization opportunities where the existing UI simply needed to work better. That framework became the backbone of every design decision that followed.
The contract was fast-paced by nature. That meant ruthless prioritization — identifying which changes would move the needle most for both users and the business, and executing them with enough fidelity that the development team could take them directly into production planning.
Challenge
Transform high-traffic but underperforming tools from utilitarian data displays into genuinely decision-supportive experiences — without disrupting the patterns that existing users already rely on.
​
Pages Redesigned:
-
Draft Champion (pre-draft setup + live draft dashboard) · Start/Sit Tool · Weekly Rankings
Methods
Programs
Google Forms
Figma
My Role
Product Designer incorporating PM strategies — responsible for research synthesis, JTBD framing, interaction design, visual design, and post-design analysis.
Starting Point
Existing Designs
Before any design began, these were the designs handed to me. Functional, High-traffic pages but carrying the weight of years of feature accretion with unclear unifying decision-support philosophy.
Research and JTBD
The user interviews revealed a consistent gap between what each tool offered and what users were actually trying to accomplish when they arrived.​
-
Research Inputs
-
User interview transcripts covering challenges, pain points, journey maps, and direct suggestions across all three tool experiences.
-
Rather than taking user complaints at face value ("I want more data"), I mapped each interview to the underlying job — the progress a user was trying to make in their independent journey. This reframing shifted the design conversation from feature requests to outcome design.
I then categorized every identified gap as either a new feature opportunity (something absent that users needed) or an optimization opportunity (something present but working against the user). This two-bucket model kept the work scoped and prioritized.
-
Analysis Method
-
Cross-interview synthesis → JTBD statement formation → gap categorization (new feature vs. UI optimization) → design agenda per tool.
-
Draft Champion
When it's draft season, help me feel confident I'm making the best pick available — without drowning me in settings before I even start.
-
Pre-draft settings form is overwhelming and front-loaded — cognitive overload before the fun begins
-
During the draft, the three-panel layout (Rankings / Queue / Roster) is cramped and hard to parse at a glance
-
No player comparison tool — users have to mentally hold multiple profiles simultaneously
-
Draft Assistant cards lack enough context to feel decisive — "add to queue" vs "draft now" is unclear
-
Mobile experience is a compressed desktop — not built for drafting on the go
Start / Sit Tool
Help me make my weekly lineup decision fast — I want a clear recommendation I can trust, not just raw numbers I have to interpret myself.
-
The existing card UI locks almost all meaningful data behind a paywall — the tool communicates no value before conversion
-
No clear recommendation output — users see data but don't get a verdict
-
Cards don't support more than two players cleanly — but real lineup decisions often involve 3–4 options
-
Matchup context is buried — the single most decisive factor isn't surfaced
-
Mobile layout stacks player cards vertically but removes the head-to-head comparison framing
Rankings
Let me quickly find where the experts rank a specific player in my format — and understand when experts disagree so I can make my own call.
-
Paywall locks immediately disrupt the core experience — users can't assess the product's quality before committing
-
Filter controls are scattered and verbose — scoring system, week, team, and position require too much effort to configure
-
Ranker identity is hidden in dropdowns — users trust people, not labels
-
Expert disagreement (high-value signal) is not visualized — consensus and outlier positions aren't scannable
-
Mobile collapses to a compressed desktop table — scrolling both axes on a phone is painful
Design Process and Iterations
Every design decision traced back to a specific JTBD gap. The explorations weren't stylistic — they were structural.
What changes when you design for outcomes instead of features?
​
I ran parallel exploration tracks for all three tools simultaneously, testing different structural hypotheses before committing to high-fidelity execution. Desktop and mobile were designed in tandem from the start — not as an afterthought.
Two primary questions drove every screen: Does this surface the decision, or just the data? And does this earn the upgrade prompt, or interrupt the user's job?
Rankings
Tool 01 - Desktop & Mobile
01
Replace dropdown ranker selector with avatar-based picker
Users trust individual experts they follow, not abstract labels. Making ranker selection a visual, face-first interaction increases perceived trust and personalizes the output. It also surfaces the human expertise that's a core part of Fantasy Life's brand.
02
Surface Consensus and UR Score as primary sort signals
Two column-order explorations (Op1: UR Score first / Op2: Consensus first) tested which signal users reached for first. The goal in both was to remove the cognitive burden of mentally aggregating six ranker columns — let the system do that work and surface the headline number.
03
Redesign mobile as an expanded-row format, not a compressed table
On mobile, each player card expands to show individual ranker scores beneath the player name row — eliminating horizontal scrolling and making it usable one-handed. The ranker scores appear as labeled values below, not as a table column requiring pinch-zoom.
04
Consolidate header navigation and reduce paywall aggression
Stats & Info consolidation cleaned up the top nav. League Sync was repositioned as a contextual enhancement, not a gate — users see value first, then get the upgrade prompt when it's relevant to their action rather than before they've done anything.
Existing
Proposed Design Op2
Proposed Design Op1
OPTIMIZATION WIN
From dropdown to face-first ranker selection
The avatar selector transforms an abstract setting into a personal curation moment. Users pick the experts they trust — and the data responds. This is the same mental model as following someone on social, applied to analytical tools.
NEW FEATURE
Consensus as a first-class signal
Previously, consensus was one column among many. In the redesign it becomes the primary sort axis — the system surfaces its own synthesis. For users who don't want to dig into individual rankers, this alone answers their question.
Start / Sit Tool
Tool 02 - Desktop & Mobile
01
Lead with a verdict, not a data card
The existing design presents players as equivalent cards and forces users to compare them mentally. The redesign introduces ranked verdict labels — "1 Best", "2 Start", "3 Start", "4 Sit" — so the output of the tool is a decision, not a display. The job is done for the user.
02
Cinematic hero header to establish player identity
A full-bleed player comparison banner with photography, rank numbers, and position context creates immediate orientation. This isn't decorative — it anchors the head-to-head frame and makes the tool feel like it was designed for this specific comparison, not generic.
03
Expose data before the upgrade prompt
The existing tool shows locks before showing any data — communicating no value before asking for conversion. The redesign shows charts, matchup quality indicators, and projection context to all users. Premium content is clearly differentiated, but the user understands what they're unlocking because they can see its shape.
04
Support 4-player comparison as the default, not the exception
Real lineup decisions rarely involve only two players. The desktop redesign expands to support 4-player comparison in a consistent grid, with the ranked verdict surfaced per player. Mobile stacks ranked cards vertically, each leading with the verdict label so the answer is visible without scrolling into the data.
Existing
Proposed Design Op1
Proposed Design Op2
CORE REFRAME
The tool's output is a decision, not a data display
This was the central design thesis for Start/Sit. Everything — the verdict labels, the hero header, the data hierarchy — exists to make one thing happen faster: the user knows who to start before they finish scrolling.
CONVERSION STRATEGY
Earn the upgrade, don't demand it
By showing data structure before locking it, users understand what premium unlocks. The upgrade prompt lands after demonstrated value, not before. This is a fundamentally different relationship between the paywall and the product.
Draft Champion
01
Streamline the pre-draft settings into a focused, scannable form
Tool 03 - Desktop & Mobile
The existing settings page overwhelms users before the draft even begins. The redesign reduces visual noise, groups related controls more tightly, and separates the "start immediately" path from the "configure everything" path — letting eager users get into the draft faster.
02
Introduce player comparison as a new modal feature
The highest-value new feature identified from user interviews: the ability to compare two players side-by-side during a live draft. A "Compare" action on any player card triggers a modal showing both players with historical performance, tier breaks, expert agreement, and projected stats — the exact data needed to break a draft-time tie.
03
Elevate the Draft Assistant as the primary draft-time view
In the existing design, the Draft Assistant is a secondary tab. In the redesign it becomes the lead experience — the panel users live in during the draft. Rankings, Queue, and Roster become supporting panels, accessible but subordinate to the active decision at hand.
04
Mobile: build for one-handed draft interaction
On mobile, the draft experience was rebuilt around a single scrollable column with Rankings at the top and Roster/Draft Assistant below. Player insight callouts appear inline with each ranking card. The compare modal works as a bottom sheet — thumb-reachable, dismissible, fast.
Existing
Proposed Design Op1
Proposed Design Op2
NEW FEATURE
Player Comparison Modal
The most direct response to user interview data. During a draft, users are constantly weighing two players against each other — the Compare feature brings that mental model into the product as a first-class interaction. Triggers from any player card with a single tap/click.
STRATEGIC INSIGHT
Draft Champion as a platform, not just a simulator
The redesigned Draft Champion positions itself as the authoritative draft companion — not a standalone mock draft tool. Integrating Expert Rankings, AI-powered suggestions, and comparison tools in one surface creates stickiness that extends well beyond draft season.
Final Designs
The final deliverables for Rankings and Draft Champion — the two tools taken through to production-ready fidelity. Both desktop and mobile, across light and dark themes, representing the new visual and interaction language for Fantasy Life's tool suite.
What I'd push further with more runway — and where the real ceiling for these products lives.
The paywall problem isn't fully solved. The redesigns reduce friction and show value before asking for conversion — but the underlying model of locking expert rankings entirely behind a subscription creates an adversarial relationship with new users. A freemium model where one ranker's data is always free, with premium unlocking the full suite, would likely outperform even the best paywall-adjacent UX.
The three tools need to talk to each other. Right now they share a brand and a nav bar. A user who syncs their league in Rankings has to re-sync in Start/Sit. A player researched in Draft Champion doesn't surface in any other tool. A shared data layer — powered by League Sync as the connective tissue — would transform three good tools into one great product.
Draft Champion has platform potential. The mock draft simulator is the entry point. But the draft grade, the roster that results from it, and the expert insights that informed each pick are all data points that could power a season-long companion. Post-draft analysis, weekly lineup recommendations tied to your draft roster, and trade evaluations built on your draft-day rankings are all within reach of the existing data model.
Mobile needs its own design system, not a responsive desktop. The mobile redesigns in this engagement are significantly better than what existed — but the deeper fix is treating the mobile experience as its own product surface with its own interaction model, not a layout-adapted version of the desktop.
-
What went well
-
The JTBD-first approach consistently produced design decisions that were defensible and traceable. When you know the outcome a user is trying to achieve, "should we add this?" becomes a straightforward question to answer.
-
-
What I'd do different
-
I'd push for a shared design system component library across all three tools earlier in the process. Designing them in parallel revealed shared patterns that weren't formalized — ranker avatars, tier bands, matchup quality indicators. Systematizing those would accelerate future work.
-
-
The bigger opportunity
-
Fantasy Life's competitive moat is Matthew Berry's brand and a roster of credible expert rankers. The product should make that human expertise feel more present, more personal, and more directly connected to each user's specific situation. AI is the accelerant for that. The foundation is here.
-
Which new metrics to track that align with Fantasy Life's North Star
Good design without measurable outcomes is just aesthetics. These are the metrics that would reveal whether the redesigns achieved their intended business and user value — and how we'd know if they didn't.
User Value Metrics
Rankings Ranker Selector Engagement
What % of Rankings users interact with the avatar-based ranker selector? This signals whether the new UI makes ranker personalization feel accessible.
Target: 3x increase vs. dropdown interaction rate
Player Compare Modal Usage
New feature — baseline is zero. Track activation rate per draft session and compare draft outcomes (grade) for users who use Compare vs. those who don't.
Target: >40% of sessions trigger at least one comparison
Time-to-Decision (Start/Sit)
How quickly does a user reach a lineup decision after opening the tool? The verdict-first design should measurably reduce this. Baseline against existing session length.
Target: >30% reduction in avg. session length
Draft Assistant Engagement Rate
What % of Draft Champion users interact with the Draft Assistant panel at least once per session? Elevating it as the primary view should drive this up significantly.
Target: 2x current engagement rate
Business Value Metrics
Free-to-Paid Conversion Rate
The most direct business signal. Value-first paywall design across all three tools should improve conversion by demonstrating product value before asking for it.
Target: >15% lift in conversion rate from tool pages
Draft Champion Return Rate
What % of users who complete one mock draft return for a second within 7 days? A more engaging draft experience should increase this substantially.
Target: >25% increase in 7-day return rate
League Sync Activation Rate
League Sync is Fantasy Life's highest-value retention mechanic. Repositioning it as contextual value (not a gate) should increase voluntary activation during natural tool usage.
Target: >30% increase in League Sync activations
Session Depth Across Tool Suite
Do users now move between tools in a single session? Cross-tool navigation (e.g. Rankings → Start/Sit) signals the suite is working as a cohesive product rather than three isolated destinations.
Target: >20% of sessions touch 2+ tools
Where AI Makes
These Tools Smarter
The current redesign establishes a strong structural and visual foundation. The next evolution is AI-native — not AI as a feature badge, but AI embedded in the moments where users are most uncertain and the system has the data to close the gap.
01
Rankings — Personalized Expert Weighting
An AI model learns which rankers have historically been most accurate for a user's specific league format and scoring system, then automatically surfaces a personalized consensus score that weights those experts higher. Over a season, the rankings page becomes uniquely calibrated to each user — not just a static average of expert opinions.
OPTIMIZATION
02
Start/Sit — Natural Language Lineup Advisor
Users describe their dilemma in plain text — "Should I start Keenan Allen or play it safe with Tyler Boyd this week?" — and the tool returns a ranked recommendation with contextual reasoning that incorporates matchup data, recent performance trends, and scoring format. This transforms the tool from a comparison display into a genuine weekly advisor.
NEW FEATURE
03
Draft Champion — Post-Draft Grade Explainer
The existing draft already generates a grade at completion. An AI layer that explains the grade in natural language — what you did well, where you reached, which picks are high-upside vs. high-risk — would transform the grade from a number into a learning moment. Shareable by nature. Built-in social distribution.
OPTIMIZATION