TikTok (UX/UI concept piece, not real)
New Feature of TikTok that Make Following Trendy Dances Easier
My Role
This project is a team project. Our team have 3 members and we worked together all the way from UX research to meeting stakeholders and building UI prototypes. We have 3 members. I am the UI designing person. I design UX deliverables and building UI designs.
This project was a design challenge given as a 4-week team project in our UX Design Bootcamp. The client is TikTok which belongs to the entertainment/ social, media industry.
With audience members ranging from children to adults, TikTok has inspired dance trends that have been introduced as dances where people are encouraged to do their own versions and share to communities.
​
The challenge was how might we enable TikTok users to easily keep track and follow dance steps of their favorite choreography videos while staying on the app? We built the design following TikTok Brand Design Guideline on Apple Devices.
Project Overview
Our Approach
1. Studying TikTok users and Competitors
2. Interviews TikTok Users and Building Personas
3. Building Current-state Customer Journey and Identify Areas of Opportunities.
4. Strategize and Assess Different Solutions
5. Sketches and Building Wireframes
6. Usability testing, Meeting with Stakeholders and Finalize the UI design.
Studying the target users, gathering data
Doing research on people who use TikTok, studying their decisions on why post, why not post, why dance, why not dance?
Same as other social media platforms, TikTok allows users to create their own personal profile. However, not all users post on TikTok. Some of them find creating TikTok takes too much effort, especially when it comes to dance videos. Thus, TikTok wants to implement features that help users learn the moves faster and increase the time that they stay and interact with the platform.
We pick interviews as the primary research method because we want to gain some insights on how the current TikTok dancers are learning the dances and what prevent the consumer ( TikTok users that do not create content) from posting dance videos despite what seems like everybody else is doing. We also study the market in which we did a competitive analysis between TikTok vs other companies like Snap Chat, YouTube Shorts and Instagram reels. We want to know if these companies have incorporated any features that target the same problem within their app and if they have, how often do their users use it. We interviewed total 3 people and did a brief survey on 6 of them. The 3 people interviewed were our friends and they belonged to the age group of 21-22. While the survey group are middle school kids.
Through competitive analysis we have figured out that the dancing trends are currently exclusive for TikTok, and TikTok makes it easier for users to learn the moves by allowing them to download the videos while other apps only allow their users to save the videos without being able to adjust the speed. speed forward or backward the video. One of the person we interviewed posts dance videos on TikTok and the way she learns the dance was to download the video, pause at certain frames and adjust the speed of the video while following steps by steps in front of her mirror. Another person who doesnt post dance video but rather cooking videos said that she wanted to do dance video but she doesn't have mirror in her room thus can not learn.
Our team sorting interview answers to gain useful customer insights
Competitive Analysis between TikTok vs Youtube Short vs Instagram Reel vs Snapchat
Researching and Strategizing
Compile interview answers, compare and gather insights
After going through interviews with different groups of TikTok users in which we list out 10 ideas/features they would love TikTok to incorporate. Turns out people often restrain from practicing dances often time because they do not like the way they look dancing and have no time to practice thoroughly to better their moves. One said she did not have a full body mirror to practice.
The one who dances download the video into her phone gallery and stop frame by frame so that she can study the moves.
​
Other than the most loved feature which is to have a reference video in a side-by-side view with the recording screen, the interviewed users think that its important to allow them to pick whether or not to delete the reference video in the final result, yet still give the reference video the credits.
​
​
We have a list of 10 features in which we ask the interviewees to rate from 1 to be the least necessary all the way to 10. This is the result.
Research Synthesis
Methodology: Interviews, Surveys, Competitive Analysis
UX deliverables : Personas, Customer Journey, Wireframes
1. Persona : After doing interviews and surveys we have found multiple groups of TikTok users. And as much as we want to dedicate this feature to the people who dances and want to dance only we want the feature to be useful to as many people as possible. So there are 3 personas: The one who create dance videos, the one opens to the idea and want to try, and the ones that shy away from the idea of posting content in general. We also want to make sure that the credits are given to the reference video and creator.
2. User Journey: One of our most important research findings is that the dance learning process does not happen on TikTok. People feel like they need a mirror to learn dance moves. They need to download the video into the gallery to use its features of slowing the video down, speeding it up, mirror the video. Not only that, there are multiple steps and touchpoints between seeing the video and being able to find the best dance video to study. And even after one mastered the moves, it is not easy to record a good, satisfying results. All these pain points need to be addressed and put into a story so that when we worked among team members as well as presenting the problem to the stakeholders. We can have them understand what we are trying to solve, not just the dance following parts but also the before and after process as well.
3. Wireframes: The wireframes were built after our team has come up with the solutions of adding opacity features that allow users to add reference on top of their recording video while lowering their opacity so that they still can see the background. We did not decide to go full-on design the high-fidelity because we want to consult with the users and the stakeholders first to see if the design is intuitive to the TikTok users and match their expectations clicking and navigating through the app. We called the feature as “overlay” at first and it is a independent feature that sits right next to existing TT features of “Duet” and “Stitch” but the then we worked upon the users feedback to make it a layout of “duet” feature and named it “freestyle”
The personas built upon the research data. Tanya represents the group of users who post dance content while Polly does not post.
We want to come up with features that help Tanya speed up the process and encourage Polly to use,
Tanya's current customer journey. It takes efforts and she needs to leave the app to practice the dance.
Tanya's future customer With the right solution, we can make Tanya happy
The very first wireframes, we made multiple adjustments after having showcased this to the stakeholders
Usability Testing and Final Prototypes
Feedbacks were gathered after the wireframes were built. Final prototypes are then designed based upon the feedbacks.
1. Usability Testing : Usability testing was a step that we could not afford to skip. TikTok enables its users to do a lot of things. A poor design can actually make the app crowded and confusing to users. The feature received negative feedbacks at first due to the lack of spacing between elements and the poor applications of radio button design. Thus, we decided to break down the process, even though it increases number of touchpoints but the design looks much cleaner and intuitive.
2. Final UI Design :
Because the nature of this project is not to redesign TikTok but rather to work with teammates to come up with the solutions to a problem; we aim for a UI design that look as belong as possible. We want the feature to not be overlooked by the users but also not to stand out as something obviously do not follow TikTok brand guidelines. The icons for the features were taken from Flaticon. By using the freestyle feature, specifically “preview mode” users are allowed to practice as many times they want without the video ends and needs to be played again. Lowering the opacity enables users to have a full display of their performance without worrying about the reference video taking space. Moreover, they can record with the reference video and choose to not show it in the video that they are posting. And it encourages users to credit their dance reference video because it was inserted into your caption by default and you just cannot erase it.
​
High fidelity Prototypes
We decided to make the new feature
as a new TikTok "Duet" layouts
We want to make the layout button stand out so that people do not need to look for it.
Users have options to lower capacity so that they can have access to full screen and the reference video at the same time
Preview as PRACTICE MODE
for the early phase of the learning
process in which users do not need to record their progress.
Sub Features :
​
"Transform" to edit size of the reference video
​
"Duration" to edit length of the reference video.
Outcomes and Lessons
Through this project, I have learned that when working for a company, it is a challenge to balance out the friendly usability with the brand identity. It is important to follow the brand guidelines while still make sure to have the right levels of contrast, space, and text size.