CASE STUDY
Tik Tok Dance Feature
August-September 2022
Role: Project Manager, UX Designer, Brand Researcher
Prompt
In the Unversity of Wisconsin Digital Skills: UI/UX Bootcamp, my team of four was challenged to help teach dances via Tiktok.
Problem Statement
Learning popular dances on Tiktok can be challenging in the current product design.
Key Goals
-
Create a How-to-Dance feature on TikTok
-
Make it user-friendly, so even people who have no dancing knowledge or background can understand it
-
Make an efficient way to learn a new dance
-
Design a feature that allows users to easily learn the choreography of their favorite videos
We hypothesized that a visual and kinesthetic mirroring feature for learning a dance and mimicking how users discover more about a sound on TikTok would be a desirable addition to the app. TikTok dance is almost always tied with a TikTok sound so it seemed a natural fit.
Assumptions
Before beginning research, we assumed the following:
-
People will want to use this feature if it helps them more easily learn their favorite TikTok dances
-
TikTok is a platform for people to express themselves, but also to learn from
-
This feature will be a great way to get people moving
-
No matter people’s background, age, etc., this feature will unite people
-
Learning dance relies heavily on kinesthetic and visual learning (styles)
-
Once you spread word about this feature, people will eagerly seek it out
Research
Our methods of research were Heuristic Evaluation, Competitive Analysis, And User Interviews
Heuristic Evaluation
We first conductucted a Heuristic Evaluation of Tiktok. This evaluation is based off NNG’s 10 Usability Heuristics for User Interface Design . Each category was ranked on a scale of 1-10 and added up and compared to 100.
TikTok excels at having a very consistent look and great user control and freedom. Their content algorithm is outstanding. Where they fall short is in error prevention (i.e. videos can’t be edited after posting) and despite having very good accessibility standards, the UI can be difficult to read on videos with a white background. Our heuristic evaluation score came out to an 82 out of 100.
Competitive Analysis
To understand current methods of dance learning via technology and the internet, we conducted a competitive Analysis of Youtube, Just Dance, and Zumba, which are competitors of TikTok that all want to get the user dancing.
Here are the things that we learned about TikTok's dance competitors:
-
Youtube lets users watch, create, and share videos. It has a bigger search engine than TikTok. Which gives users access to other competitors' dance videos. (It's great, but it can confuse users about which video uses the original dance.)
-
Just Dance is a console video game - that lets users follow the dance along. It rewards you with real-time feedback and scores you depending on how well you do. It gives users a consistent dance tutorial experience by capturing their movements with a camera or controller depending on the console you have. However, to gain this experience, you'll have to purchase the game and the supportive tech. Another downside is that Just Dance and Zumba won't allow users to record themselves and post on social media. This brings us to Zumba.
-
Zumba is a dance exercise class that uses contemporary music and Latin music. With it being a class, there aren't many things you can choose/do. As an exercise, the dances do not incorporate all official moves. Zumba also cannot instruct all popular songs due to licensing.
User Inteviews
The most valuable player to tiktok is its Users. We value their contributions and their input and goals are the priority behind any designs. We interviewed in-person 9 users.
Our objective is to Understand how users
-
Learn how to dance
-
Time Spent learning to dance
-
Flow on finding sound on TikTok
We received feedback on both their TikTok usage and level of dance education if any.
Some of our Questions
-
Dance Background
-
What side of TikTok are you on?
-
How long it takes to learn a dance
-
Have you ever learned a TikTok dance?
-
Would you post your dance on TikTok?
Finding people that are still using TikTok to learn dances was difficult. (Lots of feedback is that this is a dated prompt and that this trend is over.) However, we still gained feedback.
Analysis
From our user interviews, we learned:
-
People would be very likely to try the new dancing feature
-
Most people preferred learning in person, but some were more comfortable learning online
-
Virtually no one who took the survey was on the same side of TikTok (meaning they didn’t watch the same type of content).
-
Almost everyone interviewed had some sort of dance history; experience ranged from basic learning to years of knowledge
We wanted to have more research on content creators, and have more data about what content creators need, but were unable to locate users in time.
Using these answers we created an affinity map to define trends, and this culminated in two personas and a task flow.
Synthesis
After creating an affinity map using our user interview responses we had the following Key Insights:
-
Users have more varied content in their algorithm (then they think they have)
-
Overall users like/love TikTok
-
Users prefer group and social dancing
-
but would not necessarily learn in that environment
-
-
When learning, users prefer YouTube to Tiktok
-
All but one user has a dance background
-
Majority of users have instructive-dance class training
-
(Interaction) Most users learn more about a sound through buttons on the video (but some still search)
-
Users are very hesitant to post themselves dancing
Personas
Based on our interviews, we synthesized two personas based on the data collected. Since all but one user had a dance background, John a Dance teacher, and Jenny, an ex-cheerleader, represent our Adult and Youth users, respectively. John wants to use TikTok, and any dance on the platform for business opportunities, while Jenny wants to fit in at college by learning these dances
Due to lack of data, we could not have a New User to TikTok or a Content Creator on TikTok represented
Task Flow
Also from our interviews, we were able to determine two paths a user to find a sound on TikTok. Basing the feature off this interaction study, we were able to determine where to place the dance feature in TikTok.
Design & Prototype
We asked in our user interviews how users interact with the sound components in Tiktok. Our reasoning: Dance is always connected to sound/music. With this idea, the approach of the research and design was to understand how users interact with sound on TikTok and apply the design of the dance feature to this powerful interaction.
Low Fidelity Sketches
Based off the insights established in our research, I created Sketches of how this new feature should look and function. The feature’s new pages include a new button on the sound page, its own tab in the search page, and conceptual instructions with both Shadow and Steps which would be controlled by speeds.
Branding
TikTok’s brand is well-articulated on its brand site. It contains guidelines and toolkits that act as the foundations for creating all TikTok applications. Their core palette receives Web Content Accessibility Guidelines ratings of AA and AAA when used in specified combinations.
However, we noticed that Tiktok has a challenging situation: On content pages (FYP (For You Pages)/Home), the background is the content uploaded by the user. TikTok has made the executive decision that on these pages the UI design is white with a slight shadow on top of this content. We assume that the breakdown of content is dark, where white is legible, but occasionally a very light background will make these white elements difficult to read.
Style Tiles
In Figma, we rearticulated Tiktok’s branding and defined its preexisting UI components alongside our own in the following pages made in Figma. During creation, I encouraged my teammatess to look towards the branding website. I took on developing new UI components that aligned with the brand while standing distinct in the UI. I specifically utilized the green-blue gradient introduced in TikTok’s brand guide.
First Prototype
The final results were a brand accurate High-fidelity mock up and prototype and include my original idea of steps and mirroring controllable by speed.
User Testing
We tested our high-fidelity prototype on people from outside of our team to confirm that we were delivering a user-friendly learn-to-dance feature. We asked our users what steps they would use to work their way through the process of learning a new dance using the app. Their goal was to learn the dance “Y.M.C.A.,” by the Village People. Beginning from the For You Page, we asked our testers to find their way through the process in whatever way seemed best to them.
We also explained that this was a prototype for just this feature, so some parts of TikTok weren’t represented. If they clicked on a link that didn’t do anything, it probably went to something that wasn’t built yet.
Findings
Findings
Users gave our Learn This Dance prototype an overall success rating of 8 out of 10
-
They appreciated how accessible the feature would be for people of all ages
-
They said the micro interactions were easy to use
-
Users stated they could see themselves using this feature, which is a great marketing opportunity
Suggested Improvements
-
There needs to be a call-out on the Home/FYP that the feature exists
-
There needs to be more clarity between the Steps feature and the Shadow feature
-
Steps and Shadows need to be animated and the speed of animation should correlate to the designated speed
Iteration and Final Design
Solving for the problems discovered in testing, we re-designed the prototype to the following:
-
I varied the Steps and Mirroring buttons and interface.
-
The team added a scroll feature to the For You Page about the new feature.
-
I improved steps and shadow animations
Next steps
The next step would be to work with developers to implement this feature in-app. This would allow better prototyping that takes advantage of a User’s camera.
Due to time limitations and the limitations of Figma, these ideas from our user testing were mentioned and we would love to develop them further by:
-
Including the song in the prototype
-
Create learn-to alternatives of more complicated dances (suggestions included Renegade, About Damn Time…) to show users how it would look like
-
Are we overlaying the camera with the shadow? Or are we using AR to attach these to the user's face/body?
With this proposed solution, TikTok users could learning popular dances at their own pace and style. Users are able to access the feature in a similar manner to how they learn a sound. The learn-to-dance feature is accessible in many ways. Most importantly, a feature like this would build user participation and likeness to post and share, contribuuting to the overall success of the app.
In further development, I would like to research more on multi-display linking. Steps are helpful but can be hard to see from a distance: how can we connect users learning recording on their phone to showing steps on TikTok’s smart TV apps? This would make the feature more accessible.