Top.Mail.Ru
DiClub
← All work
— Financial simulation and interactive decision-making engine

Financial Breakthrough — an interactive financial simulation game

Financial Breakthrough is a browser-based financial simulator that combines GameDev, UX, frontend engineering, and product thinking to teach financial literacy through interactive gameplay and real-world economic scenarios.

The project was designed as a modern alternative to traditional cashflow-style games — transforming financial education into a dynamic digital experience with realtime decision-making systems, progression mechanics, and immersive interaction.

Players manage personal finances within a constantly changing economic environment where income, debt, inflation, investments, and market events directly shape their financial trajectory.

Client
LEX
Year
2026
Role
Game Product Designer, UX/UI Designer, Frontend Developer, Product Architect
Timing
3 months
Team
Product Designer, Frontend Developer, Game Mechanics Designer, UX Research
Financial Breakthrough — an interactive financial simulation game
— Task

Build a modern financial simulator beyond outdated cashflow-style games

The primary goal was to create an interactive web-based product capable of teaching financial systems through engaging gameplay rather than static educational content.

The project needed to combine:
game mechanics;
behavioral economics;
UX onboarding;
financial progression systems;
interactive dashboards;
and emotional engagement.

Another major challenge was adapting the platform for international audiences by redesigning terminology, UX patterns, and financial logic for US and European users.

— Approach

Game mechanics as a product education system

The experience was built around the concept of “learning through action,” where users explore financial systems by making decisions inside a simulated economic environment.

The gameplay loop includes:
monthly financial cycles;
income and expenses;
debt systems;
inflation mechanics;
market fluctuations;
investment strategies;
and progression systems.

Particular attention was given to:
UX onboarding;
progression clarity;
interface readability;
gamification;
retention systems;
behavioral feedback;
and emotional interaction design.

Financial Breakthrough was designed not just as a browser game, but as a scalable educational digital product with complex frontend architecture and interactive UX systems.

Scope
Game DesignFinancial SimulationBrowser GameUX/UI DesignGamificationProduct DesignFrontend DevelopmentBehavioral UXEducational ProductInteractive DashboardSaaS UX
— Process

Steps from brief to launch

01

Research & Strategy

Analysis of behavioral economics, financial simulators, and retention mechanics.

02

Core Mechanics

Designing monthly financial cycles, progression systems, and decision-making logic.

03

UX Architecture

Building onboarding flows, gameplay scenarios, and interaction systems.

04

Financial Systems

Developing debt mechanics, inflation systems, investments, and market events.

05

UI/UX Design

Creating dashboards, financial interfaces, statistics, and feedback systems.

06

Frontend Development

Implementing browser-based game architecture and interactive frontend systems.

07

Localization

Adapting UX, terminology, and gameplay scenarios for international audiences.

08

Testing & Iteration

UX testing, balancing mechanics, and iterative product improvements.

Financial Breakthrough is a browser-based financial simulation game that combines GameDev, UX/UI design, frontend engineering, and behavioral product thinking into a single educational digital ecosystem.

The project was created as a modern alternative to traditional financial board games and cashflow simulators. Instead of static educational content, users interact with a living financial environment where decisions shape long-term outcomes and economic progression.

The gameplay system includes monthly financial cycles, investment strategies, debt management, inflation mechanics, market events, and interactive progression systems. Every mechanic was designed to simulate real-world financial behavior while maintaining engagement and accessibility.

A major focus of the project was UX architecture and emotional interaction. The product includes onboarding systems, interactive dashboards, behavioral feedback loops, and retention mechanics that transform financial education into an immersive digital experience.

Another important aspect was international localization. The simulator was adapted for US and European audiences with revised UX patterns, financial terminology, and region-specific economic logic.

Financial Breakthrough demonstrates how GameDev, educational systems, frontend engineering, and UX design can work together to create interactive products that teach through engagement rather than passive content consumption.

You can study the project here

Project stack
ReactTypeScriptTailwind CSSViteZustandReact QueryFramer MotionRadix UIRechartsFirebaseNode.jsFigmaFigJam
SPRING Window Handle — product card design for SKF
Next case →

SPRING Window Handle — product card design for SKF

· 2026