OVERVIEW
A fun interactive Karaoke add on feature for Disney Plus. It can be used for party settings and for connecting with loved ones that are far away. Phones can be used to sync participants into a single virtual party room via the Disney+ server or Disney+ app and the phones themselves will be used as karaoke microphones.
Participants will be able to select from many Disney songs and can choose to sing along with the associated movie scenes. There is great potential for this Karaoke add-on to increase user subscriptions & give Disney Plus a unique edge over its streaming competitors.
Role
UX/UI Designer
UX Researcher
App Design
Icon Design
Tools
Figma
Photoshop
Maze
Time Span
year 2021
4 Weeks
Home Screen
The Karaoke game is easily accessed from the Disney Plus Home screen. Users can chose to host a karaoke party, find a party or sing solo. Full libraries of songs are made available based on the User's preferences & under categories such as "Princess Songs" or "Just Added".
Joining Game
Using their phones, players join the game by entering a unique code on the provided URL page or through the Disney+ app. A QR code can also be scanned using the phone's camera to access the unique game room.
Selecting Songs
Players can select the songs they want to sing from either the TV or their phone. Selected songs are displayed next to the player's avatar on the Karaoke queue. Players then sing along with the televised Karaoke game while using their phone as the mic.
• Process Overview •
User Interviews.
I interviewed 5 participants to understand how they use interactive games like Jack Box. Interview questions were also geared towards understanding their feelings & experiences regarding Karaoke.
/// Research 001 /// user interviews /// competitor analyses
/// Research 001 /// user interviews /// competitor analyses
/// Research 001 /// user interviews /// competitor analyses
/// Research 001 /// user interviews /// competitor analyses
/// Research 001 /// user interviews /// competitor analyses
/// Research 001 /// user interviews /// competitor analyses
Motivation
(When & Why?)
• During parties & small gatherings.
• When parents need to entertain their children.
• If participant is bored & wants to play a game/sing.
• To reach out to loved ones that are far away.
User Pains
(Why not?)
• If the game is too complicated to use & learn.
• If I had to buy additional devices/equipment.
• If my voice was being overly strained.
Primary Goals
(List of goals)
1. Have fun with friends/family both abroad & in person.
2. Relive cherished Disney memories.
3. Have a focused activity for parties & gatherings.
4. Convenience.
• General Research •
• Competitor Analysis •
Direct competitors like Netflix & Hulu currently offer more content than Disney Plus while also suggesting personalized streaming content that is tailored to the User’s streaming preferences. Indirect competitors like Smule offers a huge library of karaoke songs, voice-altering effects & options for remotely singing with friends & family who are far away. Smule falls short in not being designed for in-person group Karaoke parties & it isn’t able to display on television screens. Jack Box on the other hand is optimally designed for easy in-person group parties but they lack any easy solutions to hearing or seeing other players who are far away. Also, players are sometimes disconnected from the game since the synced phone is connected via a web browser instead of an app.
Insights from Research
I establish the essential design goals & key features (Needs & Motivations) based on the research data gathered from my interviews & competitor analyses. These will become my focus points when planning the designs for this project.
/// synthesize 002 /// key features /// User needs /// user motivations /// user Pains
/// synthesize 002 /// key features /// User needs /// user motivations /// user Pains
/// synthesize 002 /// key features /// User needs /// user motivations /// user Pains
/// synthesize 002 /// key features /// User needs /// user motivations /// user Pains
/// synthesize 002 /// key features /// User needs /// user motivations /// user Pains
• Key Features •
Needs
• Phones sync for players to find songs that they want to sing.
• Players not physically present can sync with the game.
• Have many categories of songs for players to chose from.
• Suggest songs based on the user’s past song choices.
• Allow for solo play, party play & can sing with new online friends.
• Tutorial mode for learning how to use voice & avoid strain.
• Phone must be used as the Karaoke mic.
• Non-Disney plus subscribers can play the game, but can't host games or play solo.
• Offer songs that are of varying difficulties.
Motivation
• It’s fun to sing Disney songs that I love.
• Great option for parties & hanging out with friends.
• Connect friends who are far away or meet new ones on the app.
• Practice singing skills. Great for keeping kids entertained.
• Great game for families to sing together.
• Can motivate new Users to become Disney Plus subscribers.
• Can discover new Disney movies.
Acquiring & Structuring Data
Due to time constraints, I quickly administered card sorting exercises before I concluded that this Karaoke feature needs to only include singing & not include social media & or video recordings. Adding too many features makes this into its own app & not an add-on to an existing service. Also, above all else, this needs to function as a well-designed Karaoke game.
Therefore, the card sorting exercise included social media-based categories that are no longer relevant to this project & the results were not useful.
/// ideate 003 /// card sorting /// site map /// user task flow
/// ideate 003 /// card sorting /// site map /// user task flow
/// ideate 003 /// card sorting /// site map /// user task flow
/// ideate 003 /// card sorting /// site map /// user task flow
/// ideate 003 /// card sorting /// site map /// user task flow
/// ideate 003 /// card sorting /// site map /// user task flow
Site Map +
User Task Flow
Site Map & User Task Flow
After doing further research on the functionality of both JackBox & DisneyPlus I created the following User Task Flow that includes elements of site mapping. I found this combined method useful as aspects of this flow require users to coordinate both a Phone & a Smart TV at the same time. So mapping user decisions between Phone & TV screens was important for me to properly plan out the site architecture.
Generating Sketches & Prototype
I designed a logo for this Karaoke feature that utilized some elements from the Disney Plus logo. I wanted the Logos to match so that this Karaoke game truly looks like an add on to the streaming platform. Additionally, I recreated the Disney plus homepage on Figma & used this sketch to inform me on what design patterns, colors & fonts to use so that my designs are consistent with the streaming platform.
/// ui design 004 /// hand sketch /// Hi-fi sketch /// prototype /// style tile
/// ui design 004 /// hand sketch /// Hi-fi sketch /// prototype /// style tile
/// ui design 004 /// hand sketch /// Hi-fi sketch /// prototype /// style tile
/// ui design 004 /// hand sketch /// Hi-fi sketch /// prototype /// style tile
• Logo Design, Low-Fi Sketches & Style Tile •
Testing on TV & Phone Devices
I tested the Prototype on three people in person. The first half of the prototype was done through a television screen & the second half was done on a phone.
• Television Prototype:
The User is tasked with creating a Karaoke game room, then finding the song "Let It Go" from the movie frozen & playing it.
• Phone Prototype:
The User is tasked with joining the game by entering the game room code from their phone. They must then find & play the song "Let It Go" from the movie Frozen.
After the revisions were made I tested the prototype on a 4th person who 100% completed the tasks.
/// testing 005 /// testing groups /// interactive prototype /// fINAL SCreens /// Conclusion
/// testing 005 /// testing groups /// interactive prototype /// fINAL SCreens /// Conclusion
/// testing 005 /// testing groups /// interactive prototype /// fINAL SCreens /// Conclusion
/// testing 005 /// testing groups /// interactive prototype /// fINAL SCreens /// Conclusion
• Prototype Issues & Implementing Corrections •
• Interactive Mobile Prototype •
• Interactive TV Prototype •
• Final Screens •
TV Home Screen
The Karaoke game is easily accessed from the Disney Plus Home screen. Users can chose to host a karaoke party, find a party or sing solo. Full libraries of songs are made available based on the User's preferences & under categories such as "Princess Songs" or "Just Added".
Joining Game
Using their phones, players join the game by entering a unique code on the provided URL page or through the Disney+ app. A QR code can also be scanned using the phone's camera to access the unique game room.
Selecting Songs
Players can select the songs they want to sing from either the TV or their phone. Selected songs are displayed next to the player's avatar on the Karaoke queue. Players then sing along with the televised Karaoke game while using their phone as the mic.
Painpoints & Struggles
Information Architecture: The hardest part was figuring out the information architecture for this game as it required the coordination of two devices (TV & Phone). Having other games to reference like JackBox helped me to figure out the order of events as many players sync into one game room through their phones. It also helped to treat the two different devices as separate prototypes.
Meta Data: Another challenge was in trying to organize & fit the essential data/information on the small song cards. I dedicated the bottom of the card to the song’s name as they can vary in length. Like in YouTube, if the song name is too long then it is cut off with a “...”. If the user is hovering on that song card, then the name will continuously scroll horizontally so that it can be fully read by the user.
Conclusion
It was a pleasant challenge to both design for a TV-based UI & to add a game to a streaming service while maintaining the style & identity of its original design themes/ patterns. I enjoyed learning these new design styles & feel that they expanded on my esthetics & knowledge of metadata/patterns. I hope to create more game-based UX projects in the future.
.png)
