Blaseball — Design System
2022 | Product Design, Design Engineer
Blaseball was the esoteric absurdist horror fantasy baseball simulator that allowed players to pick a favourite team, watch games live, scheme with other players, and change the rules of the game.
Context
Blaseball fans were fervently fanatical about their favourite team and would go to extreme lengths to show their support. The UI only showed this as a text string in the settings page. Not very fun.
Problem
Given how important the decision of choosing a favourite team was, the UI didn’t feel like it reflected the impact of your choice. Colours, imagery, and styling stayed themed to the game itself We wanted the whole UI to adapt to your choice of team to really make it feel like you’re made a commitment to a team. Plus it looked way cooler.
We needed a way of dynamically changing the core colour scheme of the UI to one of 24 different schemes. The colour changes would need to affect everything from text and button colours to shadows and gloss effects. Further, this needed to be consumable across web, iOS, Android, and React Native styling systems. While nothing particularly new or innovative, it was a fun problem to solve.
Solution
Our flexible approach meant we needed to keep our approach to the design system relative to the context of the user. For example, we built components like a
<UserTeamAvatar />, when coupled with a Provider/Context pattern to propagate the user’s selected preferences, allowed us to quickly and dynamically update multiple aspects of the UI. This same pattern also allowed us to push pre-selected contract-compliant colours across the whole system to change text, background, box-shadow, and logos across the whole UI.
Though we weren’t able to use it before the studio’s untimely demise, I designed the system to be able to update based on narrative events. This allowed the narrative and game design team to adapt the UI, within reason, to shifts in tone of the game as the narrative progressed.