Underdog: Rethinking the Track Experience
Improving entry organization, navigation, and prediction visibility in a sports gaming mobile app.
OVERVIEW
Underdog's Track section allows users to follow predictions, monitor live statistics, and review entry outcomes.
While the Track section provides essential information, there are opportunities to make entry organization more intuitive, navigation more efficient, and prediction progress easier to interpret.
This independent redesign explores targeted improvements to make the tracking experience clearer and more intuitive while preserving the app's familiar interface.
MY ROLE
Product Design • UX/UI Design
TOOLS
Figma • After Effects
PROJECT TYPE
Independent Case Study
PLATFORM
Mobile App • iOS
THE CHALLENGE
An evaluation of Underdog's Track experience revealed three opportunities to improve usability:
-
Unclear Entry Status
Eliminated entries could remain in Active until officially settled, creating uncertainty about their status.
-
Interrupted Navigation
Reviewing predictions required opening and dismissing full-screen drawers when moving between entries.
-
Limited Progress Visibility
Combined-score predictions required mental calculations to understand progress toward the selected threshold.
DESIGN APPROACH
My goal was to improve the Track experience while preserving Underdog's familiar interface. Three principles guided the redesign:
Clarity — Communicate entry status accurately.
Efficiency — Simplify navigation between entries.
Context — Make prediction progress easier to interpret.
Together, these principles guided the design decisions behind each of the three proposed solutions.
01. Clarifying Entry Status
Refining Track into three categories for clearer entry status visibility.
The redesigned Track experience builds on the existing Active and Results tabs by introducing Pending as a intermediary category, creating a clearer distinction between entries that remain eligible for a payout, those awaiting settlement, and those with confirmed outcomes.
To complement this new structure, I repositioned the category tabs to the bottom of the screen for easier reachability during one-handed use. I also propose horizontal swipe navigation, giving users the flexibility to switch between categories by swiping across the entry list or tapping the tabs directly.
ACTIVE
Keeping Eligible Entries in Focus
The Active tab is designed to show entries that remain eligible for a payout, giving users a focused view of predictions that are still in contention.
In the current experience, entries can remain under Active even after they are no longer eligible for a payout. This makes the category less representative of an entry's actual status.
By defining Active around payout eligibility rather than settlement status, the redesign creates a clearer distinction between entries that can still win and those awaiting an official outcome.
Design Consideration: An entry's placement should reflect its relevance to the user, not simply its technical settlement status. Prioritizing payout eligibility helps maintain a more meaningful distinction between active and unresolved entries.
PENDING
Creating Clarity Between Outcomes
The introduction of Pending provides a dedicated space for entries that are no longer Active but have not yet reached an officially settled outcome. Pending accommodates two distinct situations:
-
Awaiting verification:
An entry has a potential winning outcome, but its result has not yet been officially confirmed.
-
Eliminated — awaiting settlement:
An entry is no longer eligible for a payout, but associated games or settlement requirements remain incomplete.
Separating these entries from Active reduces ambiguity about payout eligibility while communicating why an entry remains unresolved.
As shown in this screen, I also refined how player avatars correspond to their names, illustrated by the Curry and Maxey entry. When avatars change position based on prediction status, their names follow the same order, maintaining visual consistency.
Design Consideration: Pending distinguishes between different unresolved states through contextual labels and subtle color treatments, without relying on color alone.
RESULTS
Providing a Definitive End State
Results serves as the final destination for entries once their outcomes have been officially settled.
Winning entries receive a subtle green treatment and a clear Won label, while losing entries retain a neutral gray appearance with a Lost label.
This approach makes settled outcomes easy to distinguish while maintaining visual consistency with the rest of the Track interface.
Design Consideration: Results provides a definitive record of completed entries, separating confirmed outcomes from entries that remain unresolved.
02. Simplifying Entry Navigation
Replacing full-screen drawers with independently expandable cards to simplify navigation between entries.
REDUCING INTERACTION FRICTION
Remove Unnecessary Navigation Steps
The existing Track experience uses a full-screen drawer to display an entry's individual predictions. While this provides detailed information, it temporarily removes the surrounding entry list from view.
To review another entry, users must dismiss the drawer and select a different entry, introducing additional steps into a common tracking task.
I replaced this interaction with inline expandable cards, allowing users to access individual predictions directly within the entry list without opening a separate view or having to swipe left and right between entries.
This functionality extends across all three Track categories—Active, Pending, and Results—providing a consistent way to access entry details regardless of their status.
Design Consideration: Keeping information within its original context reduces unnecessary transitions and maintains continuity as users explore their entries.
USER CONTROL & FLEXIBILITY
Support Independent Entry Expansion
Rather than restricting users to one expanded entry at a time, I designed each card to expand or collapse independently.
This allows multiple entries to remain open simultaneously, making it possible to compare predictions across entries without repeatedly opening and closing individual views.
Users can also collapse entries they no longer need, returning to a more compact overview of their activity.
The interaction preserves the existing card-based visual structure while introducing greater flexibility in how information is accessed.
Design Consideration: Independent expansion gives users control over how much information remains visible, balancing detailed exploration with a compact browsing experience.
03. Making Prediction Progress Easier to Interpret
Providing greater context around prediction lines and scoring progress.
ADDING CONTEXT TO COMBINED SCORES
Showing the Distance from the Line
The Track experience displays combined scores within a progress bar, allowing users to monitor total points scored. However, users still have to calculate the difference between the current score and the prediction line.
I introduced point-difference indicators alongside directional arrows to show how far the combined score is above or below the prediction line.
Beyond simplifying score tracking, this additional context helps users assess scoring trends as games progress. For example, seeing the point differential at halftime can help users evaluate how a prediction is developing, providing useful context for those following live betting opportunities.
Design Consideration: The point-difference indicators continue to reflect scoring beyond the prediction line, rather than stopping at the threshold. This provides a more complete picture of each prediction, allowing users to see not just whether a line was cleared, but also by how much.
04. Validation & Next Steps
Evaluating the Design
The redesign explores opportunities to improve the Track experience through more intuitive entry organization, navigation, and prediction visibility. While the proposed solutions are informed by UX principles, usability testing would help evaluate their effectiveness and identify areas for further refinement.
I would focus validation on three key areas:
Entry Organization
Evaluate whether users can distinguish between Active, Pending, and Results, and accurately understand an entry's current status.
Entry Navigation
Observe how users interact with independently expandable cards, including whether the interaction reduces unnecessary navigation or introduces excessive scrolling when multiple entries are expanded.
Prediction Visibility
Evaluate whether point-difference indicators and directional arrows help users understand how far combined scores are above or below their prediction lines, without requiring mental calculations.
Testing would focus on task completion, interpretation accuracy, and unnecessary interactions. Findings would help identify opportunities for refinement before further development.
05. Reflection
This project reinforced the importance of looking beyond individual interface elements to understand how design decisions influence the overall user experience.
What began as an exploration of entry organization, navigation, and prediction visibility evolved into a broader exercise in reducing friction, managing cognitive load, and communicating information more effectively.
One of the key takeaways was recognizing that improving usability doesn't always require introducing entirely new features. Sometimes, the greatest opportunities come from refining existing interactions and presenting familiar information in more meaningful ways.
