UX Case Study: TikTok User Research for Live Stream Donations
By: Shawn Wydra
Tags: UX Research, Tiktok App, Redesign, UX, Live Streaming

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.