Shine, Live Performance App

I first conducted a creative workshop with the client to understand their vision for the app and to align on the design process that we would be employing.

We decided on what the visual style and tone of the app should be. We landed on a very fun, vibrant and approachable look and feel and a laid back tone.

An important part of the app was the ability to use and customise your own avatars. For this, the client wanted goofy, colourful character that utilized simple shapes.

After creating a sitemap to inform the navigation within the app, I proceeded to wireframing most of the screens within the app

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.

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.

I enjoyed working on this project because of the unique core concept, the goofy characters and the challenge of conveying the fun and vibrant tone through the UI design.