BetRivers Poker - App for Rush Street Interactive

Quick overview

PDF

1 / 8

Download full portfolio

📌

Rush Street Interactive (RSI) is a leading online gaming and sports entertainment company, operating primarily in the United States, Canada, and Latin America. Founded in 2012 in Chicago, RSI is recognized for its expertise and innovation in the industry, with flagship brands such as BetRivers, PlaySugarHouse, and RushBet.Through its proprietary platform, RSI offers a wide range of online casino games and sports betting options while maintaining a strong commitment to user experience and responsible gaming. As part of this ecosystem, BetRivers Poker was developed as an innovative online poker app, available on desktop, mobile, and tablet. As the product was nearing its launch, the team identified the need for additional support to accelerate production. By integrating these optimizations, the goal was not only to accelerate production but also to improve the long-term quality and maintainability of the product.

⏱️

Contract
2 years

🧑‍💻

Team
4 Product Designers, 1 Product DIrector, 1 QA, 1 PM, Dev Team

🎮

Product
iGaming App

⛳

Objectives

Optimize the Design System and workflow processes to accelerate production velocity, improve design consistency across platforms, and streamline the handoff between design and development.

📬

The missions

Enhance and structure the Design System to ensure better consistency across platforms

Support teams in optimizing their workflows and managing design files and handoff process efficiently.

Integrated design rules to streamline UI development.

Establish a documentation source to facilitate knowledge sharing.

Implement Design Ops practices to improve the collaboration

🌎

Work setup

Remote from Bangkok (GMT+7) with structured async handoff across EU timezone. Operational overlap with Singapore, Sydney, and Tokyo without schedule constraint.

Mission 1 : Design Ops & Design System

📒

Context

When I joined the BetRivers Poker team, a significant part of the product was already built, but the design debt was massive. There were outdated and unlinked styles, accessibility issues, no naming conventions, many broken components, and no clear process for component creation or validation.

Another key challenge was the lack of integration with the company’s global design system. Designers had created components based solely on their immediate needs, without optimizing communication with the DS lead. This resulted in heavy, unmanageable files, unclear differentiation between exploratory designs and reusable components, and a lack of alignment on our foundations.

🎯

Scope of responsibility

Owned DS quality: audit, restructure, and optimize components for scalability

Drove accessibility compliance across the component library

Onboarded 3 designers onto DS standards and contribution processes, establishing naming conventions adopted team-wide

Defined and communicated improvement recommendations to align Design Ops with production needs

🕵️‍♂️ Our Organization

BetRivers Poker is part of Rush Street Interactive (RSI), which also includes two other teams: Sportsbook and Online Casino. These teams are directly connected to RSI’s global Design System, ensuring consistency across their platforms.

However, our Poker team had specific needs that required a separate Design System. We needed:

Custom components that didn’t fit within the existing RSI DS.

Faster iteration cycles without relying on external dependencies.

Full control over our ecosystem, ensuring flexibility and speed.

By developing our own Poker Design System, the idea was to optimized production velocity, streamlined handoff, and created an agile design workflow tailored to our product’s unique requirements.

🗃️ Folders presentation

The BetRivers Design System is composed of 5 main folders and I participated in their construction :

1.🕵️‍♂️ Ds Ops

This folder contains files used to improve our work processes.

📁 Workflow Design Team

The purpose of this file was to review and optimize our processes for handoff creation, initiating design explorations, integrating new features into existing designs, and managing the archiving process efficiently.

📂 Fima Folders - Rework

This file aimed to restructure our Figma organization, separating the UI kit (the single source of truth for components) from templates used by product designers. The challenge was to allow designers to customize components for interface building without breaking the UI kit. This led to the introduction of contextual components, a concept we plan to revisit later.

📂 Style and Product - Rework

This file aimed to refine content organization by improving categorization and grouping of styles and components while identifying missing items to ensure better structure and clarity.

📂 Discovery - Design Team process

This file aimed to audit our current organization and assess how the product design team used, documented, and collaborated within our files. It identified pain points and improvement expectations from team members. Based on these insights, I created an impact-effort matrix to prioritize solutions and define a clear roadmap for optimization.

📂 Fusion RSI and Bet River DS - Workflow

The aim of this project was to build a plan to help better integrate our Ecosystem within RSI DS.

📂 MTT - PKO Concept Exploration

This file aimed to explore new design approaches for the Knockout tournament theme using a Crazy 8 ideation session to generate innovative feature concepts.

2.🕹️ Samples

This folder contains files that showcase component interactions, helping product designers and developers better understand their behavior. It also provides an overview of all style combinations, as our game offers multiple customization options for its appearance.

📁 Table

This file is dedicated to representing the different styles available for the table's appearance.

📁 Prototype Table

For optimization reasons, a separate file is necessary when adding multiple interactions to illustrate various features within the same prototype. Including them directly in other files would make them too heavy, as those files are focused on isolating and presenting individual features.

📁 MTT Sample

This file is dedicated to representing the different styles available for the MTT appearance on the different areas (Table,Mtt Lobby,Mtt Dt Lobby,Result,Buy-In)

3.🎨 Design

This folder contains our UI Kit components and Foundations, essential for building all our poker products and serving as the single source of truth. I am responsible for their maintenance and functionality. The components are organized into 5 distinct areas for better structure and usability.

📁 Table

This file is dedicated to both basic and complex components for the table area. Each page includes its own specifications and a dedicated prototype to illustrate its features.

📁 Lobby

This file is dedicated to both basic and complex components for the lobby area. Each page includes its own specifications and a dedicated prototype to illustrate its features.

📁 Custom UI

This file contains custom atomic components (different from RSI DS) that are used throughout our application.

📁 Assets

This file contains all our foundations (color,fonts,icon,img,illustrations,logo)

📁 Poker Settings

This file is dedicated to both basic and complex components for the poker setting area. Each page includes its own specifications and a dedicated prototype to illustrate its features.

4.📚 Documentation

This folder contains files that define and summarize our app’s various interactions and main specifications. It also includes our design kit for building different legends in our Figma file, along with our guidelines on naming conventions, file structure, and contribution process.

📁 Table Documentation

This file is dedicated to summarize our main spec and interactions on our Table for mobile and desktop.

📁 MTT Documentation

This file is dedicated to summariwe our main spec and interactions for MTT DT Lobby product.

📁 Design System Kit

This File is dedicated to build our differents legens in our figma and also contain our guidelines, naming conventions, file structure and contribution process.

5. 🧰 Products

This folder provides product designers to build all the necessary interfaces to illustrate the various possible user flows within our product.

📁 MTT Detail Lobby

This file illustrates all the key elements needed to build the MTT Detail Lobby, one of the most complex parts of our product. It includes contextual components, specifications, mockups, and prototypes.

To achieve this, I introduced the contextual component concept, allowing product designers to create scenario-specific components without modifying the UI Kit’s core components. This ensures consistency while enabling flexibility. As the Design System lead, I can update a component in the UI Kit, and all contextual components will inherit the changes without altering their text or context.

💪 Main Challenge

Scaling & Structuring BetRivers Poker’s Design System

As BetRivers Poker evolved, the lack of a structured Design System (DS) created inefficiencies, inconsistencies, and a slow production workflow. Unlike other RSI products (Casino & Sportsbook), which were linked to the RSI global DS, Poker had to build its own due to unique product needs and the need for faster iteration cycles.

However, this approach created fragmentation, leading to design debt, inefficient handoff processes, and a disorganized workflow. The challenge was to restructure the system, ensure better DS governance, and optimize collaboration with RSI while maintaining Poker’s independence and production speed.

🔍 My Design Ops Discovery Process

1️⃣ Interviews & Team Insights	2️⃣ Current State Audit	3️⃣ Pain Point & Impact Analysis	4️⃣ Impact-Effort Matrix & Roadmap Definition
I conducted one-on-one interviews with each designer to understand how they document, collaborate, and manage their design files. This allowed me to gather first-hand pain points and expectations.	I analyzed existing Figma files, documentation, and workflows to map out design debt, file structure issues, and collaboration gaps.	Using the insights from the audit, I categorized issues based on design debt, documentation gaps, handoff inefficiencies, and collaboration bottlenecks.	I mapped all findings into a prioritization framework to balance high-impact improvements with effort required. From there, I defined a clear roadmap to systematically tackle design inefficiencies while ensuring smooth adoption by the team.

This structured approach ensured that every improvement was data-driven, prioritized for impact, and tailored to the team’s real needs.

1. Reducing Design Debt & Structuring the UI Kit

📔 Context

The UI Kit was not properly structured, leading to:

Unclear hierarchy between core components and contextual elements.

Heavy, unmanageable files slowing down Figma’s performance.

Inconsistent styles across the product, with missing design foundations.

No clear rules regarding how do we should use the Design System from RSI

No consistency in naming conventions across files.

🚨 Problem & Consequences

Broken components & missing styles led to design inconsistencies and slowed production.

Duplicate components due to a lack of centralization, increasing maintenance complexity.

Fear of updating components due to potential breakage, leading to stagnation.

Lack of a standardized naming system resulted in designers spending unnecessary time searching for the right elements + Duplicate components with different names

💊 Solution

Audit & Cleanup → Identified and fixed broken components, ensuring proper categorization.

Style Unification → By linking the missing styles to our components.

UI Kit Structuring → Separated base components (source of truth) from contextual components, following atomic design principles.

Poker-DS & RSI-DS Integration → Created a bridge with RSI’s DS using shared color variables and some common components while keeping Poker’s independence.

Established clear Design Rules → Defined a consistent naming convention for components, styles, and variants.

2. Handoff & Documentation Inefficiencies

📔 Context

There was no structured process for documentation, and handoff was inefficient:

Specs were scattered between Slack, Asana, and Figma branches.

Figma branch was underutilized, forcing manual, time-consuming handoff.

Documentation was out of date

🚨 Problem & Consequences

Unclear specs led to misunderstandings and delays in development.

Risk of losing information due to lack of proper tracking.

Developers had to manually ask for details, slowing down implementation.

💊 Solution

Created a centralized Figma repository → One space for all documentation, including navigation structure, design specs, animation samples, and user requirements. The ideal solution would have been to use ZeroHeight, but we didn’t have a license. Confluence had a major drawback—it couldn’t automatically update design exports when pushing an update to an interface or a component, making it less efficient for maintaining up-to-date documentation.

Standardized the Handoff Process → Improved the use of Figma branch to freeze the design for the dev, the best solution would be to used figma dev mode to automatized the process but the features were judged not useful by the dev who were not comfortable to use it

Defined a clear file structure → Avoiding unnecessary copies of the same component across different branches.

3. Broken Collaboration with RSI & Poker’s Isolation

📔 Context

No collaboration with RSI’s DS team, leading to redundant work.

RSI made unilateral changes without interrogating Poker designers.

Poker designers preferred working independently, fearing slow responses from RSI.

🚨 Problem & Consequences

Duplication of effort, with both teams unknowingly building the same components.

Poker designers “froze” RSI components instead of keeping them linked, losing updates.

Lack of Dev optimization, as teams worked in silos.

💊 Solution

Set up a communication process → A Kanban board + dedicated Slack channel for transparent tracking of requests with RSI.

Created a Figma Sandbox → Allowing Poker designers to iterate and propose changes before requesting integration.

4. File & Branching Organization Issues

📔 Context

No governance on Figma branches, leading to conflicts and crashes.

Designers worked on the same file simultaneously, causing merge issues.

No distinction between production-ready and exploratory designs.

🚨 Problem & Consequences

Frequent crashes & lost work due to unclear merging rules.

Difficult to track the “true” version of a component.

Too many copies of the same component, making updates tedious.

💊 Solution

✔ Governance Rule → One designer per component page update per sprint.

✔ Branching Guidelines → Clear separation process between current production, upcoming features, and exploratory design.

5. Lack of Accessibility & UX Tracking

📔 Context

No accessibility audit was ever conducted.

No user tracking to measure feature usability.

🚨 Problem & Consequences

Potential compliance issues with accessibility standards.

Without user behavior data, it was hard to prioritize UX improvements

💊 Solution

Integrate accessibility plugins → To systematically check component compliance.

Introduce UX feedback loops → Conduct user voting sessions on the roadmap product release & internal testing by playing on the platform to detect usability issues.

Learnings & Key Takeaways

Area	Key Learnings
Design System Impact	• More structured workflows enabled faster iterations • Well-organized UI Kit reduced inconsistencies
Documentation & Handoff	• Centralized documentation improved reference efficiency • Structured handoff reduced developer misunderstandings
Collaboration	• Structured link between DS systems improved resource sharing • Better team communication prevented redundant work
File Organization	• Clear versioning rules reduced merging issues • Separate production/exploratory designs improved clarity
UX & Accessibility	• Systematic accessibility checks ensure compliance • User behavior tracking guides improvements

🔥

Conclusion

By structuring the UI Kit, optimizing handoff, improving collaboration, and implementing clear file governance, the BetRivers Poker team significantly improved design efficiency and product quality. These changes not only enhanced production speed but also reduced technical debt, ensuring a more scalable and maintainable design system.

🚀

Next Step

• Fully integrate accessibility best practices in all component creation.

• Improve data-driven UX tracking with real user analytics.

• Expand collaboration with RSI DS for better long-term alignment.

Mission 2 : Designing & Structuring the MTT & Detail Lobby

📒

Context

When I joined the MTT Lobby & Detail Lobby project, an initial version of the designs already existed, but nothing had been developed yet. My role was to structure, finalize, and optimize the user experience while ensuring an efficient handoff with developers to accelerate production.

🎯

Scope of responsibility

Structured and finalized incomplete designs, covering all edge cases for dev handoff

Established Figma branch methodology for feature-level handoff isolation

Defined adaptive layout rules across desktop and mobile

Created modular MTT template system supporting multiple tournament formats

Main Challenge

An existing but incomplete design → Many use cases were not anticipated.

No handoff structure → Risk of development bottlenecks and inconsistencies.

Confusing navigation and information hierarchy → Lack of clarity in interactions.

No user validation, but strong benchmarking → Features were already tested by competitors (PokerStars, GGPoker), but the presentation needed optimization.

1. An Incomplete Design That Required Continuous Adjustments

📔 Context

When I joined the MTT Lobby & Detail Lobby project, some initial designs had been created, but they were not finalized. Many use cases had not been anticipated, leading to inconsistencies and gaps during development.

🚨 Problem

Early designs required constant updates as new edge cases surfaced.

Several scenarios were not covered, causing uncertainty for developers.

Risk of incomplete or incorrect implementation due to a lack of clear documentation.

💊 Solution

Set up an iterative validation process → I structured the interface into distinct features, allowing for progressive iteration while collaborating closely with developers.

Implemented a Figma branching system → Each feature was isolated in a branch, preventing conflicts and enabling step-by-step refinement.

Modular file organization → I created a layout Breakdown for desktop and mobile to structure various interface modules, ensuring cross-platform consistency.

Close collaboration with UX and UI designers → We identified all potential scenarios and refined the visual identity to ensure a smooth implementation.

2. No Structured Handoff, Leading to Development Issues

📔 Context

The project lacked a structured handoff process between the design and tech teams. This resulted in constant back-and-forth, significant time loss, and misinterpretations during development.

🚨 Problem

No defined handoff methodology → Specifications were scattered across Slack, Asana, and Figma.

Unfinalized designs at the time of development, causing developer confusion.

Developers struggled to track updates, leading to incorrect implementations.

💊 Solution

Dedicated Figma branch system → Each feature was isolated within a dedicated branch, enabling step-by-step validation before integration.

Centralized Documentation → I created a structured repository on Figma containing specifications, components, and interaction rules. The main branch holds the complete documentation and specs, while each feature branch includes only the relevant documentation for its scope. This approach prevents developers from being overwhelmed with excessive information and ensures they receive the right details at the right time, aligned with the current sprint’s needs.

Design freeze process → At the beginning of each sprint, designs were locked before development, ensuring accurate implementation without mid-sprint changes.

Improved inter-team communication → I established a clear validation framework, reducing friction and speeding up implementation.

3. Poor Information Hierarchy

📔 Context

Critical information for players (rankings, buy-ins, blinds levels, etc.) was poorly structured, making the interface difficult to navigate and interpret.

🚨 Problem

Confusing presentation of key tournament details.

Lack of clarity in content organization.

Needed better readability and navigation to improve the user experience.

💊 Solution

Complete redesign of content structure → Based on data from Rank & Chip Summary, Tournament Summary, and Game Card List, I structured elements more intuitively.

Standardization of display patterns → Defined reusable components to ensure visual and informational consistency across all pages.

Benchmarking of best industry practices → Studied competitors like PokerStars and GGPoker, refining readability and UI ergonomics.

4. Ensuring Adaptability Between Desktop & Mobile

📔 Context

The project needed to be fully responsive, but no clear adaptation logic had been defined before my involvement.

🚨 Problem

No defined adaptability rules → Risk of inconsistencies between desktop and mobile.

Rigid components that were difficult to scale for different screen sizes.

Lack of clear guidelines for transitioning between desktop and mobile views.

💊 Solution

Developed a high-performance adaptive layout → I documented adaptation rules through Desktop Adaptive Layout Breakdown and Mobile Adaptive Layout Breakdown.

Created flexible components → I built modular structures, ensuring a smooth transition between desktop and mobile without requiring full redesigns.

Defined clear mobile behavior guidelines → Focused on scrollable behaviors and sub-navigation tab handling to ensure a seamless experience.

5. Managing Multiple Tournament Types

📔 Context

The MTT tournaments included multiple formats (Freezeout, Knockouts, Satellite, Re-Entry etc…), but there was no standardized template to efficiently structure them.

🚨 Problem

Too many variations to handle, without a clear template system.

Risk of errors in displaying tournament-specific information.

💊 Solution

Created the MTT Template Lobby → A modular framework that standardized tournament layouts while maintaining flexibility

Designed specific components for each tournament type → Detailed templates optimized for Freezeout, Knockouts, Re-Entry, and Satellite tournaments.

Optimized the information display for each tournament → Clarified the ranking tables, prize pools, and registration details.

Created MTT Sample a file dedicated to represent the different styles available for the MTT appearance on the different areas (Table,Mtt Lobby,Mtt Dt Lobby,Result,Buy-In)

Learnings

🔹 Structuring an ongoing project without starting from scratch → A methodical and progressive approach.

🔹 A good handoff doesn’t happen by chance → Feature breakdown and branch organization are key.

🔹 Adaptability is essential → Implementing a flexible and modular design to ensure cross-platform consistency.

📊

Measurable Results

+80% efficiency in feature implementation due to a clear and progressive design structure.

-90% tech feedback related to unclear handoff.

Full adoption of the MTT Template Lobby → Standardizing the design to facilitate new feature additions.

⭐

Why Does It Make a Difference?

Scalability & Structure → A more organized, structured, and easily maintainable project.

Optimized Handoff → Smoother collaboration with developers, reducing errors and implementation delays.

Enhanced UX → A clearer, more intuitive, and responsive experience across desktop and mobile.

Standardized MTT Tournament Structure → A modular solution that allows for easy integration of new tournaments.

🚀

Next Step

Integrate analytics and UX tracking to refine the experience based on real usage.

Expand the handoff methodology to other projects to standardize the process.

Standardize and automate handoff management using Figma’s Dev Handoff feature

Mission 3 : Enhancing User Engagement with Micro-Interactions & Gesture Design

📒

Context

In an online poker experience, every second matters. Micro-interactions and gestures play a crucial role in creating a seamless and intuitive experience for players.

While users expect an interactive and engaging UI, interactions must also be quick, responsive, and non-intrusive to avoid disrupting the core poker experience. The challenge was to design micro-interactions that feel natural, intuitive, and non-distracting while optimizing usability across both desktop and mobile.

🎯

Scope of responsibility

Owned interaction design across desktop and mobile, defining gesture logic per platform

Resolved feature conflict zones (Color Marking, BB View, HeroIQ, Chat) through interaction hierarchy mapping

Delivered motion specs via Rive and Figma prototypes for zero-ambiguity dev handoff

Defined hover, selection, and transition states for accessibility and clarity

Interaction Design Process & Implementation Strategy

💡

Workflow Optimization

Figma Branches → Organized feature isolation & iterative updates.

Handoff Documentation → Detailed Asana specs & color-coded Figma guidelines.

Motion Design with Rive → Defined transition behaviors for all micro-interactions.

🤝

Developer Collaboration

Live prototype testing before handoff.

Slack & Asana coordination for rapid iteration & feedback loops.

Real-time dev reviews to fine-tune interactions before implementation.

🧪

Testing & Iteration

Internal playtesting → Feedback from company power users.

A/B testing for optimization → Refined interactions based on live usage data (not implemented yet)

Post-launch iteration → Fine-tuning gesture responsiveness based on real-world performance.

Key Interaction Features & Design Solutions

1. On-Table Themes & Customization

🎨 Allowing users to personalize their poker experience while preserving game clarity.

📔 Context

If the menu overlaps the action zone, it could block game decisions.

Hover and selection states need to be distinct to prevent confusion.

Developers needed clear specifications to match UI colors and animations correctly.

🚨 Problem

If the menu overlaps the action zone, it could block game decisions.

Hover and selection states need to be distinct to prevent confusion.

Developers needed clear specifications to match UI colors and animations correctly.

💊 Solution

Dynamic menu positioning → Prevents obstruction by adjusting based on click zones.

Hover & selection feedback → Clearly distinguishes preview vs. applied selection.

Color-coded developer handoff → Ensures correct application of UI elements.

2. Color Marking & Notes UI

🕹️ Helping players track opponents without interfering with in-game interactions.

📔 Context

Poker players need to mark opponents (e.g., aggressive, passive) and take quick notes during gameplay. This feature must be quickly accessible without conflicting with other UI elements.

🚨 Problem

Conflicts with BB View, HeroIQ Info, and Card Backs customization.

Need for gesture-based differentiation between selecting a note and marking a player.

Developers needed gesture-specific logic to implement correctly on mobile & desktop.

💊 Solution

Defined interaction zones → Prevented feature overlaps by assigning distinct UI spaces.

Gesture logic

	Color Marking	BB View	HeroIQ Info
Mobile	Long press on opponent	Tap on Hero’s nameplate	Tap on opponents or Hero
Desktop	Right-click on opponent avatar	Right-click on Hero or opponent nameplate	Hover over opponents or Hero

Figma + Rive integration → Used Rive to create a bridge between Figma to support the handoff

3. Player Chat & Emoji System

💬 Enhancing the social aspect of poker while maintaining a distraction-free environment.

📔 Context

As it’s also a social game, poker players are used to interacting with quick reactions during gameplay.

🚨 Problem

Players must react quickly without breaking focus

The appearance of the emoji or chat bubble on avatars should not prevent the game from being read.

Most-used reactions should be prioritized.

The chat should simulate an open experience while preventing toxic messages.

💊 Solution

Slot-based emoji system → Enables quick reaction swapping.

Reaction prioritization → Highlights LOL, Nice Hand, Yolo, based on real user data.

Simulated freedom → Users pick from pre-approved messages, avoiding toxicity.

Mobile layout optimization → Preserved space in tab bar for mobile for future features.

4. Tooltips & Toasts (UX Feedback Mechanisms)

🤖 Providing real-time feedback without cluttering the interface.

📔 Context

Poker relies on real-time decisions. Players need instant feedback (e.g., successful actions, errors) without being overwhelmed.

🚨 Problem

Tooltips must not overlap essential game areas.

Toasts should be visible but non-intrusive.

💊 Solution

Adaptive tooltip positioning → Avoids blocking critical elements.

Auto-dismissal logic → Ensures optimal visibility without excessive delay.

Smooth animations → Lightweight fade-in/out transitions.

Learnings

Designing micro-interactions in a fast-paced gaming environment presented a unique set of challenges. One of the key takeaways was the importance of balancing interaction complexity with user efficiency—ensuring that every action felt instantaneous, intuitive, and non-disruptive. The project reinforced the need for precise interaction hierarchy, where each gesture had a clear and distinct purpose, avoiding feature conflicts (e.g., Color Marking vs. HeroIQ).

Additionally, the experience highlighted the value of structured design documentation and iterative testing. Working closely with developers through Figma branches, Asana specs, and Rive animations allowed for smoother integration and faster adjustments based on real-world feedback. The collaborative approach across design, development, and UX research was key to refining gestures and ensuring seamless cross-platform interactions.

Lastly, we learned that UX optimizations should be data-driven. Through internal testing and real usage data, we were able to refine reaction speed, menu placement, and interaction timing to align with player expectations, improving overall usability and engagement.

📊

Measurable Results:

Interaction logic fully documented per platform (desktop gestures vs mobile gestures), eliminating dev interpretation gaps

Feature conflict matrix delivered (Color Marking, BB View, HeroIQ, Chat) preventing overlapping gesture assignments

Handoff time reduced through detailed motion specs (Rive) and structured Figma branches, consistent with the -35% measured across Mission 2

Mission 4: Documentation & Handoff process

📒

Context

As a Senior Product Designer, I was responsible for structuring the documentation and handoff process to streamline collaboration between designers and developers. Given the complexity of poker interfaces and the need for precise UI specifications, a clear and scalable process was critical to ensure smooth implementation.

🎯

Scope of responsibility

Established the full documentation and handoff process in the absence of Figma Dev Mode

Structured Figma files, naming conventions, and component documentation as the team's single source of truth

Coordinated feature-level handoff through Figma branches with progressive validation

Delivered detailed animation and interaction specs (Rive, Asana) to eliminate dev interpretation gaps

Maintained centralized guidelines across Figma, Asana, and Confluence

Main Challenge

No standardized handoff process	Specs were scattered across Slack, Asana, and Figma, causing confusion.
Developers not comfortable using Figma	Unable to leverage Figma Dev Mode, forcing a manual and highly detailed documentation workflow.
High complexity of UI interactions	Required step-by-step breakdowns, detailed annotations, and precise component specifications to prevent misalignment.
Lack of a centralized documentation hub	No clear system to track component status, UI behaviors, or variations across game states.

Given these constraints, a structured approach was necessary to ensure that the handoff process remained efficient, scalable, and error-free.

Structuring the Documentation for Clarity & Efficiency

📔 Context

To make UI specifications clear and actionable, I implemented a systematic approach to documentation, ensuring that every component, feature, and interaction had a dedicated reference.

🚨 Problem

No clear file organization → Difficult for developers to navigate design files and find relevant specs.

Component variations were not properly documented → Resulted in inconsistencies in implementation.

Lack of guidelines on naming conventions and file structure → Made maintenance and scaling difficult.

💊 Solution

📁 File Structuring & Naming Conventions → Established a modular system, categorizing elements into base components, variants, and feature templates to improve scalability.

📖 Component Documentation → Created detailed documentation outlining component usage, interactive behaviors, and responsive adaptations.

🏗 Design Rules & Standardization → Defined UI principles and constraints to ensure uniformity across devices and game states.

Implementing an Effective Handoff Process

📔 Context

Since Figma Dev Mode was not an option, a manual but highly detailed handoff approach was required to provide developers with precise specifications.

🚨 Problem

No clear process for transferring design specs → Led to frequent back-and-forth adjustments with developers.

Interactions and animations were not fully documented → Resulted in inconsistencies during implementation.

Developers needed granular details on UI behaviors → Required a step-by-step breakdown of component interactions.

💊 Solution

🔀 Feature Isolation with Figma Branches → Ensured that each iteration was documented progressively, preventing major conflicts.

📊 Detailed Visual Handoff → Provided color-coded annotations, spacing guides, and UI behavior charts to minimize ambiguity.

🎬 Animation & Interaction Specifications → Used Rive animations and motion specs to clarify transitions, hover effects, and interactive states.

📋 Centralized Documentation in Asana & Confluence → Created a single source of truth for all design specs, component logic, and UI rules.

Key Documentation & Handoff Solutions

Problem	Solution
Specs were scattered and unstructured	Created a centralized documentation system with clear file organization and naming conventions.
Developers had difficulty interpreting UI behaviors	Provided detailed visual handoff specs, including annotations and UI behavior charts.
UI interactions lacked documentation	Defined precise interaction logic with step-by-step breakdowns and motion specs.
No shared knowledge base	Integrated documentation into Figma & Asana for easy reference and version tracking.

Learnings

📚 Key Learnings

Early developer involvement is crucial to ensure alignment and reduce revisions.

A well-organized handoff and documentation system significantly improves workflow efficiency and team collaboration.

By implementing a clear, structured, and highly detailed documentation process, I ensured that designs were seamlessly translated into development. Despite not using Figma Dev Mode, my manual documentation system provided developers with precise, actionable specs, leading to faster, error-free implementation.

📊

Measurable Results:

Reduced UI-related errors, ensuring smoother implementation.

Faster handoff process, minimizing unnecessary back-and-forth.

Improved design consistency, allowing better scalability and maintenance.

Key Result

🚀

BetRivers Poker launched in Pennsylvania in October 2024 and expanded to 4 states (PA, MI, DE, WV) within 8 months. The design system, handoff process, and MTT template structure shipped during my tenure directly supported this multi-state rollout without requiring system rework.

Outcomes

-90% tech feedback on handoff after centralizing specs and introducing Figma branch methodology

-35% handoff cycle time through structured branch system and centralized documentation

MTT Template Lobby fully adopted by the team, enabling WV, MI and DE tournament integration without system rework

Design System stabilized across 5 dedicated files with naming conventions adopted team-wide

Platform expanded from Pennsylvania to 4 states (PA, MI, DE, WV) within 8 months of launch

BetRivers Poker ranked #1 in the US by Pokerfuse at time of writing

Process constraints

Manual handoff: Dev Mode lacked precision, and devs weren’t comfortable with Figma, making handoff slow and manual instead of automated.

Limited adoption of improvements: The team wasn’t ready to switch to variables over styles, slowing workflow optimization.

DS fragmentation: No full merge with Rush Street Interactive’s DS due to managerial decisions and lack of alignment, resulting in a hybrid DS.

No real user tracking: While we gathered feedback via voting and internal test sessions, we lacked proper tracking to assess real user behavior.

Accessibility deprioritized: Despite the clear need for an audit and structured improvements, accessibility was never prioritized, leaving key issues unresolved.