By: Valeria Varlamova, Project Manager at Phenomenon Studio, March 13, 2026

Key Takeaways:

• AirlineSim is a long-running, real-money, browser-based airline management simulation with a loyal user base that has used it for 10+ years. Redesigning such a product posed significant risks compared to typical SaaS redesigns.
• Phenomenon Studio completed the full product redesign in five months using modern technologies, including Vite, React, TypeScript, SCSS, Framer Motion, React Router, and Redux.
• Key outcomes included faster time-to-market for new features, a scalable UI architecture, and measurable increases in user engagement, particularly in flight-scheduling and market-analysis flows.
• This project serves as a case study for how legacy simulation products can modernize without alienating the community that made them successful in the first place.

AirlineSim, a German-developed airline management simulation with a loyal community, posed a unique challenge for redesign. Unlike typical products, AirlineSim had users who had grown accustomed to its quirks. Redesigning such a product required balancing improvement with maintaining a loyal user base that had adapted to the interface over the years.

The challenge wasn’t simply technical. The AirlineSim codebase had accumulated frontend debt due to its legacy. Built before React and TypeScript, the system had fragmented state management and inconsistent UI patterns across modules like fleet management, route planning, and financial reporting. Despite these issues, users had grown accustomed to them and found workarounds, making the challenge less about fixing failures and more about improving an established system.

Choosing the Tech Stack

Given the complexity of AirlineSim, we had to carefully choose tools that would not only modernize the product but also ensure its long-term scalability. Here’s why we chose our tools:

1. Vite: The existing build setup was slow, making iteration time-consuming. With a five-month timeline, Vite drastically improved development speed by reducing hot-reload times from 8 seconds to under 0.6 seconds, enabling more frequent testing.
2. TypeScript: Given the complexity of tracking game state like aircraft positions, market demand, and financial models, we chose TypeScript for its strict typing, ensuring data consistency and preventing visual bugs that could affect strategic decisions.
3. Framer Motion: Framer Motion allowed us to create smooth animations to help players recognize changes in the game environment. This improved decision-making speed, with users spotting market changes 40% faster in animated states compared to static ones.

Research Before Design: Understanding User Needs

Rather than rushing into design, we dedicated the first three weeks to user research. We didn’t rely on surveys; instead, we conducted task-based sessions where users narrated their decision-making processes. This helped us understand how players interact with the system, what data they prioritize, and where the pain points were.

We mapped out 64 interaction steps during a typical gameplay session, covering tasks like route planning, aircraft management, and pricing decisions. After the redesign, this process was streamlined to 38 steps, without removing any features—just eliminating unnecessary steps.

Designing the Dashboard

The dashboard is the heart of AirlineSim. Players use it to manage flights, aircraft, staff, and market competition. The old dashboard was inconsistent and inefficient, leading to delays in decision-making. Our redesign focused on three key principles:

1. Prioritize most-used data: We placed key metrics, such as route performance, at the top of the dashboard to ensure they were immediately accessible.
2. Warnings before confirmations: If a scheduled flight would operate at a loss, the interface displayed a warning before players confirmed the schedule, reducing costly mistakes.
3. One-click undo: The psychological cost of making mistakes in a live simulation with financial consequences is high. We included an easy undo function to reduce hesitation and improve decision-making speed.

Phased Rollout: Redesigning Incrementally

One of the key risks in redesigning a product with a loyal user base is overwhelming them with a major change all at once. To mitigate this, we used a phased rollout. We began by launching the scheduling module, then gathered feedback, made adjustments, and proceeded to other modules like financial reporting and market analysis. This gradual approach helped users adapt to changes without feeling alienated.

Avoiding Common Redesign Mistakes

Through years of experience, we’ve identified several common mistakes that often lead to the failure of redesign projects. Here’s how we avoided them:

1. Designing for power users: It’s common to design based on feedback from vocal users, but this often leads to overlooking the needs of new and intermediate players. We made sure to balance the needs of all users, ensuring that both veterans and newcomers could navigate the system.
2. State management as an afterthought: It’s easy to focus on the visual aspects and neglect the underlying data architecture. In our case, Redux was used to manage game state and ensure stability across the interface.
3. Big bang launch: Launching a complete redesign all at once can be overwhelming for users. We avoided this by releasing new features incrementally, allowing users to get comfortable with each change before moving on to the next.
4. Ignoring mobile optimization: Simulation games are often thought of as desktop-only, but many players play them on their mobile devices. Our redesign included full responsive breakpoints, leading to a measurable increase in mobile usage.

Results: Impact and Outcomes

After five months, the redesigned AirlineSim launched with several significant outcomes:

• Faster time-to-market for new features: The scalable UI architecture enabled faster feature development.
• Deeper engagement: Players spent more time in the game, particularly in flight scheduling and market analysis modules, due to the streamlined workflow.
• Increased user retention: With an incremental rollout and continuous feedback loops, we saw higher retention among the loyal user base.

Comparing Redesign Approaches

Lessons Learned

The AirlineSim rebuild taught us several valuable lessons about redesigning complex digital products:

1. User research is essential: We spent three weeks understanding the user before starting design work. This research phase ensured that we were optimizing for real user needs, not just aesthetic preferences.
2. Phased rollouts work best for existing products: Incremental changes helped us retain the loyal user base while improving the system.
3. State management matters: Ensuring a robust architecture from the start was crucial to the project’s success.
4. Mobile optimization is key: Even for traditionally desktop-centric products, ensuring mobile compatibility is essential for user engagement.

Redesigning AirlineSim was a challenge that required careful balance between modernizing the product and keeping its loyal user base engaged. By using user research, state management tools like Redux, and a phased rollout strategy, we successfully transformed the product into a more scalable, user-friendly experience. The result was faster development cycles, improved user engagement, and a product that was prepared for the future.