How TikTok works

May 19, 2020

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.

Case study

💡Tip: Try using the ⬅️ ➡️ arrows on your keyboard to navigate the slides.

💡Tip: Swipe to navigate the slides.

previous arrow
next arrow
Full screenExit full screen

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.

🏃🏼‍♂️ The power of progress

Learn what your user's real goal is, and then gently remind them that they're making progress towards reaching 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…

Consider your options for a second:

1. Start over


2. I assume this deletes the clip too

No, no, no.

3. This ‘X’

Does this go back? Does it delete my clip?

4. This tick…

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.

😨 Avoid the 'risky X'

People hate losing work, and even thinking that you may lose some work is stressful. Remove all ambiguity and avoid 'the risky X' button.

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.

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…


1 million likes within 45 seconds. You’re now famous.


TikTok needs to make money from you. You’re a pawn in their game.

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. 

🏔 Don't smother the peak

Your user's have a goal in mind, so don't put anything trivial right before the peak. You'll smother their enthusiasm and dampen the experience.

Subscribe for more UX-caffeine