How TikTok works

  • 19 May 20
  • 16 mins read
How TikTok works How TikTok works

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

Key takeaways

  • Usability tip:

    The mobile experience is much better in fullscreen.

    Go fullscreen

    You can navigate the slides using your keyboard.

    Yeah, understood
  • Subscribe to the newsletter and never miss a future case study.

    Free UX newsletter trusted by product-lovers.

    Or, share this article and help the mission

Loading Spinner Loading
Slide 1 of 81 Fullscreen
Close

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…

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.

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.

Article Image

Reality: You make us money.

Article Image

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.