Rink Racer
Rink Racer
“Arena Showdown” -Immersive Gaming
Experience For Toronto Maple Leafs
“Arena Showdown” -Immersive Gaming
Experience For Toronto Maple Leafs
“Arena Showdown” -Immersive Gaming Experience For Toronto Maple Leafs
Read More ↓
(My Role)
I owned and led design of Rink Racer for the Toronto Maple Leafs, sponsored by Scotiabank and Scene+. My role involved conceptualizing game flow, shaping user journeys, and crafting mobile UX/UI designs, projection mapping visuals, jumbotron animations, and core visual identities. I played a pivotal role in bringing the project to fruition.
I owned and led design of Rink Racer for the Toronto Maple Leafs, sponsored by Scotiabank and Scene+. My role involved conceptualizing game flow, shaping user journeys, and crafting mobile UX/UI designs, projection mapping visuals, jumbotron animations, and core visual identities. I played a pivotal role in bringing the project to fruition.
CLIENT
Toronto Maple Leafs, Scotiabank, Scene+
YEAR
2023-2024
ROLE
Design Lead
TEAM
MLSE Arcade, MLSE Digital Labs Developer Team
MLSE Arcade, MLSE Digital Lab Developers
Duration
3 months
(The Goal of The Project)
(Goal)
Enhance brand recognition and drive sign-ups through a new digital activation strategy
Enhance brand recognition and drive sign-ups through a new digital activation strategy
Presented by Scotiabank and Scene+, Rink Racer revolutionizes fan engagement during live Toronto Maple Leafs Games with an immersive gaming experience. Utilizing cutting-edge projection systems, the game brings the excitement directly onto the rink. Designed as a multiplayer experience for quick 2-3 minute sessions during intermissions, Rink Racer encourages fans to compete, fostering camaraderie and friendly rivalry within the arena. The project aims to elevate sign-ups and amplify partner brand recognition by delivering a captivating digital experience for fans.
Furthermore, we expanded the game to include a Leafs Playoffs Tailgate version outside the Scotiabank Arena, utilizing large outdoor screens for maximum enjoyment.
Presented by Scotiabank and Scene+, Rink Racer revolutionizes fan engagement during live Toronto Maple Leafs Games with an immersive gaming experience. Utilizing cutting-edge projection systems, the game brings the excitement directly onto the rink. Designed as a multiplayer experience for quick 2-3 minute sessions during intermissions, Rink Racer encourages fans to compete, fostering camaraderie and friendly rivalry within the arena. The project aims to elevate sign-ups and amplify partner brand recognition by delivering a captivating digital experience for fans.
Furthermore, we expanded the game to include a Leafs Playoffs Tailgate version outside the Scotiabank Arena, utilizing large outdoor screens for maximum enjoyment.
(Target Audience)
The target demographic encompasses both men and women spanning ages 20 to 60, actively engaged in the intermission festivities of Leafs games, and eagerly seeking prize-winning opportunities.
The target demographic encompasses both men and women spanning ages 20 to 60, actively engaged in the intermission festivities of Leafs games, and eagerly seeking prize-winning opportunities.
(Initial Concept and Ideation)
(Initial Concept
and Ideation)
The design process began with understanding the flow of the game and digitally sketching out some design concepts to ideate on the visualization of the projection mapping.
For the projection mapping portion, our initial idea was to use 3D models of hockey players as racers and display the game stats as a particle effect. However, after considering it with the team, we decided to use Carlton 3D models to tie the visuals into the team’s branding.
The design process began with understanding the flow of the game and digitally sketching out some design concepts to ideate on the visualization of the projection mapping.
For the projection mapping portion, our initial idea was to use 3D models of hockey players as racers and display the game stats as a particle effect. However, after considering it with the team, we decided to use Carlton 3D models to tie the visuals into the team’s branding.
(Wireframing)
Then it progresses to UI/UX design considerations, ensuring a seamless and exciting experience. We started the design process with outlining the game state of projection mapping, mobile screens, Jumbotron screens and the MC's voice over. After determining the whole game flow, we started wireframing and deciding on the information for each screens. Once the general flow of information was determined, we started 3D modelling some ideas using Cinema 4D.
Then it progresses to UI/UX design considerations, ensuring a seamless and exciting experience. We started the design process with outlining the game state of projection mapping, mobile screens, Jumbotron screens and the MC's voice over. After determining the whole game flow, we started wireframing and deciding on the information for each screens. Once the general flow of information was determined, we started 3D modelling some ideas using Cinema 4D.
(Research Conducted)
We conducted internal research to test the gameplay and mechanics of the game. Our focus was on keeping the game flow simple, ensuring that users can grasp how to play within seconds without any guidance.
(Research Conducted)
(Key Challenges)
We conducted internal research to test the gameplay and mechanics of the game. Our focus was on keeping the game flow simple, ensuring that users can grasp how to play within seconds without any guidance.
Game Play Challenge
Accounted for Various Potential Failure Scenarios In Mid-Game
Simplifying the UX design was paramount to ensuring the game's clarity within a 30-second timeframe. We conducted thorough internal user testing to ensure that every participant could easily read the text on each screen and comprehend the context and game flow without any additional guidance.
We anticipated various potential failure scenarios during the game's execution, including:
Users experiencing poor or no Wi-Fi signal within the arena.
Disconnection of the main computer from the Wi-Fi network during gameplay
Inaccessibility of the game for users
Unexpected crashes occurring mid-game
Through extensive user testing within the arena environment, we identified solutions for each scenario. For instance, implementing a "Connection Lost" screen on users' phones while still allowing access to entry forms ensured continued participation despite Wi-Fi issues. Additionally, incorporating a simulation mode for the projection aspect addressed technical glitches on the main computer, ensuring a seamless experience for users.
(Key Challenges]
(Projection Design)
Game Play Challenge
A large door was prepared as an intro scene, and while Carlton was skating down the rink, the door opens at the right time to reveal information about the prize. The placement of the partner logos on the ice was done in such a way that the logos did not overlap with the existing lines and logos on the rink. Following a fan's scan of the QR code, the projection unveiled the racing track, revealing Carlton dynamically skating down the track.
Carltons' 3D model were animated using Adobe Mixamo and we seamlessly stitched the animations together in Cinema 4D. There are multiple states of Carlton in the game such as running, happy, sad, dancing, waving states.
Simplifying the UX design was paramount to ensuring the game's clarity within a 30-second timeframe. We conducted thorough internal user testing to ensure that every participant could easily read the text on each screen and comprehend the context and game flow without any additional guidance.
Accounted for Various Potential Failure Scenarios In Mid-Game
We anticipated various potential failure scenarios during the game's execution, including:
Users experiencing poor or no Wi-Fi signal within the arena.
Disconnection of the main computer from the Wi-Fi network during gameplay
Inaccessibility of the game for users
Unexpected crashes occurring mid-game
Through extensive user testing within the arena environment, we identified solutions for each scenario. For instance, implementing a "Connection Lost" screen on users' phones while still allowing access to entry forms ensured continued participation despite Wi-Fi issues. Additionally, incorporating a simulation mode for the projection aspect addressed technical glitches on the main computer, ensuring a seamless experience for users.
(Projection Design)
A large door was prepared as an intro scene, and while Carlton was skating down the rink, the door opens at the right time to reveal information about the prize. The placement of the partner logos on the ice was done in such a way that the logos did not overlap with the existing lines and logos on the rink. Following a fan's scan of the QR code, the projection unveiled the racing track, revealing Carlton dynamically skating down the track.
Carltons' 3D model were animated using Adobe Mixamo and we seamlessly stitched the animations together in Cinema 4D. There are multiple states of Carlton in the game such as running, happy, sad, dancing, waving states.
(Mobile + Jumbotron Design)
(Results)
For the mobile and Jumbotron screens, we made the game flow as simple as we could so the users will be able to scan the QR code, pick their team and understand how to play the game as fast as possible. Leveraging the host's announcements facilitated quick comprehension. The dark aesthetic of the mobile screen background aimed to enhance the prominence of the ice projection within the arena, while still clearly indicating each user's team colour.
Fans were excited and cheering for the Carlton bears
Despite the challenge of fans being on the move during intermission, with many heading outside for food and breaks, the strategy proved successful, yielding over 2500 sign ups through the mobile application within a brief 1.5 minute joining window. We have observed the fans getting excited and cheering over which team wins and making positive comments on social media and leaving positive comments on our feedback form field.
(Results)
(Mobile + Jumbotron
Design)
Fans were excited and cheering for the Carlton bears
For the mobile and Jumbotron screens, we made the game flow as simple as we could so the users will be able to scan the QR code, pick their team and understand how to play the game as fast as possible. Leveraging the host's announcements facilitated quick comprehension. The dark aesthetic of the mobile screen background aimed to enhance the prominence of the ice projection within the arena, while still clearly indicating each user's team colour.
Despite the challenge of fans being on the move during intermission, with many heading outside for food and breaks, the strategy proved successful, yielding over 2500 sign ups through the mobile application within a brief 1.5 minute joining window. We have observed the fans getting excited and cheering over which team wins and making positive comments on social media and leaving positive comments on our feedback form field.
For the mobile and Jumbotron screens, we made the game flow as simple as we could so the users will be able to scan the QR code, pick their team and understand how to play the game as fast as possible. Leveraging the host's announcements facilitated quick comprehension. The dark aesthetic of the mobile screen background aimed to enhance the prominence of the ice projection within the arena, while still clearly indicating each user's team colour.
(Key Takeaways)
The importance of involving cross-functional teams for testing cannot be overstated
The importance of involving cross-functional teams for testing cannot be overstated
Our project engaged a diverse array of teams, including technical developers, software engineers, visual designers, Scotiabank team, Scene+ team, the Global Partnership team, the Raptors brand team, and the game presentation team. Through collaborative efforts and close communication, we were able to identify and resolve technical difficulties and ensure that everything proceeded smoothly.
Our project engaged a diverse array of teams, including technical developers, software engineers, visual designers, Scotiabank team, Scene+ team, the Global Partnership team, the Raptors brand team, and the game presentation team. Through collaborative efforts and close communication, we were able to identify and resolve technical difficulties and ensure that everything proceeded smoothly.
Digital experiences have the power to ignite rivalries and excite fans
Digital experiences have the power to ignite rivalries and excite fans
We were thrilled to witness the enthusiastic reactions from fans, who cheered and eagerly engaged with the race. This event opened up new possibilities for digital activations during live events.
We were thrilled to witness the enthusiastic reactions from fans, who cheered and eagerly engaged with the race. This event opened up new possibilities for digital activations during live events.
Next Work
Next Work
Rink Racer
“Arena Showdown” - Immersive Gaming Experience For Toronto Maple Leafs
Read More ↓
(My Role)
I owned and led design of Rink Racer for the Toronto Maple Leafs, sponsored by Scotiabank and Scene+. My role involved conceptualizing game flow, shaping user journeys, and crafting mobile UX/UI designs, projection mapping visuals, jumbotron animations, and core visual identities. I played a pivotal role in bringing the project to fruition.
[Read Article]
CLIENT
Toronto Maple Leafs,
Scotiabank,
Scene+
YEAR
2023-2024
ROLE
Design Lead
TEAM
MLSE Arcade,
MLSE Digital Labs
Developers
Duration
3 months
(Goal)
Enhance brand recognition and drive sign-ups through a new digital activation strategy
Presented by Scotiabank and Scene+, Rink Racer revolutionizes fan engagement during live Toronto Maple Leafs Games with an immersive gaming experience. Utilizing cutting-edge projection systems, the game brings the excitement directly onto the rink. Designed as a multiplayer experience for quick 2-3 minute sessions during intermissions, Rink Racer encourages fans to compete, fostering camaraderie and friendly rivalry within the arena. The project aims to elevate sign-ups and amplify partner brand recognition by delivering a captivating digital experience for fans.
Furthermore, we expanded the game to include a Leafs Playoffs Tailgate version outside the Scotiabank Arena, utilizing large outdoor screens for maximum enjoyment.
(Target Audience)
The target demographic encompasses both men and women spanning ages 20 to 60, actively engaged in the intermission festivities of Leafs games, and eagerly seeking prize-winning opportunities.
(Initial Concept and Ideation)
The design process began with understanding the flow of the game and digitally sketching out some design concepts to ideate on the visualization of the projection mapping.
For the projection mapping portion, our initial idea was to use 3D models of hockey players as racers and display the game stats as a particle effect. However, after considering it with the team, we decided to use Carlton 3D models to tie the visuals into the team’s branding.
(Key Challenges)
Game Play Challenge
Accounted for Various Potential Failure Scenarios In Mid-Game
Simplifying the UX design was paramount to ensuring the game's clarity within a 30-second timeframe. We conducted thorough internal user testing to ensure that every participant could easily read the text on each screen and comprehend the context and game flow without any additional guidance.
We anticipated various potential failure scenarios during the game's execution, including:
Users experiencing poor or no Wi-Fi signal within the arena.
Disconnection of the main computer from the Wi-Fi network during gameplay
Inaccessibility of the game for users
Unexpected crashes occurring mid-game
Through extensive user testing within the arena environment, we identified solutions for each scenario. For instance, implementing a "Connection Lost" screen on users' phones while still allowing access to entry forms ensured continued participation despite Wi-Fi issues. Additionally, incorporating a simulation mode for the projection aspect addressed technical glitches on the main computer, ensuring a seamless experience for users.
(Wireframing)
Then it progresses to UI/UX design considerations, ensuring a seamless and exciting experience. We started the design process with outlining the game state of projection mapping, mobile screens, Jumbotron screens and the MC's voice over. After determining the whole game flow, we started wireframing and deciding on the information for each screens. Once the general flow of information was determined, we started 3D modelling some ideas using Cinema 4D.
(Research Conducted)
We conducted internal research to test the gameplay and mechanics of the game. Our focus was on keeping the game flow simple, ensuring that users can grasp how to play within seconds without any guidance.
(Mobile + Jumbotron Design)
For the mobile and Jumbotron screens, we made the game flow as simple as we could so the users will be able to scan the QR code, pick their team and understand how to play the game as fast as possible. Leveraging the host's announcements facilitated quick comprehension. The dark aesthetic of the mobile screen background aimed to enhance the prominence of the ice projection within the arena, while still clearly indicating each user's team colour.
(Projection Design)
A large door was prepared as an intro scene, and while Carlton was skating down the rink, the door opens at the right time to reveal information about the prize. The placement of the partner logos on the ice was done in such a way that the logos did not overlap with the existing lines and logos on the rink. Following a fan's scan of the QR code, the projection unveiled the racing track, revealing Carlton dynamically skating down the track.
Carltons' 3D model were animated using Adobe Mixamo and we seamlessly stitched the animations together in Cinema 4D. There are multiple states of Carlton in the game such as running, happy, sad, dancing, waving states.
(Key Takeaway)
The importance of involving cross-functional teams for testing cannot be overstated
Our project engaged a diverse array of teams, including technical developers, software engineers, visual designers, Scotiabank team, Scene+ team, the Global Partnership team, the Raptors brand team, and the game presentation team. Through collaborative efforts and close communication, we were able to identify and resolve technical difficulties and ensure that everything proceeded smoothly.
Digital experiences have the power to ignite rivalries and excite fans
We were thrilled to witness the enthusiastic reactions from fans, who cheered and eagerly engaged with the race. This event opened up new possibilities for digital activations during live events.
(Results)
Fans were excited and cheering for the Carlton bears
Despite the challenge of fans being on the move during intermission, with many heading outside for food and breaks, the strategy proved successful, yielding over 2500 sign ups through the mobile application within a brief 1.5 minute joining window. We have observed the fans getting excited and cheering over which team wins and making positive comments on social media.