Instagram Redesign Case Study

Nafi Adibi
UX Case Study: Instagram Redesign
6 min readOct 6, 2020

--

Personal Note

Working as a Learning Experience Designer for multiple giant corporations, and in a close collaboration with product design and customer support teams, I learned the importance of a user centered design. I decided to switch my career to User Experience Design where I could tap into all my previous experiences as a designer to help solve user problems.

During the Instagram Redesign Case Study project, I pushed myself to think outside of the box and redesigned multiple features in Winter 2019. Surprisingly, in fall 2020, I learned that Instagram was testing a few new features similar to what I had already worked on.

In this document, I review my research, design process, and approach to usability problems that I found within the app. I elaborate on my design solutions for the problems and present low/hi-fi wireframes and prototypes.

Research

I followed the Double Diamond Design process to find the right design solution for the proper design problem. In the discovery phase, I compared Instagram analytics against those of its main competitors, including Facebook, WhatsApp, and Snapchat.

Figure 1: Instagram competitive research

Discovery Phase

To study Instagram from a usability and user behavior perspective, I ran multiple rounds of user interviews, and conducted a Heuristic Evaluation based on Jakob Nielsen’s heuristics.

Heuristic Evaluation

Consistency and Standards

During my evaluation, I found multiple inconsistent icons for sharing a story on different screens. These inconsistencies bring cognitive overload and force users to rely on recognition, rather than recall. I rate this issue as a major usability problem.

Figure 2: Heuristic evaluation, inconsistent story icons

Flexibility and Efficiency of Use

Users have very limited control over Instagram feeds. This makes it difficult for the users to filter their feeds based on their needs which may change each time they visit.

A great percentage of Instagram users check the app for purposes other than getting in touch with their friends and families. For example, 14% of US adults check Instagram to read news. However, if a user needs to quickly review daily news in the morning, they have no filtering option for it. Therefore, the user ends up navigating to each news account separately, or continuously scrolling down in their feed to find news posts, as depicted in Figure 3. A similar issue occurs, when a user wants to give themselves a break from all the news related posts with one click.

Giving the option of what users see in their feeds at different times gives them a user friendly experience, and improves user retention.

Figure 3: Heuristic evaluation, user journey to check NBC news account

User Control and Freedom

Users do not have control over visibility of their posts, except for limiting it to the Close Friend List. So, posts’ visibility cannot be customized, so that they are visible only to specific followers.

Users can still send a picture or a video via direct messages by selecting desired accounts, one at a time, which is time consuming.

Figure 4: Heuristic evaluation, Close Friends List

User Interview

To discover the most common user pain-points, and to learn more about users, I sent out a survey and conducted six user interviews. I picked the same number of male/female users from different age groups ranging from18 to 65. My findings show that many users are overwhelmed with countless number of posts, when following super active accounts, who share too many posts per day. Another surprising finding was that most of my interviewees were not well familiar with IGTV app (another app owned by Instagram) and were not motivated to install the app on their phone.

User Persona

I designed three user personas each representing a different group of Instagram users.

Figure 5: Jane persona card
Figure 6: Bob persona card
Figure 7: Jordan persona card

Wireframing

After identifying the usability issues and users’ needs, I sketched various design solutions on paper to quickly visualize user flows, and iterate sketches.

Figure 8: Brainstorming and sketching

Design Solutions

After multiple rounds of design iterations and getting feedback from users, I came up with five design solutions to help with user retention and encourage users to check their accounts more frequently.

  1. Allow users to create multiple Groups for their following and followers’ accounts
  2. Allow users to change the visibility of their posts for each Group
  3. Allow users to filter feeds to show only posts from one Group
  4. Re-design the Story icons to prevent user confusion with Post icon
  5. Re-design IGTV icon interaction to encourage users to install the app on their phone and check it more frequently

Prototyping

I used the Sketch application to create a high fidelity prototype by re-designing and editing Instagram screenshots as shown in this section.

Combined Story and Post Icon

To prevent users’ confusion with Posts and Story icons, I designed an intuitive Post and Story icon. The outer rectangle shape stands for a post, whereas the inner circular shape represents a story, and a plus sign invites the users to click and share as posts or stories.

Figure 9: Story and Post icon
Figure 10: Combined Story and Post icon

Group Feature

Users can create different Groups and assign their Followers and Following accounts to those groups such as Close Friends list(a follower/following account can be in multiple Groups at the same time). Groups allow users to control the visibility of their posts and stories, to filter feed’s posts at different times and to mute or unmute multiple accounts at once. Screenshots below illustrate different ways to create a new Group.

Figure 11: Create a new Group
Figure 12: Add an account to a Group
Figure 13: Mute all news accounts, news Group
Figure 14: Filtering the feed to show only posts from the news Group

IGTV Icon Interaction Design

Instagram removed IGTV icon from the homepage, for not getting enough interaction and the launch of IGTV standalone app. However, users can still watch a full length IGTV video on Instagram.

More than 70% of my interviewees didn’t know how an IGTV video differed from an Instagram video post, nor they were familiar with the IGTV app. To reduce confusion, and to encourage users to log in to IGTV app, Instagram will only show a one-minute IGTV demo. A user may click on the “Watch IGTV video” message on an Instagram demo post to automatically log in to IGTV app and watch the full length video.

Figure 15: Sharing a one minute video on Instagram and a longer video on IGTV
Figure 16: User journey to watch a full length video on IGTV

Thanks for reading!

Nafi Adibi,

Get in touch via Linked-in

--

--