Matthew Hotchkiss

Rite of Titans mobile game

Client: Apella Games

Agency: UX Magicians

Role: Lead UX/UI Designer

Teams: Remote team - 5 people

Duration: 12 months

Goal: To set a brand style system and flows for a new mobile sports game.

Outcome: A beautifully crafted futuristic but steam punk style experience.

Focus: Direction, UX, UI, Prototyping, Motion Design, 2D, 3D Animation

Client: Apella Games

Agency: UX Magicians

Role: Lead UX/UI Designer

Teams: Remote team - 5 people

Duration: 12 months

Goal: To set a brand style system and flows for a new mobile sports game.

Outcome: A beautifully crafted futuristic but steam punk style experience.

Focus: Direction, UX, UI, Prototyping, Motion Design, 2D, 3D Animation

Project Introduction

Mobile gaming is one of the most competitive entertainment industries, where visual identity, usability, and immersion all play a crucial role in capturing player attention. New titles must not only introduce engaging gameplay but also present a clear aesthetic and interface system that supports player interaction across menus, progression systems, and match preparation. The Rite of Titans project began with the goal of designing the user experience and visual identity for a new mobile sports game while building a scalable design framework that could support future development. Working with Apella Games through the agency UX Magicians, the brief was to establish a distinctive visual direction and interaction system that would differentiate the game in a crowded mobile market while ensuring the interface remained intuitive for players.

As Lead UX/UI Designer, my role involved shaping the design direction of the game, defining the interface language, and creating a design system capable of supporting all gameplay flows. The project ran for twelve months with a small remote team of five people, requiring close collaboration across time zones and disciplines. Alongside creating interface designs, I focused on establishing a consistent brand style system that could guide the visual identity of the game and ensure that new screens, assets, and interactions could be developed efficiently as the project evolved.

Mobile gaming is one of the most competitive entertainment industries, where visual identity, usability, and immersion all play a crucial role in capturing player attention. New titles must not only introduce engaging gameplay but also present a clear aesthetic and interface system that supports player interaction across menus, progression systems, and match preparation. The Rite of Titans project began with the goal of designing the user experience and visual identity for a new mobile sports game while building a scalable design framework that could support future development. Working with Apella Games through the agency UX Magicians, the brief was to establish a distinctive visual direction and interaction system that would differentiate the game in a crowded mobile market while ensuring the interface remained intuitive for players.

As Lead UX/UI Designer, my role involved shaping the design direction of the game, defining the interface language, and creating a design system capable of supporting all gameplay flows. The project ran for twelve months with a small remote team of five people, requiring close collaboration across time zones and disciplines. Alongside creating interface designs, I focused on establishing a consistent brand style system that could guide the visual identity of the game and ensure that new screens, assets, and interactions could be developed efficiently as the project evolved.

Project Story

At the start of the project, the visual identity and interface system for the game were still largely undefined. While the gameplay concept existed, the structure of the menus, player flows, and overall visual tone needed to be developed from the ground up. Mobile sports games typically rely on familiar structures such as team management screens, match preparation menus, and progression systems, but the challenge for Rite of Titans was to ensure that these structures felt unique within the world of the game. Early exploration focused on defining the visual language that would shape the player’s experience. The direction that emerged blended futuristic technology with steampunk-inspired elements, combining metallic textures, mechanical detailing, illuminated interface accents, and layered panels that created a sense of depth and machinery within the UI. This aesthetic helped establish a world that felt both technologically advanced and industrial, reinforcing the tone of a competitive sports universe set within an alternative technological future.

As the design work progressed, the number of screens and assets began to grow rapidly. Much of the early design work had been created in Illustrator, which worked well for static artwork but became increasingly difficult to manage as the interface expanded. Maintaining consistency across menus, components, and visual elements became more challenging, and collaboration within the remote team required a more efficient system for managing assets and iterating on designs. The project was reaching a point where a stronger design infrastructure was needed to support the scale of the interface and the pace of development.

At the start of the project, the visual identity and interface system for the game were still largely undefined. While the gameplay concept existed, the structure of the menus, player flows, and overall visual tone needed to be developed from the ground up. Mobile sports games typically rely on familiar structures such as team management screens, match preparation menus, and progression systems, but the challenge for Rite of Titans was to ensure that these structures felt unique within the world of the game. Early exploration focused on defining the visual language that would shape the player’s experience. The direction that emerged blended futuristic technology with steampunk-inspired elements, combining metallic textures, mechanical detailing, illuminated interface accents, and layered panels that created a sense of depth and machinery within the UI. This aesthetic helped establish a world that felt both technologically advanced and industrial, reinforcing the tone of a competitive sports universe set within an alternative technological future.

As the design work progressed, the number of screens and assets began to grow rapidly. Much of the early design work had been created in Illustrator, which worked well for static artwork but became increasingly difficult to manage as the interface expanded. Maintaining consistency across menus, components, and visual elements became more challenging, and collaboration within the remote team required a more efficient system for managing assets and iterating on designs. The project was reaching a point where a stronger design infrastructure was needed to support the scale of the interface and the pace of development.

The turning point in the project came when the team transitioned away from static design files and moved the entire interface system into Figma. I led this transition, restructuring the design work into a scalable component-based system that could support the project as it continued to grow. Moving into Figma allowed us to establish a shared design environment where the team could collaborate more effectively while building a reusable component library that defined the structure of the interface.

Within this new system we created modular UI components including navigation elements, player cards, interface panels, status indicators, and interactive controls. These components could be reused across multiple screens, ensuring visual consistency while dramatically accelerating the design process. Instead of recreating assets each time a new screen was needed, the team could assemble interfaces from the design system and focus on refining gameplay flows and visual polish. The design system also made it easier to update global styles or adjust interface behaviours as the game evolved.

Alongside building the design system, the project involved extensive work across motion design and visual assets. I contributed to the development of interface animations, transitions, and interactive feedback that helped bring the futuristic steampunk aesthetic to life. The project also included both 2D and 3D animation elements that supported the visual identity of the game world. Using Figma’s prototyping capabilities, we built detailed interactive prototypes that simulated player journeys through menus, team management screens, and gameplay preparation flows. These prototypes allowed the team to test interactions, refine the experience, and ensure the interface supported the pace of mobile gameplay.

The turning point in the project came when the team transitioned away from static design files and moved the entire interface system into Figma. I led this transition, restructuring the design work into a scalable component-based system that could support the project as it continued to grow. Moving into Figma allowed us to establish a shared design environment where the team could collaborate more effectively while building a reusable component library that defined the structure of the interface.

Within this new system we created modular UI components including navigation elements, player cards, interface panels, status indicators, and interactive controls. These components could be reused across multiple screens, ensuring visual consistency while dramatically accelerating the design process. Instead of recreating assets each time a new screen was needed, the team could assemble interfaces from the design system and focus on refining gameplay flows and visual polish. The design system also made it easier to update global styles or adjust interface behaviours as the game evolved.

Alongside building the design system, the project involved extensive work across motion design and visual assets. I contributed to the development of interface animations, transitions, and interactive feedback that helped bring the futuristic steampunk aesthetic to life. The project also included both 2D and 3D animation elements that supported the visual identity of the game world. Using Figma’s prototyping capabilities, we built detailed interactive prototypes that simulated player journeys through menus, team management screens, and gameplay preparation flows. These prototypes allowed the team to test interactions, refine the experience, and ensure the interface supported the pace of mobile gameplay.

With the design system fully established, the team was able to move significantly faster when designing new gameplay features and interface screens. The modular components ensured visual consistency across the experience while giving designers the flexibility to adapt screens as the gameplay evolved. Updates that would previously have required rebuilding assets could now be handled quickly by modifying components within the system.

The improved workflow also strengthened collaboration between designers and developers. With a clear component structure and reusable assets, developers could more easily interpret the design intent and implement the interface within the game engine. As the interface matured, the visual language of the game became more cohesive, reinforcing the futuristic yet mechanical identity of the Rite of Titans world. Menus, player interfaces, and gameplay flows all followed the same design principles, creating an experience that felt both polished and immersive.

With the design system fully established, the team was able to move significantly faster when designing new gameplay features and interface screens. The modular components ensured visual consistency across the experience while giving designers the flexibility to adapt screens as the gameplay evolved. Updates that would previously have required rebuilding assets could now be handled quickly by modifying components within the system.

The improved workflow also strengthened collaboration between designers and developers. With a clear component structure and reusable assets, developers could more easily interpret the design intent and implement the interface within the game engine. As the interface matured, the visual language of the game became more cohesive, reinforcing the futuristic yet mechanical identity of the Rite of Titans world. Menus, player interfaces, and gameplay flows all followed the same design principles, creating an experience that felt both polished and immersive.

Conclusion

The Rite of Titans project demonstrated how strong design direction combined with scalable systems can shape the identity of a digital product. By establishing a clear visual language and building a flexible design system, the team was able to create a cohesive interface that supported both gameplay functionality and the unique aesthetic of the game world. The transition from Illustrator to Figma significantly improved collaboration and workflow efficiency, allowing the team to move quickly while maintaining consistency across the experience. Ultimately, the project delivered a visually distinctive mobile game interface that balanced stylistic ambition with usability, creating an immersive environment that supported player engagement and gameplay flow.

The Rite of Titans project demonstrated how strong design direction combined with scalable systems can shape the identity of a digital product. By establishing a clear visual language and building a flexible design system, the team was able to create a cohesive interface that supported both gameplay functionality and the unique aesthetic of the game world. The transition from Illustrator to Figma significantly improved collaboration and workflow efficiency, allowing the team to move quickly while maintaining consistency across the experience. Ultimately, the project delivered a visually distinctive mobile game interface that balanced stylistic ambition with usability, creating an immersive environment that supported player engagement and gameplay flow.

Takeaways

The Rite of Titans project reinforced several important lessons about designing digital games and collaborative design systems.

First, strong art direction helps differentiate games in competitive markets. Establishing a clear visual language early in development creates a foundation for all interface and gameplay design.

Second, scalable design systems are essential for growing projects. Reusable components allow teams to iterate faster while maintaining visual consistency.