Pawel ─ is a Product Designer living in London, United Kingdom. Building next big thing at Revolut. Feel free to contact anytime.

Improving Instagram video experience

Jan 7, 2019 / 4 min read

For me, Instagram is currently one of the most valuable and creative social networks in the world. With 1 billion monthly active users (data from June 2018) it's the main place for anyone who is a creator of any kind. From photographers, designers, musicians too video creators.

The last aforementioned group of creatives is playing a significant role in shaping the way we consume content on the Internet. A huge part of video content consumption is taking place in the Instagram app. If you compare the data from Instagram Stories with the data from the most popular written-content websites such as Medium, Google News, HuffingtonPost, and New York Times you can easily see there is still a gap even if you'll combine them all together against Instagram.

Active users per month / http://www.ebizmba.com

YouTube (almost 2 billion active users per month) is currently the king of video content but there is no doubt that Instagram is trying to take lessons learned from YouTube growth to build its own empire, with the launch of Stories in 2016 and IG TV, launched a few months ago (20 June 2018) they are heading towards the right direction. According to the data from Statista almost 20% of posts published on Instagram feed are videos. People share on Instagram 100 million posts every day, which gave us almost 140 million of videos shared every week. It's a lot, don't you think?

As a Instagram user (and designer), I noticed one small, but a really frustrating issue with consuming videos on the feed. I started researching all the data to validate my assumption.

I end up with a conclusion that there is a place for improvement so naturally, I decided to design it and share with you in this article, but before we will jump into the details let me ask you a few questions.

1. Have you ever wanted to rewind the video on the Instagram feed?

2. Have you ever watched a video on Instagram which turns out being boring or stupid?

3. Have you ever wanted to show a part of a video on Instagram to a friend but you had to wait because a moment you wanted to show was at the end of the video?

Yeah, no worries - me too. I asked the same question to a group of 30 heavy Instagram users and turns out 24 of them answered "Yes" to at least two questions I've asked. This was a moment when I decided it might be a small but also cool opportunity for me to solve some real-life scenario problem for Instagram, which I am a huge fan of. This got me very excited so I started thinking what would be the best solution in this case.

Video player in the Netflix mobile app

I started my work from reviewing Instagram current navigation and gestures. Turns out the whole mobile app is incredibly smooth and you can navigate through all the screens just by using swipe gestures. Almost every screen contains some kind of gesture support to navigate between different type of content but for me, the most important one was a feed and post view.

On the feed, you can swipe left to jump to messages, by swiping right you jump straight away to the camera where you can add a new post to your Instagram Stories.

I quickly realized it's a totally different experience than Netflix's or YouTube's mobile apps, where content is long on you have a bunch of controls. It has to be something simpler and smaller. My main challenge was to design elegant solution that will not only solve the main problem but also will fit the entire flow of an app and will be as natural as current solutions, which are familiar for Instagram users.

Gesture map

I did several tests and I created a simple gesture maps that helped me understand which parts of the screen let you jump into different screens using left & right swipe gestures. Yellow areas are the one that lets you swipe to move to a different screen. Blue areas are the ones that are designed to support horizontal scroll which lets you exploring more content on the screen like Stories at the top of the feed.

A solution which came up to my mind was simple, let’s just add a swipe gesture that lets you rewind the video. For me, it seems to be the most obvious because that’s what people get used to, but currently, in most of the video players, they do this using a slider, not swiping on the entire screen. I was thinking about how I can duplicate this familiar experience without breaking current app flow. Turns out I needed just a simple trigger which changes the gesture areas on the screen.

Just simply by holding an area of the screen where the post is displayed you can change the gesture support from a default (yellow) state to the one which is triggering video control (blue).

Long press is important here because I wanted to be sure there will be no such situation where the user accidentally trigger video control while jumping to a different screen just by swiping.

I build a prototype in Framer and in my opinion, it might be potentially a good solution for this kind of problem. I am not 100% sure about the timing for the long press because I never had a chance to talk with designers and engineers from Instagram.

I was talking about it with a friend of mine on Friday and decided to give it a go on Saturday evening when I didn’t have anything better to do. You might ask why? Because designing is fun.