Designing a Cross-Product System in a Regulated Multi-Vertical App
Password protected
Password protected

Designing a Cross-Product System in a Regulated Multi-Vertical App

Product design

← Back to Archives

Designing a Cross-Product System in a Regulated Multi-Vertical App

Product design

Overview

When I joined Fliff, Sportsbook and Fantasy existed inside a single React Native app but operated as two independent products. Each had its own interaction patterns, visual language, and implementation approach, with no shared system beyond a small set of basic components. The product had grown quickly, but the foundation was fragmented and difficult to scale.

I was brought in to audit the experience and establish a foundation that could scale across verticals and support future regulatory change.

My Role

Design Lead

The Team

1 Design Lead

1 CEO

2 CPO

1 Product Manager

Timeline

8 Months

Year

2025-2026

Diagnosing Structural Fragility

Within my first month, I conducted a comprehensive audit of the app, reviewing every surface through UX heuristics, competitive benchmarking, and product risk analysis.

What appeared to be visual inconsistency revealed a deeper issue. Core behaviors were duplicated, interaction models diverged, and decisions were made without a shared architectural strategy. Complexity was compounding without increasing leverage.

Aligning Key Business-Critical Moments

Given the significance variance in key business-driving features, I chose to prioritize unifying the underlying infrastructure across both verticals. The main risk was duplicated behaviors and fragmented implementation patterns that would become expensive to maintain.

I consolidated high-impact revenue surfaces into shared, reusable components and aligned interaction models across products, establishing structural resilience, and a refreshed visual identity.

Gameplay Parity

Cart and entry tracking are high-intent revenue surfaces. Divergent behaviors across verticals created unnecessary friction.

Legacy cart experience:

Refreshed cart experience:

Legacy entry tracking:

Refreshed entry tracking:

Refreshed entry tracking :: collapsed
Refreshed entry tracking :: expanded

Reducing Deposit Friction

Deposit is the highest-leverage transaction surface in the product. The existing experience lacked clear hierarchy, introduced visual noise, and diluted the primary action.

Legacy deposit experience
Refreshed deposit experience

Building a Reusable, Product-Agnostic System

I established a component system designed to support both verticals without divergence. Shared primitives, standardized interaction patterns, and documented usage guidelines were centralized in a unified Figma library.

Engineering aligned on clear implementation standards to ensure components were extended rather than recreated.

Example: pickButton documentation

I also created a standardized prompt for LLMs to develop an elevated icon system that are used to represent leagues systemwide:

3D icon system

Results

System Validated Under Regulatory Pressure

In January 2026, California banned sweepstakes-based sportsbook formats, forcing a rapid transition to Fantasy. Because unification was already underway, we were able to easily adapt to the shift by leveraging shared components rather than rebuilding parallel systems.

Shifting From Feature-First to System-Oriented Thinking

The most meaningful outcome was organizational. Roadmap discussions began to center on reuse and scalability, and new initiatives were evaluated for system impact before visual or feature expansion. Infrastructure investment became a default consideration rather than an exception.

Process

Diagnosing Structural Fragility

Within my first month, I conducted a comprehensive audit of the app, reviewing every surface through UX heuristics, competitive benchmarking, and product risk analysis.

What appeared to be visual inconsistency revealed a deeper issue. Core behaviors were duplicated, interaction models diverged, and decisions were made without a shared architectural strategy. Complexity was compounding without increasing leverage.

Aligning Key Business-Critical Moments

Given the significance variance in key business-driving features, I chose to prioritize unifying the underlying infrastructure across both verticals. The main risk was duplicated behaviors and fragmented implementation patterns that would become expensive to maintain.

I consolidated high-impact revenue surfaces into shared, reusable components and aligned interaction models across products, establishing structural resilience, and a refreshed visual identity.

Gameplay Parity

Cart and entry tracking are high-intent revenue surfaces. Divergent behaviors across verticals created unnecessary friction.

Legacy cart experience:

Refreshed cart experience:

Legacy entry tracking:

Refreshed entry tracking:

Refreshed entry tracking :: collapsed
Refreshed entry tracking :: expanded

Reducing Deposit Friction

Deposit is the highest-leverage transaction surface in the product. The existing experience lacked clear hierarchy, introduced visual noise, and diluted the primary action.

Legacy deposit experience
Refreshed deposit experience

Building a Reusable, Product-Agnostic System

I established a component system designed to support both verticals without divergence. Shared primitives, standardized interaction patterns, and documented usage guidelines were centralized in a unified Figma library.

Engineering aligned on clear implementation standards to ensure components were extended rather than recreated.

Example: pickButton documentation

I also created a standardized prompt for LLMs to develop an elevated icon system that are used to represent leagues systemwide:

3D icon system

Results

System Validated Under Regulatory Pressure

In January 2026, California banned sweepstakes-based sportsbook formats, forcing a rapid transition to Fantasy. Because unification was already underway, we were able to easily adapt to the shift by leveraging shared components rather than rebuilding parallel systems.

Shifting From Feature-First to System-Oriented Thinking

The most meaningful outcome was organizational. Roadmap discussions began to center on reuse and scalability, and new initiatives were evaluated for system impact before visual or feature expansion. Infrastructure investment became a default consideration rather than an exception.

Result
No items found.

Outcome

 →

← Back to Archives