The Problem

Today, if people search “karaoke” in the App Store on mobile, they will get quite a number of apps in the search results. However, none of them can provide a live karaoke experience. In existing karaoke app services, singers record songs through the applications and upload their performances to the online community. The audience would listen to the performances and post comments later. 

LiveKara is a mobile application designed to provide a live karaoke experience. It involves both singers and audience in the performance simultaneously. People may send live comments as user-generated content that can be viewed by the entire audience and the singer.

My Role

LiveKara was my Master's project for my MS degree in Human Computer Interaction at Georgia Tech. For this individual project, my duties covered the end-to-end design process, from user research to ideation, creating UX flows and UI sketches, building rapid prototypes, conducting usability testing, and showcasing my work on the final presentation day.

How I Design

Experience Study

An online survey was distributed to learn people’s opinions and experiences with karaoke places. 139 responses were received with the age ranging from 21 to 40, and the gender 64% male. To ensure the validity of the results, 25 responses were discarded since they had never been to any karaoke places.

Among the remain 114 responses, 50 of them had only been to western-style karaoke bars, 50 of them had only been to eastern-style karaoke boxes, and 14 of them had been to both. These numbers established a balanced view of karaoke bars and karaoke boxes in this survey.

Experience Study

Experience Study

Of 72% of the responses who gave a performance at a karaoke place, 53% indicated they would like to get the audience's attention when they were performing on stage, while only 12% didn't want to be paid attention.

Among 91% who had been in the audience, 49% of them chatted about the song with their friends, and 31% sang along. This result indicates that people are highly involved in the performance and they have a strong desire to share thoughts while watching.

Although the responses indicated a balanced experience between karaoke bars and karaoke boxes, 61% preferred the karaoke box because they feel more comfortable singing with friends in a private space. To many people, the social aspect is one of the top motivations for doing karaoke, but many felt some stress or anxiety when singing in front of others.

Experience Design

To enhance the karaoke experience and encourage social engagement, LiveKara is designed to be a karaoke lover's social community. In LiveKara, everyone has a skill level: "novice", "intermediate", "advanced", "rising star", "superstar" - based on engagement with the LiveKara community.

For the singers, I designed two performing modes - "solo" and "duel".
  1. Solo: only one singer perform at a time
  2. Duel: two people sing one song and compete with each other
If a singer selects a song for "duel", LiveKara searches for other online singers at the same skill level who are also looking for a match for the same song. In each performing mode, before the show starts, there is a 1-minute preparation period for the audience to join the performance.

Wireframes - Singer

Wireframes - Singer

Wireframes - Singer

For the audience, people may join the performance through the live show list, which is lists of songs that are in progress or still in the 1-minute preparation period. To make the audience more engaged with the show, two highlighted features were designed for them:
  1. Vote: during a performance, the audience may heart the singers. Singers will lose the hearts as punishment if they quit before the end of the song or before all of the audience leaves.
  2. Comment: as the performance continues, live comments can be shared in a form of running text on the screen. If there are too many running comments that make people feel distracted, they can always mute the comments and focus on the show. 

Wireframes - Audience

Wireframes - Audience

Interactive Prototype

Adobe Edge Animate was selected as the prototyping tool for this project because Edge Animate can create interactive content and generate HTML and JavaScript files for testing on a web browser. It was very powerful at creating animated content, which served my need for prototyping lyrics and live comments in LiveKara. Beyond that, I was also able to customize the generated code to make the prototype reflect all the details in my design.

Prototype - select a song and match a singer

Prototype - set up and invite the audience

Prototype - during the Duel

Prototype - choose a song to listen

Design Evaluation

Ten participants were recruited for the design evaluation. People were asked to be singers and give a duel performance and then be the audience and listen to a performance. As the audience, they were asked to vote for the singers, post comments, and mute live comments. During the study, a few questions about screen flow and user interface were asked to find out how people interpret the design. At the end of the study, a questionnaire was filled out by each participant.

Overall, participants performed very well in the study and showed a good quality of interpretations. 8/10 participants completed all tasks effortlessly while 2/10 participants had difficulties when they were looking for the route to listen to a performance. 3/10 participants could not understand the meaning of the headphone icon located in the top right corner, which was meant to indicate the listeners/audience in the current live show.

Tasks for the Participants

Questionnaire Results

Future Work

When participants were asked to be the singers, a few people questioned if they would be able to do it privately. They wanted only the audience members they knew to join their performance. In the current design, there are two ways to recruit the audience: a singer may send invitations to someone in LiveKara that the singer would like to invite, or any audience may join freely through the live show list.

In future designs, a checkbox "open to the public" will be added when people set up a performance. If they uncheck "open to the public, the performance will not appear in the live show lists and strangers will not be able to join. Beyond that, if people are open to 2nd-degree connections (friends of friends), they may check "allow people to invite" so their invitations can be extended to more people but still stay within their social circles.

Video Demo