Twitter Playback — UX

No matter how renowned the app is. As a UX Designer, my job is to find the faults in a product and improve it. So it provides a better experience for users. For this case study, I chose Twitter.

We all love Twitter; almost everyone uses it. I have been using it for a long time. After Elon Musk buys it, we are seeing significant improvement in Twitter. Sometimes they are trash too.

On a usual day, I was scrolling through Twitter. I found a video which is 10 minutes long. I am not a person to watch a video at 1x speed. I usually watch it with a minimum playback speed of 1.5x. I was searching for an option which increases playback speed. But I found this,

Well, I couldn’t find that 10 min video. But here is another screenshot. I find it a bit unusual. So, from YouTube, what I know is. If I touch the setting option. It should direct me to the video settings like adjusting video quality, adjusting playback speed, and other features.

But instead, it showed me adjusting the playback speed.

Also, the playback speed adjusting option is designed with radio buttons, and the touch area eventually becomes smaller. These affected the user experience.

So, there are 2 problems,

I, as a user, found it difficult to find the playback speed option.

After finding it out, it was tough for me to choose the desired playback option due to the small touch-surface area.

Let’s get into the solution.

According to Jakob’s Law, Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

When people touch the settings option, they expect it to show some options related to video playback, like YouTube.

So, there must be a clear representation of an icon showing that this video is playing at ‘this’ speed. If you touch it, you can change the playback speeds.

Also, increasing the touch area of the radio buttons for choosing the playback speed is not a good option. Instead, I can design a UI which will be a suitable solution, solving the touch area problem.

Here is the improved UI,

Instead of showing the settings options, this design clearly indicates the button for playback speed. Also, it indicates the playback speed at which the video is running.

Instead of that small radio buttons, I have designed controls that have a good touch surface.

This gif shows the improved UI with animations involved. Notice the playback speed option changes when I switch between the speed. Well, that’s the solution. Thanks for your time.