Chaine Ye
KK Live

Virtual KTV, the start of KK Metaverse

KK Live is a 10-year-old entertainment live broadcast app. In 2022, KK wants to transform, give it a try in the new concept ‘Metaverse’, and bring new life to app through it.

Interaction Design


Metaverse, ToC

Jun 2022 - Jul 2022

According to what we've known till now, the ultimate ‘Metaverse’ simulates everything from reality to virtual world. We start our ‘KK Metaverse’ from creating a virtual KTV (Karaoke), because this can easily fit in our current business - Entertainment Live Broadcast. We believe that virtual KTV can attract new users, acquire new blood to our product.

Understanding the value

Why should we do

As the live broadcast industry is in a stage of diversified development, if we continue to follow the current pattern (as an entertainment live platform), we’ll soon be eliminated by the market. So a new direction must be explored.

How can it benefit

Research shows that about 60% users entertain themselves through online KTV, and nowadays social networking is becoming a hotspot of Chinese online KTV industry’s development. While Metaverse is also a rising concept reaching for every aspect of our life, we see its potential of social networking too, and it’s quite a nice form of online KTV. Virtual KTV, as the combination of online KTV and Metaverse, may draw attention of new social users, and probably activate existing users to join this new gameplay.

Who are the users?

Metaverse is still quite new to many people, and it takes time to let them understand. But a virtual KTV? Not a problem. No matter how old you are now, you know what a KTV is.

However, despite the knowledge of knowing what KTV is, we need users who actually like it, or at least want to try it. So we have to narrow down.

The data shows that:

  1. Male and female are almost equal
  2. The majority of target users are youngsters
  3. Most users are highly educated

Therefore, we need to aim mainly at those younger users who like online KTV, and have a passion about social through music. They are highly educated, and can quickly accept new things, so we can put some interesting ideas into our design.

However, considering existing users, who are mostly in their middle age and with lower education level. We also have to pay attention to the interactions and the graphical expression of actions, in case they’re too hard for them to understand, and that will definitely hurt their feelings.

Then we can get our conclusions about target users:

New user

Existing user

Problem statement

As this project is in its initial stage, our main goal is to build a mvp to test whether this feature could help our product. So at this time, the problem can be defined as:

How might we build a virtual KTV that is similar to a real KTV, and allows users to interact with each other?


Basic structure

As my time is limited, I carried out a quick card sorting to help me get a whole view of how those scattered elements should be organized.

Sitemap & Userflow

A sitemap combined with userflow can help me go through the whole process of a user and all the necessary interfaces related to them.

Competitor analysis

Though I can almost get a picture in my mind of how this room should be look like, I still want to discover how other designers composed a layout with 3D scene through this simple competitor analysis, find out if there’s a pattern.



From those 2 layouts, I can see what they’re in common.

  1. Global functions are on the top
  2. Interactions are on the bottom and both sides
  3. On the left bottom corner is always the gamepad for controlling your avatar to move around
  4. Right bottom corner is for some frequent actions

When holding a phone with both hands, the left and right bottom corners are the easiest part to reach with your thumbs. And in a virtual environment, the most important actions are the ones that control your avatar. Therefore those actions are placed on those corners. Other less important functions can be on other places

Prototype design


As virtual KTV is the start of ‘KK Metaverse’, I consider this page not only as the entry of virtual KTV, but also of the metaverse. Therefore, your avatar will be set here, at the top of this page, and will be consistent everywhere in the metaverse.

I use big images to display rooms, as they can quickly attract users’ attention, and create an immersive feeling

Create a room

All necessary fields will be automatically filled with default value, so you can just hit ‘Create’ button directly to enter the virtual world

Virtual KTV

Select a song

We provide enough songs for you to pick. You can search for a specific song, or you can just swipe

While singing

There’s definitely a lyric board for you to refer to, and I put it on the most obvious place. The controller and mixer belong to the ‘frequent actions’ in this scenario, so they’re also on the right side

Public chat

A panel for you to look through all the chats in this room, and you can easily reach the person who posted a chat. Simple but necessary, a link to everyone in the room

Send gift

We consider this as a fun way to interact, and we promote it. You can send gift to the host or anyone in this room, just hit it with your right thumb

Lessons learned

This is my first time creating a layout with 3D scene, it looks different with normal layout but if you dig inside, they have something in common: always put frequently-used functions beside your fingers 👐🏻!

And there's another thing, virtual world have much potential that we may not think of when designing common live broadcast room. We can come up with a lot of new ideas to give it more fun. Like, instead of playing gift animations at the corner of the page, we can just throw our gift between avatars. It's definitely a more immersive experience for all the users.