TikTok Live Stream Donations Research

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 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).

Wireframing & 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.

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.

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.

Voice

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!”

Color

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.

Font Family

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.

Iconography

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.