jammin’ —

How might we improve the traditional karaoke experience to encourage participation and introduce gamification?

How might we improve the traditional karaoke experience to encourage participation and introduce gamification?

jammin_thumbnail

TYPE

UI/UX, Product Design, Web Design, Marketing

UI/UX, Product Design, Web Design, Marketing

TOOLS

Sketch, Principle, Adobe Dimension, Adobe Illustrator

Sketch, Principle, Adobe Dimension, Adobe Illustrator

TIMELINE

TIMELINE

January - April 2019

January - April 2019

What is the current problem?

What is the current problem?

What is the current problem?

The current karaoke experience struggles with flexibility in user experience and rely on traditional methods (physical books) that may affect participation and overall experience.

The current karaoke experience contains flaws in the flow and system itself including:
- constraints on time due to having one copy of the song book
- lack of organization that makes finding songs difficult
- constraints affecting general participation due to these flaws

Other pain points include:
- Trouble searching for a song - by artist, by name
- Having to wait for one person to choose a song

The current karaoke experience struggles with flexibility in user experience and rely on traditional methods (physical books) that may affect participation and overall experience.

The current karaoke experience contains flaws in the flow and system itself including:
- constraints on time due to having one copy of the song book
- lack of organization that makes finding songs difficult
- constraints affecting general participation due to these flaws

Other pain points include:
- Trouble searching for a song - by artist, by name
- Having to wait for one person to choose a song

Why should a new karaoke experience exist?

Due to these issues, there is a need to re-think the flow and features to improve the karaoke experience for entertainment purposes. At this time, there isn’t really a flexible application for karaoke that saves time and involves everyone. This new karaoke experience, that incorporates the mobile device and secondary screen, will solve these issues and make karaoke a fun experience for everyone.

Due to these issues, there is a need to re-think the flow and features to improve the karaoke experience for entertainment purposes. At this time, there isn’t really a flexible application for karaoke that saves time and involves everyone. This new karaoke experience, that incorporates the mobile device and secondary screen, will solve these issues and make karaoke a fun experience for everyone.

What are the goals of the application?

Providing a more though out way of organizing songs
The user should have an easier time searching for a song and have options of viewing song directory by category.

Providing a more though out way of organizing songs
The user should have an easier time searching for a song and have options of viewing song directory by category.

Providing actions towards song
titles
Users should experience flexibility
in that they can save favourite
songs, organizing songs, queuing
songs, etc.

Providing a more though out way of organizing songs
The user should have an easier time searching for a song and have options of viewing song directory by category.

Making use of a scoring system
Scoring system will provide a new experience to users by making use of scores and incorporating gamification.

Making use of a scoring system
Scoring system will provide a new experience to users by making use of scores and incorporating gamification.

Providing a wide selection of songs
Users should feel that they have
variety in the songs that are
available.

Making use of a scoring system
Scoring system will provide a new experience to users by making use of scores and incorporating gamification.

Create an engaging experience that gets everyone involved
Each user should feel engaged as they have the opportunity to queue in songs at any time, giving them equal opportunity to have a turn on the microphone.

Create an engaging experience that gets everyone involved
Each user should feel engaged as they have the opportunity to queue in songs at any time, giving them equal opportunity to have a turn on the microphone.

Competitive Analysis

Though there are different type of karaoke experiences (at home, at a lounge, etc.), none of them utilize the full potential of engaging users in a new, exciting, and easier way. I looked at similar experiences to the product (Jackbox, Timeplay, Karaoke Machine, Karaoke Lounge) to research the pros and cons of each, which helped me understand the experience around the product a little more. Below is an in-depth competitive analysis of each researched product/experience.

Though there are different type of karaoke experiences (at home, at a lounge, etc.), none of them utilize the full potential of engaging users in a new, exciting, and easier way. I looked at similar experiences to the product (Jackbox, Timeplay, Karaoke Machine, Karaoke Lounge) to research the pros and cons of each. Below is an in-depth competitive analysis of each researched product/experience. You can also click here to view.

User Scenarios

Next, I looked at how users might interact with the product within different situations and circumstances. Looking at the product from different kinds of users helped me to understand how the product’s experience would work to fulfill different actions and desires.

Next, I looked at how users might interact with the product within different situations and circumstances. Looking at the product from different kinds of users helped me to understand how the product’s experience would work to fulfill different actions and desires. You can also click here to view.

Rough Flowchart

After researching and finding the current issues within the traditional karaoke experience, I had in mind the problems I wanted to fix — some being: organization of songs, providing actions to songs, and gamification. I started off by sketching a rough flowchart to show all the possible interactions a user has with both the mobile and secondary screen (which would be synchronized). Having two types of screens, this flowchart also helped me to tackle and organize all the screens that would exist in the product.

After researching and finding the current issues within the traditional karaoke experience, I had in mind the problems I wanted to fix — some being: organization of songs, providing actions to songs, and gamification. I started off by sketching a rough flowchart to show all the possible interactions a user has with both the mobile and secondary screen (which would be synchronized).

Rough Flowchart

Final Flowchart

While I developed the most novel and essential features of the application, I created a more concise and final flowchart featuring  all the possible interactions a user has with both the mobile and secondary screen (which would be synchronized). The grey boxes represent the mobile interface whereas the blue boxes represent the TV interface.

While I developed the most novel and essential features of the application, I created a more concise and final flowchart featuring  all the possible interactions a user has with both the mobile and secondary screen (which would be synchronized). The grey boxes represent the mobile interface whereas the blue boxes represent the TV interface.

Flowchart

Low-fidelity Prototype

From my flowchart, I gathered the mobile screens and made one version of a low fidelity prototype using paper.

 

From my flowchart, I gathered the mobile screens and made one version of a low fidelity prototype using paper.

 

I then created still a rough, but refined version of this low-fidelity prototype to get a better understanding of the application and for organization sake.

I then created still a rough, but refined version of this low-fidelity prototype to get a better understanding of the application and for organization sake.

Image/Graphic Assets

Below are the image/graphic assets for both the mobile interface and casted screen where karaoke will take place. Throughout the project, I’ve constantly been iterating the image/graphic assets to get to the final state of the app.

Below are the image/graphic assets for both the mobile interface and casted screen where karaoke will take place. Throughout the project, I’ve constantly been iterating the image/graphic assets to get to the final state of the app. You can also click here to view.

Promotional Video

As an introduction to the product and experience of jammin’, I created a promotional video on Adobe After Effects that outlines the most novel features of the application. While outlining the basic features of the application, I also include the interactions of the application

As an introduction to the product and experience of jammin’, I created a promotional video on Adobe After Effects that outlines the most novel features of the application. While outlining the basic features of the application, I also include the interactions of the application

High-fidelity Prototype

MICROPHONE

MICROPHONE

Using Adobe Dimension, I mocked up a microphone which would be used with the application. The design of the microphone features the brand’s colours and logo.

Using Adobe Dimension, I mocked up a microphone which would be used with the application. The design of the microphone features the brand’s colours and logo.

Microphone

APPLICATION PROTOTYPE

APPLICATION PROTOTYPE

Interact with the prototype through this link: https://sketch.cloud/s/G8rvD/8ygrd48/play

Interact with the prototype through this link: https://sketch.cloud/s/G8rvD/8ygrd48/play

dalisay_katreena_project1_web_main

APPLICATION WALKTHROUGH + INTERACTIONS

APPLICATION WALKTHROUGH + INTERACTIONS

The gifs below show some of the interactions that exist in the application to make the experience more delightful for the user.

The gifs below show some of the interactions that exist in the application to make the experience more delightful for the user.

Registering for an account & going through walkthrough

Creating and joining a karaoke room

Favouriting a song

Queuing a song by holding song name

Syncing music from Spotify

Voting and scoreboards

Previewing song lyrics before queuing or singing

KARAOKE SCREENS

KARAOKE SCREENS

In addition to the mobile interface, the product also includes a secondary screen for the karaoke to take place. The mobile interface and secondary screen will be synchronized together for users to sing karaoke.

Click to enlarge images.

In addition to the mobile interface, the product also includes a secondary screen for the karaoke to take place. The mobile interface and secondary screen will be synchronized together for users to sing karaoke.

Click to enlarge images.

karaokescreen1

Karaoke screen during a song

karaokescreen2

Close-up of queue list and time bar on bottom of karaoke screen

karaokescreen3

Score after a song is sung

Below are demonstration videos of the karaoke screen’s interface with queuing system and time bar
(Left: Free Sing Mode, Right: Tournament Style)

Below are demonstration videos of the karaoke screen’s interface with queuing system and time bar (Top: Free Sing Mode, Bottom: Tournament Style)

Final Product Demonstration

To promote the product, I decided to create a promotional video (placed prior) and a website for marketing purposes. Below demonstrates the planning process of creating these 2 marketing materials. My thought process behind planning this was to promote the most novel features of the application and as well as having a call to action where users can know more about the application and download it. 

To promote the product, I decided to create a promotional video (placed prior) and a website for marketing purposes. Below demonstrates the planning process of creating these 2 marketing materials. My thought process behind planning this was to promote the most novel features of the application and as well as having a call to action where users can know more about the application and download it. 

demonstration

WEBSITE WALKTHROUGH

WEBSITE WALKTHROUGH

Below is a walkthrough video of the website’s landing page that contains the promotional video and most novel features of the application.

Below is a walkthrough video of the website’s landing page that contains the promotional video and most novel features of the application.

Reflection

CHALLENGES

CHALLENGES

Developing a realistic application
When I first started the project, I wanted to create an application that included all the most recent and up to date songs. However, I soon realized that this would be highly unlikely in the market and that there needed to be some sort of payment whether through subscription, songs by packs, or so on. To solve this, I created an option that would synchronize your Spotify or Apple Music subscriptions. While one of the features of the application would be that it holds popular and recent songs, some of these song packs would have to be paid for or through a subscription.

Working with 2 synchronized interfaces
This is the first project that I had to work with 2 synchronized screens (mobile and a secondary screen). The challenge here was to think through the flow of both screens and to make sure that it worked together. To start, I sketched out flowcharts to show the interactions and possibilities of each screen synchronized together. Some of the synchronized actions between mobile and secondary screen involve: casting to a screen, joining a karaoke room, or voting for a karaoke winner.

Developing a realistic application
When I first started the project, I wanted to create an application that included all the most recent and up to date songs. However, I soon realized that this would be highly unlikely in the market and that there needed to be some sort of payment whether through subscription, songs by packs, or so on. To solve this, I created an option that would synchronize your Spotify or Apple Music subscriptions. While one of the features of the application would be that it holds popular and recent songs, some of these song packs would have to be paid for or through a subscription.

Working with 2 synchronized interfaces
This is the first project that I had to work with 2 synchronized screens (mobile and a secondary screen). The challenge here was to think through the flow of both screens and to make sure that it worked together. To start, I sketched out flowcharts to show the interactions and possibilities of each screen synchronized together. Some of the synchronized actions between mobile and secondary screen involve: casting to a screen, joining a karaoke room, or voting for a karaoke winner.

WHAT I LEARNED

WHAT I LEARNED

New software (Principle, Adobe Dimension)
Prior to this project, I've only skimmed through software that animated interactions. However, for this project, I decided to delve into Principle to animate the interface screens because I wanted the user interaction to be more engaging along with the synchronized screen. From the start of this project, I was really passionate about the idea and almost had high standards to what I wanted to deliver in this project to make the idea justice. With that said, I wanted the experience of the interface to include slight animations that made the experience a little more enjoyable rather than static screens with no motion. I also animated the website with Principle to add more motion into the experience. Since I was so passionate about the project, I decided to delve into another program that I was unfamiliar with to create another deliverable of the project which was Adobe Dimension. Though I haven't dived deep into 3D design, it was surprisingly easy to pick up and I was able to create a mockup for the microphone that stayed on brand of jammin'.

New software (Principle, Adobe Dimension)
Prior to this project, I've only skimmed through software that animated interactions within the interface I was designing. However, for this project, I decided to delve into Principle to animate the interface screens because I wanted the user interaction to be more engaging along with the synchronized screen. From the start of this project, I was really passionate about the idea and almost had high standards to what I wanted to deliver in this project to make the idea justice. With that said, I wanted the experience of the interface to include slight animations that made the experience a little more enjoyable rather than static screens with no motion. I also animated the website with Principle to add more motion into the experience. Since I was so passionate about the project, I decided to delve into another program that I was unfamiliar with to create another deliverable of the project which was Adobe Dimension. Though I haven't dived deep into 3D design, it was surprisingly easy to pick up and I was able to create a mockup for the microphone that stayed on brand of jammin'.

WHAT I WOULD CHANGE/IMPROVE ON

WHAT I WOULD CHANGE/IMPROVE ON

More information on microphone
If I were to improve this project, I would go back and think out information on the microphone a little more and how it would serve as a product included with the application and explaining how exactly it works in terms of setting up and cost. While the deliverables of this project were more focused on interfaces rather than 3D mockups, I decided to spend more time on the the synchronized interfaces and have more of a conceptual idea to the microphone for now. I'd also want to explore the interface a bit more on the synchronized screen and work on showcasing both these screens together.

More information on microphone
If I were to improve this project, I would go back and think out information on the microphone a little more and how it would serve as a product included with the application and explaining how exactly it works in terms of setting up and cost. While the deliverables of this project were more focused on interfaces rather than 3D mockups, I decided to spend more time on the the synchronized interfaces and have more of a conceptual idea to the microphone for now. 

My overall takeaway
Ever since the beginning of this project, I was really passionate about the idea since I thought it was a unique idea. Since I was so passionate about the project, I found myself delivering above the expectations of the project (researching above the minimum, creating 2 interfaces, deciding to animate my screens, creating a 3D mockup, and creating 2 marketing materials). My motive throughout the process was to give justice to the good idea I thought this application could be and fulfill it to its fullest potential. I also wanted to come out of this project being proud of an application that I did all by myself since my other UI/UX projects were team orientated. I can proudly say that I worked hard on this project and am really satisfied with the outcome. 

My overall takeaway
Ever since the beginning of this project, I was really passionate about the idea since I thought it was a unique idea. Since I was so passionate about the project, I found myself delivering above the expectations of the project (researching above the minimum, creating 2 interfaces, deciding to animate my screens, creating a 3D mockup, and creating 2 marketing materials). My motive throughout the process was to give justice to the good idea I thought this application could be and fulfill it to its fullest potential. I also wanted to come out of this project being proud of an application that I did all by myself since my other UI/UX projects were team orientated. I can proudly say that I worked hard on this project and am really satisfied with the outcome. 

Measures of Success

To validate the success of this product, I'd definitely want to user test the product to see if people can easily navigate through the application and also be able to easily connect what is happening on their phone screen to the sychronized screen. If this product were to actually exist, some metrics of success could be analyzed through: amount of song packs bought and time spent singing songs. Through this, it could give a sense of how many people are continually using the product.

My overall takeaway
Ever since the beginning of this project, I was really passionate about the idea since I thought it was a unique idea. Since I was so passionate about the project, I found myself delivering above the expectations of the project (researching above the minimum, creating 2 interfaces, deciding to animate my screens, creating a 3D mockup, and creating 2 marketing materials). My motive throughout the process was to give justice to the good idea I thought this application could be and fulfill it to its fullest potential. I also wanted to come out of this project being proud of an application that I did all by myself since my other UI/UX projects were team orientated. I can proudly say that I worked hard on this project and am really satisfied with the outcome.