Financial Chess - Game Development for Union Investment
At the end of 2024, we had the opportunity to develop a game for Union Investment to motivate people to think about their investment strategy in a playful way.
Key facts
-
Services
- Game design
- Illustration and animation
- Game development
-
Technologies
- React
- Typescript
- Konva (Canvas)
- APNG & React Spring (Animationen)
- Client
The project #
For many people, the subject of finance and investment is rather dry and not very exciting. On behalf of Union Investment, we were given the task of livening up the topic a bit and adding a playful touch in the form of a chess game.
Course of the game #
In the first step of the game, the risk class for the personal investment is determined. The second step is to set up the chess pieces so that their target allocation corresponds to the selected risk class. Each piece represents an asset class or a pillar of Union Investment.
When the game is resolved, it becomes clear how well the game plan matches the selected risk class (comparison of target vs. actual allocation). Just as each chess piece has a purpose, each asset class plays an important role in the overall strategy. It is important to look at the whole chessboard, not just one piece. The same goes for investing money.
The goal of the game is to playfully illustrate the need for action when investing money and to encourage reflection.
Design #
The goal of the game was clear from the start, but we had a free hand when it came to the design and detailed process. Despite the relatively short project timeframe, we wanted to differentiate the game from a classic 2D online chess game. We decided to use an isometric perspective, which gives the impression of spatial depth. Using Adobe Illustrator and AI, we were able to create elaborate game pieces and bring them to life with small animations in After Effects.
Technology and Implementation #
We used a variety of technologies to create an interactive and engaging game experience. React and TypeScript were the foundation of the application. React allowed us to create a dynamic user interface that ensures smooth interaction. TypeScript ensures improved code quality and helps to detect errors early.
We used Konva (Canvas) to render the chessboard and pieces. This powerful library makes it possible to efficiently render and interact with graphical elements. To make the animations fluid and appealing, we used React Spring, a library for creating smooth and high-performance animations. In addition, APNG was used for high-resolution animated images that bring the visual aspect of the game to life.
By combining these technologies, we were able to create an interactive and visually appealing game.
Conclusion and Availability #
In conclusion, despite the small lessons learned for future projects, we can say that we are very satisfied with the result and are looking forward to new challenges in this field.
We would like to thank Union Investment for their trust and cooperation!
Would you like to see the game for yourself and have a playful look at your investment strategy? Then you can access the game here.