Shine, Live Performance App

UI/UX Design

Project Overview

Shine is a platform that enables live broadcasting video across the world. Users can broadcast their talent and get paid for creating content they love. After the scope was fleshed out by the team's BA, I was responsible for all UI/UX across the project and collaborating the illustrator/animator to create an incredible, fun user experience.


  • Conduct creative workshop with client to inform designs
  • Sitemapping
  • Wireframing
  • Work with illustrator/animators to create characters
  • High fidelity designs

Creative Workshop

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.

Style & Tone

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.

Character Style

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

High Fidelity Designs

Interactive Onboarding

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.

Character Customisation

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.

Live Performances

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

User Profile

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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.