High Fidelity Designs
For the onboarding, I created an interactive experience where the user was prompted to perform certain actions. Requiring the user to perform actions makes the experience more engaging and is more memorable than simply telling the user how the app works.
At the core of Shine are the characters that users are able to interact with and customise. For this project, I was responsible for sourcing the illustration and animation. We found a great illustrator/animator that was able to nail the look of the characters using the information that we had gathered from the creative workshop.
The character customisation screen had an interesting challenge where most options were free to select, except for the hats. While keeping the hat options consistent with other options, I also had to communicate when you could buy these with coins, when you didn't own the hat and when you did. When users didn't yet own a hat I used a primary button that prompts users to buy the hat and reduced the opacity of the tile to indicate that you don't possess it yet. When users did own a hat, I added an 'Owned' indicator and the tile was now fully opaque and had a drop shadow, like other options that the user knew that they could freely select for their character.
The Green Room is visible to users when they were waiting for their turn to perform. This screen had a lot of information that needed to be shown to the user. I made sure that the hierarchy within the page matched the importance of each piece of information, e.g. the user's place in the queue is very prominent because it's the most important piece of information when a user is waiting to go live.
Green Room and Audio/Visual Check screens
For the profile page, it was important to make the user's avatar very prominent and encourage users to customise their avatar. The screen also had to display information like score coins and tickets. I organised this information with tabs allowing the user to easily sift through.