IGTV redesign

Challenge
 

To identify and understand the pain points of the current IGTV user’s experience. What potential solutions can improve their experience that can meet better to the user’s needs.

 

Outcome

The app is redesigned based on the user's feedback and the existing interaction that most of the IG users are familiar with. 

Skill Practiced

User Research

User Experience Design

User Interface Design

Prototype

Adobe Xd

Role

UI/UX Designer

IGTV App Redesign

00: Understand the Opportunity

Why I Started This Project?

Can you imagine that Instagram is now a global community of one billion? Since 2010, Instagram has invented different features that continue to excite its users, such as stories, highlights, and etc. This summer, Instagram announced the new feature: IGTV, a new app for watching long-form, vertical video from the user’s favorite Instagram creators or to create themselves. It’s built for how you actually use your phone, so videos are full screen and vertical.
 

Most of the IG users have used this new feature that is built inside of the Instagram app. However, not many people know that IGTV is an independent app.

01: Research

The Problem I Suspect

Unfamiliar user flow for IG users

User interface and functionality are not intuitive enough to use

The content does not interest the users so the turnover rate is low


With these discoveries in mind, how might we improve the current user experience of the app and increase the users in the future?

01: Research

User Stories

Tong Wu (active IG user)

“The UI is messy and not attractive to me. There are so many things happen all at the same time”

Chelsea Chen (addictive IG user)

“I wish I can preview all the content under one channel that I don’t have to keep scrolling.”

Target Users

Existing Instagram Users

Active Social Media Users

Daily Commuters

Video Generators & Viewers

Eva Chen (active IG user)

“I think hashtags could be embedded in the search engine.”

Alan Peng (active IG viewer)

"The search function is inefficient because I cannot find the relevant videos.“

Xiran Yang (addictive IG user/content generator)

“I don’t like that I can’t rotate my phone to watch the video. Also, I wish I can have more than one channel so I can categorize my videos”

1

Launch the app

“The layout is overwhelming”

2

Scroll to see all the recommended videos

“Video lists do fit my interest”

Search video

“Search results don't match”

02: Findings

User Journey

3

Click on one video

“Video ratio is inconsistent”

4

Browse / Take action

“No video caption”

5

Leave the video

“How to go back to the previous page?”

02: Findings

Pain Points

1

The search results DO NOT match with the content

2

The recommended video selections DO NOT match user's interest

3

Video layout is overwhelming

4

The user CAN NOT unfollow their IG friend's IGTV channel

MUST

Search options

Recommended list

Page interaction​

Video captions

Video layout

Should

Preview video

Have multiple channels with one account

Should

​​Menu design
Video ratio consistency

Feature Prioritization

02: Findings

Feature Redesign

User Interface

Clean and intuitive video layout
 

Borrow IG gesture interaction to IGTV


Redesign the menu

Functionality

Inaccurate search function
 

Recommended video list — from your friends
 

Able to preview the video
 

Video caption

Iteration

03: Original Concept

After gathering insights from different users, most of the users had troubles navigating through the app because of the app's unfamiliar interaction. Since IGTV is relatively new, its users unintentionally associate with the interaction of Instagram.
 

Therefore, the goal of the iteration is to focus on bringing some of Instagram's design elements to IGTV. Also, to fix some of the urgent problems that most people had struggled.  

Wireflow

I'm a paragraph. Click here to add your own text and edit me. It's easy.

Favorite

Profile

User Interface

Menu Design

 

This new menu design allows users to either tap or swipe. This approach makes the user flow a lot more intuitive and avoids the user getting lost while switching pages.

Layout
 

I simplified the video layout that the user is able to scroll up and down to view the video lists. Compared to the current video layout, the user would not feel overwhelmed when opening the app. The user has the option to browse all the video before the video starts playing.

Video Caption

 

People should have the option to turn on/off of the video caption in the setting.

Search
 

The user is able to search by channel, tags, or people. The results should be more accurate to the keywords that the user types in. 

Video

Search

Concept Testing

04: User Testing

With the first iteration above, I want to know if this new design is actually improving the user’s experience of using IGTV. I conducted 10 user tests with different users and the goal is to see if the user flow is intuitive.

1

Menu design needs to be reconsidered. What if the menu has a long list?

2

The option of previewing the video

3

Texts are too small

The second iteration mainly focuses on reiterate some minor parts based on the user feedbacks and reconsider the menu design. Lastly, to make the user interface to be more polish. 

05: Concept Refinement

Iteration 2

Menu Design - Home


This is the most difficult part to design since the layout can be subjective. However, the goal of this redesign is to help IGTV users (a) to be familiar with the interaction if they are also IG users, and (b) to have intuitive user flow.


Therefore, I borrowed the UI design of IG stories for the menu. Since IGTV is an extension of IG stories, the user should be able to associate between two functions. 

Profile


The user is now able to create as many channels as they want with one account. 

Preview


This preview function is the same as Instagram's preview. The preview function allows the user to have a 30 seconds glance of the video before the user decides to click into the video or not. 

 

Search


Now, the user is able to search by channels, tags, and people. This search feature is similar to Instagram which helps the user to narrow down the search result and suits their needs.

Video


The only update for the video is video caption. The user has the option to turn on/off of the video caption at the setting.

 

Unlike the current design, the user has to tap on the pause icon. Now, the user can click on anywhere of the screen to pause the video.

Demo

06: Next Step

Stretch Goals

In order to perform the best user experience, there are some possible solutions to keep in mind.
 

Not only tracking the user’s browsing history and their habits but also taking their friend’s interest into account. By using the technique of machine learning, IGTV can study the user’s social network and their common interests in order to provide the list of recommended videos that fit the user’s interest.
 

IGTV can stimulate the interaction between users who have the same interest. For example, for users who follow the same channel, IGTV should provide functions on the app for users to network, set up events, or other activities that encourage the community to build up.

1

2

Next Step

During the whole process, I did not have the chance to interview many active IGTV users. Therefore, I would like to test my current prototype with these users and receive more feedbacks.

Other projects

Let's Talk

@2019​