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.

Choosing Infrastructure Over Aesthetic Change

Rather than initiate a broad visual refresh, I chose to prioritize unifying the underlying infrastructure across both verticals. The primary risk was not visual inconsistency, but duplicated behaviors and fragmented implementation patterns that would become harder to maintain.

I consolidated high-impact revenue surfaces into shared, reusable components and aligned interaction models across products, establishing structural resilience before pursuing aesthetic refinement.

Building a Reusable, Product-Agnostic System

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

Engineering aligned on reusable implementation patterns to prevent duplicate component creation. By separating core behaviors from individual feature builds, the system reduced parallel work and improved consistency across products.

Strengthening the Foundation Ahead of Regulatory Change

Later that year, California banned sweepstakes-based sportsbook formats, placing a meaningful portion of company revenue at risk and requiring customers to transition from Sportsbook to Fantasy.

Without structural alignment, this would have required parallel updates across divergent systems. Because unification work was already underway, we adapted shared components rather than rebuilding duplicated flows. The unified foundation reduced implementation risk and preserved focus during a time-sensitive shift.

Reducing Parallel Work and Increasing System Leverage

Consolidating core behaviors into shared components reduced the need for parallel implementations across verticals and minimized duplicate work. Engineering clarification cycles decreased as reusable patterns became standard, shifting feature builds from recreating UI structures to assembling from an established system.

Roadmap discussions began to prioritize scalability and reuse. Infrastructure was no longer treated as polish, but as a prerequisite for shipping.

Shifting From Feature-First to System-Oriented Thinking

The most meaningful outcome was not visual consistency, but a shift in how the organization approached product development. Discussions began to center on reuse, scalability, and long-term maintainability. New initiatives were evaluated for system impact rather than isolated feature output.

Result

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.

Choosing Infrastructure Over Aesthetic Change

Rather than initiate a broad visual refresh, I chose to prioritize unifying the underlying infrastructure across both verticals. The primary risk was not visual inconsistency, but duplicated behaviors and fragmented implementation patterns that would become harder to maintain.

I consolidated high-impact revenue surfaces into shared, reusable components and aligned interaction models across products, establishing structural resilience before pursuing aesthetic refinement.

Building a Reusable, Product-Agnostic System

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

Engineering aligned on reusable implementation patterns to prevent duplicate component creation. By separating core behaviors from individual feature builds, the system reduced parallel work and improved consistency across products.

Strengthening the Foundation Ahead of Regulatory Change

Later that year, California banned sweepstakes-based sportsbook formats, placing a meaningful portion of company revenue at risk and requiring customers to transition from Sportsbook to Fantasy.

Without structural alignment, this would have required parallel updates across divergent systems. Because unification work was already underway, we adapted shared components rather than rebuilding duplicated flows. The unified foundation reduced implementation risk and preserved focus during a time-sensitive shift.

Reducing Parallel Work and Increasing System Leverage

Consolidating core behaviors into shared components reduced the need for parallel implementations across verticals and minimized duplicate work. Engineering clarification cycles decreased as reusable patterns became standard, shifting feature builds from recreating UI structures to assembling from an established system.

Roadmap discussions began to prioritize scalability and reuse. Infrastructure was no longer treated as polish, but as a prerequisite for shipping.

Shifting From Feature-First to System-Oriented Thinking

The most meaningful outcome was not visual consistency, but a shift in how the organization approached product development. Discussions began to center on reuse, scalability, and long-term maintainability. New initiatives were evaluated for system impact rather than isolated feature output.

Result

Result
No items found.

Outcome

 →

← Back to Archives