UI/UX Design: Jiro Tamase | System and Mechanics: Kristopher Eidukas
Summary
Spirit Chests was designed for users who finished all current levels to continue playing and earning rewards. Instead of leaves, which are given through normal progression, the user will receive keys for each level that they accomplish. These keys are then used to open up chests with rewards. There will be a refresh timer once all the rewards have been claimed.
Info/Intro Modal
We chose the single image template for this feature. Our goal is to always keep it themed, simple and straightforward. This modal pops up when the user is at the last active level for a build. The users will then be told to look for keys for some rewards. The CTA reflects the goal that the users will try to achieve. Tapping the “Look for Keys!” button will lead the user to a different pregame modal.
Main Modal
The main modal features as the pregame screen. Since the play button is deactivated at this point, a key button right next to the play button is revealed to the user. This modal as well shows what the user needs to open up the chests. The rewards are not hidden from the user.
Badge/Button
The blue key button on the lower right corner is how we can access this feature. This will be revealed to the user after the user completes all active levels in the current build of the game.
Piggy Bank
UI/UX Design: Jiro Tamase | System and Mechanics: Rose Thomas
Summary
The Piggy Bank is a feature where players earn coins for completing levels, but these coins are only accessible if the player purchases a key to access them. Every level completed will result in a deposit in the players “Piggy Bank”. When the bank is full the player can purchase a hammer or key to open the piggy bank and receive all of the coins inside.
Intro/Main Modal – Empty State
This is the Intro and main feature modal for the Piggy bank event. Progress bar to track coin count, and milestones are labeled by coin values for users to see the piggy bank’s availability to purchase.
Intro/Main Modal – Milestone 1 State
When users win levels, the coin value should increase in the text bubble and the progress bar should update with it. When the coin value reaches a milestone (in this case, 3000) the CTA will dynamically change to the buy button with the set price. The CTA (buy button) will remain until it reaches the max coin value of the piggy bank.
Intro/Main Modal – Full State
Once the piggy bank is full, the bar should be hidden, art should update, and the value on the text bubble should show the max amount. Timer should still be ticking down at this point and user can buy the piggy bank before the time runs out.
Information Screen
We chose to use a full screen layout for all info regarding the feature. There was so much to put in that we wanted to use the entire screen for it. This is the first time we’re using this layout for an event. As the game is not feature complete yet, we were still trying to diversify ways of designing other aspects of some features. We’re still following our style guide for some of the modals but have considered being flexible for new features and events.
Post Game Banner
This banner is shown after completing a level. It would show how much coins you’ve collected with the feature multiplier and the coins going in to the piggy bank.
