UX Case Study: TikTok User Research for Live Stream Donations
Creating a friendlier process for donating to content creators through live streams.
Overview
Since mid-2017, TikTok has gained explosive popularity globally, but especially in the United States. TikTok is one of the world’s most popular social media platforms for short-form (15–60 seconds) video creation and sharing. The attraction to TikTok is that anyone can create whatever they’d like, with each video potentially becoming someone’s “15 minutes of fame.”
While conducting research, a pattern arose that most people on the app want a sense of community. That led me to TikTok’s Live Stream section. It has the most potential for growth into this conduit for the community that people crave.
Problem
Based on preliminary research, there was a clear lack of community between Content Creators and Viewers that both user types very much craved. So, the problem I set out to solve was: how to rethink TikTok’s Live Stream functionality so that there’s better engagement between Content Creators and their Viewers. Currently, the only form of engagement on Live Streams relies solely on comments and a basic form of donations to the Content Creator streaming. Depending on the popularity of the Creator and how many people are watching the stream, the comments section usually is filled up with Viewers asking questions or just trying to get the Content Creator to give them a shoutout.
An alternative way to give the comments section a brief pause is to donate to the Content Creator because they will see that and generally thank whoever donates to them, especially when it comes to higher-priced donations.
Audience
Since TikTok has set a minimum age of 18 years old for receiving and giving donations, the audience’s age in this study focused on that demographic, as well as a few self-imposed rules. Using my screener survey, I set out to find people who are on TikTok at least once every other day. I also searched for those who have donated money to Creators, either through TikTok itself or other means such as Venmo, CashApp, Patreon, etc.
Roles and Responsibilities
Since I worked alone, I led both the UX Research and UX Design initiatives. The initiatives were split up between 8 weeks of research and another 8 on design and usability testing. The first 8 weeks were spent on Discovery Research and Competitive Analyses, Interviewing both Content Creators and Viewers to see if common patterns arose, and User Personas. I wanted to understand how people view and use TikTok as it is currently created. The next 8 weeks were used for developing a solution through User Journey Maps, Lightning Demos, Crazy 8 sketches, Wireframing, Branding, Prototyping, Usability Testing, and finally redesigning the wireframes based on the results of the Usability Tests.
Scope and Constraints
The initial discovery research and design phases were each eight weeks long. Since the project’s scope was for academic purposes, I did not reach out to TikTok. As both phases took place during the COVID-19 pandemic and subsequent lockdowns, in-person interviews were not possible and were strictly replaced by Zoom meetings (with screen sharing when necessary).
Process
Discovery Research
The competitive analysis was used to bring to the surface what made TikTok different than its competitors. The most popular of the six direct and indirect competitors were Byte Inc. and Instagram.
Byte Inc., or just Byte, is the successor to the popular app from 2013, Vine. It’s similar in the sense that you can create short 15 second looped videos and share/ “Re-Byte” them. Byte also has a feed of random creators based on your likes known as the Your Mix page (similar to TikTok’s For You page). Due to Byte’s overwhelming similarity to TikTok, there are a fair amount of reviews in Apple’s App Store that call Byte a “backup of TikTok” in case it was ever taken off the US App Store, as well as a “TikTok knockoff”.
With 1 billion monthly active users globally, Instagram is one of the world’s most popular social media applications. It’s a platform to share photos, videos, stories, and live stream to one's followers. Its popularity can be pointed towards the fact that anyone can pick it up and learn how to use it. Instagram also has nearly infinite topics to explore. On top of this, the stickers people can put on their story were one of the most referenced pieces of media that five out of the six initial interviewees mentioned and discussed at some point during the discovery phase’s interviews.
Throughout the interviews, the main topic that kept resurfacing is that people want more of a sense of community that just isn’t there in TikTok as of right now. Viewers want to be able to talk to and learn more about their favorite Creators, and Content Creators want to hear feedback from their audience.
How Might We
The research and competitive analysis led to the question: How might we rethink TikTok’s Live Stream functionality so that there’s better engagement between the Content Creators and their audience?
User Journey Map
The User Journey Map helped me focus on the important parts of the Live Stream and narrow down what I wanted to work on.
Lightning Demo and Crazy 8's
After narrowing down the focus on the Live Stream to just three aspects, I sketched out potential additions and redesigns based on other applications. I took the Pinned Comment suggestion from the research phase and took inspiration from Instagram Live’s pinned comment design. I also drew Twitch’s “bits” donation drawer as that was one of the few popular applications that allow donations during a live stream. Lastly, I really liked how YouTube filtered their Live Chats. Between being able to watch comments in real-time, or switching it to the top chats (filtering spam, solicitations, etc.) seemed like a good idea for TikTok to prevent viewers from serial posting the same message repeatedly for attention from the Content Creator.
After the initial sketches, I made a set of Crazy 8 sketches (pictured below). The best idea was the top right-most sketch. All the future iterations were based on that concept.
Wireframes & Prototyping
After sketching ideas, I narrowed down which concepts I wanted to incorporate into TikTok’s Live Stream functionality. I landed on the donation feature, where Viewers can donate money to the Content Creator they’re currently watching.
Compared to the current donation flow, not much has changed as it is as bare-bones as one can make it, in my opinion. But what can change is how easy it is accessed and how decisions to donate are made. I rounded the corners of nearly everything to add a sense of friendliness, made buttons bigger to make them seem even more prominent, and moved the “recharge” button to refill coins in a more prominent area that’s closer to the Thumb Zone. I then used Craft/InVision to prototype it and set it up for Usability Testing.
Usability Testing
I sent out screener surveys and ended up with five participants, all of whom are Viewers. Three participants frequently watch TikToks daily, and the other two go on TikTok for roughly 2–4 hours weekly. Three have previously donated money to Content Creators, either through TikTok itself or through Venmo, CashApp, Patreon, etc. Due to limited responses on the survey, all Viewers infrequently watch Live Streams, and not for very long if they do. Each participant was given a list of tasks to complete. (1) To open the live stream, (2) Refill the number of coins in their account, (3) Then donate money to their favorite creator, and (4) Undo the donation if they would like (optional).
My assumptions entering the tests were: People don’t trust TikTok enough to donate through their platform, and if people perceive TikTok to be less aggressive, they’ll be more likely to donate.
For the Open Live Stream screen, most people opened the Live Stream before I was able to ask or mention anything, which made me believe that it was intuitive, at least on some level. The Recharge Drawer screen had several points for feedback. One participant mentioned to “change the phrase [“Recharge”]. It reminds me too much of video games and how I need to recharge my health or stamina.” It is currently the copy that TikTok uses, and this participant was the only one who commented on this, so I didn’t change it.
Another participant said, “I like the height of the [drawers], but I wish they were a little bit lower down so I can see more of the live stream.” A second participant stated a similar suggestion. This viewer also suggested that I at least add a photo of what a Live Stream would look like as opposed to a blank room for reference for how high the drawers should go. I ended up lowering the drawers so that more of the Stream is visible to the Viewer.
For the Gift Drawer screen, one participant recommended reordering the illustrations. The recommendation was that the illustrations should be organized based on how elaborate the animations would be when played on-screen when the Viewer selected them. I reorganized the illustrations based on exactly that. Another stated that they didn’t know what gifts did, and suggested adding a help button to bring up a page to explain it all. Because of that I added a help button, as well as changed the lightning symbol for “Recharge” to the local currency so it would be less confusing.
Branding
I wanted to change TikTok’s branding a little bit. I changed its personality to be fun and playful, but takes a step back to allow Content Creators a space to make engaging videos for their audience. TikTok is cheerful, encouraging, and wholesome. Due to the diversity of content and diversity of audience members, there are a plethora of videos made by Content Creators, so there is a little bit of something for everybody.
For its voice I wanted TikTok to be upbeat, patient, and down-to-earth. Its voice is neutral and instructive when it comes to more intensive sections of the app, such as editing. For example, to add a comment the copy is “Share your thoughts…”. The current copy to make a new video is “Tap to create a new video”, but since TikTok, the name of the company, has been adopted colloquially for the short-form videos on the platform, the copy would now read “Make a new TikTok!”
Visually, I wanted the app to strictly be dark mode, because if someone is staring at this app, it’s less stressful on the eyes. The dark navy blue is TikTok’s primary color. It’s used for main components, such as buttons and text on light backgrounds. The more royal blue is TikTok’s secondary color, used for components and text that don’t require as much attention, such as overlays. The banana-yellow is for TikTok’s CTAs and areas that demand one’s attention. The bright white is mainly used for text on dark backgrounds and affordances to teach one how to use the app.
Brandon Grotesque is used throughout the app. Its rounded corners and low contrast add a sense of friendliness. Since it is sans serif, it’s much more legible on screens rather than print. The geometric face adds a feeling of helpful instruction for people to latch onto.
TikTok’s icons are taken from SF Symbols so that they are native to iOS apps. Flat illustrations add a playful and cheerful feel to TikTok, and, once tapped/ activated, those illustrations play an animation on-screen.
Outcomes and Lessons
Based on what I had learned, my assumption that friendliness would play a big role in the likelihood of someone to donate was validated. Most participants said that the ease of use as well as the “vibe” they got would make them more likely to donate to Creators. My personal bias points that towards the heavily rounded corners and large colorful illustrations. By taking these factors into consideration, participants felt a greater sense of community through the enhanced interaction with the redesigned flow for Viewers to donate to Content Creators.
