By Peter Ramsey
19 May 20
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
⚡️
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…
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.
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.
🚀
Related Case Studies
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
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 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
Behind the growing ticket sales and returning user base, lies a troubled experience with fundamental problems.