The Curious Case of Instagram Comments
Studying and tweaking Instagram comments to improve user engagement.
Before We Get Started
How did I get here?
Two weeks ago, I set out on a learning journey with a 2 Week UX Kickstarter Workshop by UX Anudeep under GrowthSchool. I was familiar with Anudeep’s content on Instagram, so I was excited going into the first live session with him.
While I was prepared to learn, what I wasn’t prepared for was the depth of learning/ unlearning I was in store for. For instance, this one’s my favorite, Heuristic Evaluation always seemed like a formal and daunting task to me while self-learning but in one live session Anudeep broke it down into simpler terms by applying it to a product. Other concepts like Fundamental UX Principles, Figma UI building & Animating were also part of the workshop.
We had daily workbooks to build on the lessons learned. The last leg of this workshop is a UX Design Challenge. This brings us to today where I’d like to present my learnings from studying and tweaking Instagram's comment flow.
My Final Redesign of Instagram’s Comment Flow
So here are the original and redesigned screens (before & after usability testing). Don’t worry, this isn’t the end of it. I’ll walk you through my process down the line.
How does this help users?
Users can now view reels on the homepage while commenting or scrolling through comments without getting cut off completely. This makes the overall comment flow more consistent.
How does this benefit the business?
This tweak in the comment flow would improve user engagement and retention.
How I Reached My Final Design?
Throughout the “Learning from Existing Design” workbook, I examined various apps and attempted to understand their design.
For this activity, I used the same method to narrow it down to Instagram. Also, as it is widely used with a large user base, any impact I can make will benefit a large number of people. It would also be easier to find Instagram users for user testing.
Before I get to the nitty-gritty of it, I would like to establish use cases for the Instagram comment flow to better express the problems identified.
Use Case 1: Interaction with Reels
- On Instagram, if you go to reels and comment on the first reel you come across.
- You will find that the reel plays from a minimized screen while you can scroll through the comment and interact with others.
Use Case 2: Interaction with Reels in Home Screen
- Once again, if you were to comment on the same or another reel on Instagram’s home screen.
- You will find that the video would cut off immediately and you’re taken to a different screen.
Use Case 3: Interaction with Posts on Instagram
- Lastly, if you were to comment on any post on Instagram you would be taken to another screen with expanded comments as mentioned earlier.
So, What’s Up with It? — Heuristic Evaluation
Now that I’ve gotten you familiarized with the use cases let's explore the problems through heuristics.
Heuristic principles are a set of guidelines based on common user behavior. They aid in determining the usability of user interfaces.
Problems Identified through Heuristics
Consistency & Standards
- While the comment button makes its purpose evident to users, it’s intriguing how it works in different use cases.
- The inconsistency in the way the comments work might interrupt the flow of users who want to view videos while choosing to scroll through the comments or comment on them on the home screen.
Recognition rather than Recall
- Most content on Instagram asks for some form of interaction and users who wish to interact with posts/reels on the home screen would have to recall elements from the post/reel to comment making the overall experience less seamless and increasing memory load.
Okay, What’s Next? — Brainstorming & Ideating
Yep. It’s brainstorming time!
I spent a couple of hours studying how comments work on Instagram.
Yes, I said “hours”, and I came across something interesting. Assuming, that you’re on your home screen. If you were to stare at a post for about 6 seconds, a comment bar would appear below that post. (See below⬇️)
Interesting right? I wasn’t aware of this feature but assuming it exists to allow users to engage with posts I went about looking for this feature on other sections of the app and surprisingly enough, this only happens on the home screen.
While it's a cool feature this would only allow users to leave a quick comment for posts on their home screen. But what if users wanted to view the comments while watching a video. The feed would still cut off when the comments screen opened.
Based on this, I came up with a few ideas to solve the heuristic issues identified earlier.
Occam's razor states that…
The simplest solution is often the best one.
While Idea 1 works well for apps like Reddit and 9gag. Keeping consistency in mind, Idea 2 seems the simplest and most feasible.
Turning My Idea into a Prototype (Low Fidelity)
This stage is particularly exciting since I get to convert my thoughts into something tangible and sketching is fun!
Using the Marvel app, I converted the paper wireframes into prototypes to test them. This was my first-time using Marvel and I was fascinated by how simple it was to set up a flow and test it.
Transforming My Prototype into a Real App like Interface (High Fidelity Prototype)
Gathering the UI building & Animating lessons taught during this workshop, I was easily able to create HiFi Prototype of Instagram’s comment flow. I referred to Instagram's brand identity guide to develop the design.
Does it Work? — Usability Testing
Now that the prototype is ready, I will proceed to validate it with usability testing. I’ll be testing the design with users to ensure it works and improving what doesn’t.
Since Instagram is well-known, it's safe to assume that almost everyone uses it. So, I conducted usability test on folks at a mall.
I prepared a list of tasks that I asked users to complete while I observed them to better understand if it the prototype is usable.
Tasks for the Users:
- Choose a post and comment on it
- Scroll through the comments
- Like a comment
- State a relevant comment from the comment screen
- Go back
Things I’m Looking Out for:
- User commenting behaviour (Do they click the icon or view all comments)
- Are the posts visible and clear to users in the comments?
- Does this align with their usual post interactions without being overbearing?
- How do users return from comments back to home screen?
Things I Learnt from it:
- User tried tapping on the image to go back to home screen
- They were more inclined to navigating to the comment section by clicking on view all comments
- Could clearly see the graphics but struggled with smaller texts
- User tapped on the back icon to return to home screen
- They double tapped (liked) the image on the comment screen
We’ve come full circle — Improving my Design Post Usability Testing
During usability testing, I found that the users tend to tap on the image to return to the previous screen. A user suggested incorporating a way to like the post on this screen as well. While a user did double tap on the image in the redesigned comments screen, I believe this would interfere with the tapping on the image to return to the previous screen.
I then proceeded to encapsulate all this feedback to make the final design.
Since I established three use cases earlier, I would like to show you how it would look for users while interacting with:
Videos
Reels
Images
Here’s the Figma Prototype:
To Sum it Up — My Key Learnings
These 2 weeks instilled in me a new perspective and way of thinking. I truly appreciate Anudeep for taking us on this journey of breaking conventional learning and embracing the non-textbook approach of learning. I feel confident in my understanding of UX concepts and look forward to learning more down the line. I will definitely miss the post live session talks where Anudeep would walk us through not only UX and UI concept but also portfolio and UX job preparation tips.
