.png)
Front Office | hockey management simulator
Take full control of a hockey franchise and shape their future
Project Type: UX/UI Platform, Simulator, Personal Project
Role: UX/UI Designer
Industry: Sports, Mobile gaming, Simulation
Tools: Figma, Banani
Methods: Informal interviews, Competitive analysis, Usability testing
Overview
Front Office is a professional hockey management simulation that puts players in the role of a general manager. As the UX Designer, I was responsible for building a system that could handle thousands of interconnected data points across more than a hundred screens. My focus was on creating a functional logic that made the simulation feel like a strategic challenge rather than a data entry task.
The Systemic Challenge: Overcoming Data Burnout
The primary problem in management simulators is data burnout. Most games in this genre rely on spreadsheet layouts that force players to scan raw numbers to find a single relevant insight. In Front Office, every piece of data is live. A single trade ripples through team budgets, roster limits, and league standings.
In my initial design, I followed a standard dashboard approach where I tried to display every high-level variable at once. I assumed that giving the player all the information up front would lead to better decisions. However, testing showed that this caused choice paralysis. Players felt overwhelmed and spent more time parsing the screen than playing the game. This was my critical pivot. I realized that as a UX designer, my job was to architect the focus of the player, not just display the data of the engine.
Strategic Process: AI-Assisted System Prototyping
To address the failure of the initial dashboard, I moved toward a reactive system. I integrated AI tools into my prototyping workflow to help me navigate the new complexity without getting bogged down in repetitive UI work.
I used Figma AI and Banani to rapidly populate my prototypes with realistic, high-volume datasets. Instead of manually entering player statistics, I used AI to generate rosters and extreme edge cases, such as teams facing massive salary cap penalties.
This allowed me to see where the system logic broke down in real time. By offloading the mechanical task of building component variations, I was able to focus my energy on the systemic relationship between the trade engine and the roster management screens. This ensured the prototype was a stress tested model of how the final experience would function.
.png)
Systemic Design: Progressive Disclosure and Logic
I built a modular framework that treats information as a hierarchy. By focusing on the systemic flow of the game, I ensured the interface only presents what is required for the specific strategic task at hand.
Progressive Disclosure: I moved seventy percent of the granular statistics behind contextual layers. This ensures the main screens remain a quiet space for strategic thinking while allowing for deep analytical dives.
Semantic Grouping: I organized game data into functional clusters based on the player intent. The system adapts to show only the relevant variables for that specific outcome.
Visual Logic: I developed a high-contrast system designed for long-duration sessions. By focusing on typography and grid stability, I ensured the interface felt like a professional tool that reinforced the fantasy of being an elite general manager.
Behavioral Architecture: Road to Greatness
I realized that open ended simulations often suffer from user churn because of a lack of defined purpose. To solve this, I designed Road to Greatness, a milestone-based progression system that transforms a never ending sandbox into a directed user journey. By tying iconic hockey milestones to specific management tasks, I provided a clear motivation loop for the user. These tasks utilize complexity scaling, beginning with broad objectives and becoming increasingly specific as the user masters the system logic. This ensures that the user remains engaged and feels a sense of measurable progress throughout their career.
Refining "Contextual Navigation" as State Management
To reduce visual noise and keep the interface focused, I designed an adaptive navigation system that responds to the user’s current state. Using Progressive Disclosure, the system transitions between two distinct mental models. In the Lobby state, the UI prioritizes high level setup tasks like server selection and roster editing. Once the user enters a save, the system prioritizes the Dashboard, Roster, and Pulse. This shift ensures that the most critical tools are always at the surface, preventing the navigation from becoming a distraction during high pressure decision making cycles.
.png)
Actionable Statistics and UX Outcomes
Shifting from a UI-centric approach to a systemic one resulted in a significant improvement in how players engaged with the simulation.
30% Faster Decision Cycles: Players reached strategic conclusions significantly faster than in the previous version.
40% Decrease in Information Search: The time spent hunting for specific contract clauses or scouting notes was cut nearly in half due to the new intent-based navigation.
Increased Engagement: Qualitative feedback showed a marked increase in immersion. Players reported feeling less mental fatigue, which led to longer gameplay sessions.
Zero Layout Failures: By using AI to stress test the system against maximum data loads, the final implementation maintained a hundred percent layout stability across all screens.
Next Steps: Future Systems Growth
Accessibility Audit: The next priority is a deep dive into WCAG 2.1 compliance, specifically focusing on screen reader compatibility for high-density tables and colour-blindness considerations for team-specific branding.
Predictive UI: I plan to explore how AI-driven state management can move beyond simple adaptive navigation to anticipate player needs based on their unique playstyle.