By Peter Ramsey

19 May 20

How TikTok works Company Logo
TikTok7 min read
Listen

How TikTok works

How TikTok works Featured Image

What’s the experience of creating your first TikTok like? What have they done really well, and what could be better?

Key takeaways

  • ⚡️

    Amp up the feeling of progress.

  • 😨

    Avoid the risky ‘X’ button.

  • 🏔

    Don’t smother the peak.

3 UX takeaways

1. Amp up the feeling of progress

Before starting out on this journey, I had a clear goal: I wanted to create and publish my first video on TikTok.

And, cleverly, throughout the process I was given regular nudges, reminding me that I was making progress towards that goal.

1. Before recording

After giving TikTok permission to access my camera, the black background turns into a subtle live view from my camera.

📹

2. Whilst I’m recording

A blue bar appears, and the red ‘recording’ ring pulsates.

3. After recording

My TikTok autoplays as soon as you finish.

These may feel like obvious aesthetic design decisions—and perhaps that’s why they were chosen—but they also are great for the experience.

And the feeling of progress keeps the user more engaged, less inclined to stop what they’re doing and more likely to have a better overall experience.

The key is understanding exactly what your user’s goal is, and subtly leaving clues that their effort is pushing them closer and closer towards that goal.

2. Avoid the 'risky X' button

Imagine this: you’ve been trying to film yourself throwing a basketball over your house and into a net for 3 hours, and you finally make it.

There—captured on TikTok—is the greatest basketball trick shot you’ve ever made. You click the ‘adjust clips’ icon, but then realise you don’t actually want to edit anything.

You then see this…

null image

Consider your options for a second:

📷

The camera icon

Nope, I don't want to start over.

🗑

The bin icon

I assume this deletes the clip, so no.

✖️

'X' (bottom left)

Does this go back? Does it delete my clip?

✔️

The tick icon

What about if this trims my clip and I can never get the original back?

The ‘X’ actually just cancels the ‘trimming process’—taking you back to your trickshot, no harm done.

But given how much effort you’ve put into this video, would you risk clicking that ‘X’? How confident are you?

In these instances—where it’s possible that a user will lose some work—I’d always prefer a text link that says ‘go back’. It’s less ambiguous and in this context would save the user worrying that they’ll lose their video forever.

3. Don't smother the peak

I’ve filmed, edited and captioned my first TikTok—and now I’m one button away from completing my goal.

null image

You’re so close. You’re already thinking about how you’re going to send this to your friends on WhatsApp. What caption would be funny?

And when you click that ‘Post Now’ button…

Expectation: Fame.

Expectation: Fame.

Reality: You make us money.

Reality: You make us money.

Sure, the second time you post a video it doesn’t ask that—so your expectations may live up to reality then—but that’s not the point.

You only get one ‘first experience‘. Don’t smother the user’s peak with something boring like this. It’d be like climbing Mount Everest, only to be asked to sit down and do your tax return 10 feet from the top.

All of the UX analysis on Built for Mars is original, and was researched and written by me, Peter Ramsey.

Get original UX analysis straight to your inbox.

Unlimited access to over 60 case studies and playbooks, for free.

🚀

Related Case Studies

How (not) to get people to download your app
Reddit
9 min read minute read

How (not) to get people to download your app

Reddit's strategy of canibalising their own web experience, and blocking third party apps, might not be working.

Exposing the growth engine of Threads
Threads
10 min read minute read

Exposing the growth engine of Threads

A deep dive into why Threads' launch strategy was so effective, and the UX theory behind their A/B tests.

Wise: UX without borders
Wise
9 min read minute read

Wise: UX without borders

Wise are a multi-currency financial service that, during the age of incumbent banking, earned success with their radical transparency.

Ticketmaster: the UX of a true monopoly
Ticketmaster
12 min read minute read

Ticketmaster: the UX of a true monopoly

Behind the growing ticket sales and returning user base, lies a troubled experience with fundamental problems.