Instagram Feed Redesign
Problem Overview
Instagram use to have a chronicle timeline. The current timeline is based on multiple factors that is causing some of the users missing out on some posts that they wish to see. Some of our users find it hard to find what they just saw after an accidental refresh or simply forgot who posted it. Past posts from friends are simply easy to miss.
My Role
Led the design from identifying the problem, conducting user research and delivering pixel perfect assets.
Conducted user interviews and identified drop-off points through empathy map
Came up with different LOW-FI prototypes and conducted user tests
Created the final HI-FI design with resources, measured the success and validated the outcome
Timeline: 6 Weeks
User Research
I have interviewed 10 interviewees for 15 preset questions and some follow up questions as well, the result was not that surprising to me:
Users are feeling annoyed when some instagram posts are missed on their timeline.
Some users would like to have a customizable instagram post group because sometimes they only want to check a specific group of user's posts.
Most users would want the original chronological timeline back.
Users are not bothered they have to change between applications all the time, but it would be nice they can use one app for everything
Empathy Map
POV STATEMENTS
Instagram Users needs away to find old posts from the past because The current story feed can easily miss out some posts
Users needs away to group up users they follow because some times they only want to check a specific user group
Instagram Users needs away to contact their closes friends because they only share information with them on instagram
Instagram Users needs away to avoid other facebook connections following because they don't want any random people follow their instagram
how Might we ?
How might we help users to group up a specific group of users?
How might we help users to change their sorting method?
How might we convince users to user instagram for DM?
How might we help users to find a post from an earlier date?
How might we let a user find an old post from a specific time frame?
How might we convince that instagram will not connect random people from Facebook?
How might we post advertisements in a more subtle way?
How might we implement an option for a user’s specific interests?
Brainstorming
With questions in mind, I started brainstorming with Hailey Liu, Ethan Zhang, two wonderful UX designer who is currently working in the field how this problem can be solved. After the brainstorming stage and a solid discussion with my instructor, Peter Mckeown about my initial ideas, a two part redesign for instagram has been decided.
Create a redesign for the current instagram time line
A new timeline view for the current instagram profile page
Brainstorming Stage
Design
User Flow:
Grouping:
User create groups for them to put selected accounts for users to review their feeds. Users are given the option to change their sorting method, either current top story method or a time based "most recent" sorting method.
Profile page timeline:
Created a new "timeline" to view a user's profile page.
First Design feedback:
The initial design followed the design language of instagram, it is subtle, every page is simple and clear. I asked a few users to try this design for a first round user testing.
Postive
1. The timeline view is nice and clear, it clearly shows the pictures and the date when it was posted on instagram.
2. Using the timeline function is helpful and easy to use, simple and clear.
Neutral
1. Not sure the timeline function is needed since it is pretty similar to the original profile page, just without the time.
Negative
1. Profile page seems to be a little cluttered.
2. User may not remember what specific day the feed was posted on instagram.
3. Not sure where to find the group user feature.
Iteration:
Due to the fact that the initial design followed the design language of instagram, it is subtle, maybe even a little bit too subtle. I started to think the best way to make the new features more obvious to the users.
After a quick session brainstorming with Peter and our class TA Anshu, I have decided to give out a coach mark for users. It will show clearly how to open and navigate to the new features. Because of the fact that users don't like tutorials and like to skip things, I have included an exit tutorial button at every step. Also this tutorial will option prompt to everyone after the first time they download/update instagram.
Second Design feedback:
Postive
The coach marks are clear, only takes a few steps for the user to understand the newly introduced features.
Neutral
"Next" sounds more intuitive than Continue.
Including two different interactions for opening group is confusing to some users.
Negative
Exit/Continue placement is a little bit unusual.
Final Design:
Eventually I came to this final design.
Rather than giving an unusual next and exit navigation, simply give a "got it" button to continue to the next step and an exit button for user to close the tutorial at any minute.
The dropdown button is also removed, since we are giving out a coach mark, it would be easy for the user to remember where to initiate the swipe down gesture.
Two of the gestures suggestions are also deleted. Some of the users kept trying to test out the feature while they are still in the tutorial. But some of the gestures are now also included in the coach marks.
Reflection
My reflections of this project:
Redesigning is different. Designing from scratch is easier comparing to redesigning. Unlike creating something from scratch, you don't have the same type of flexibility like designing something new. You need to follow your design language that was preset for your product. There even might be some obstacles because you are trying to follow the original design language.
For my instagram designing case, the instagram design language is subtle, it's even causing problems for themselves. During this case study, I was exposed to the Instagram application a lot, and because of their subtle design language, they had to introduce some new features by using coach marks as well, even though they know it's not following their design style.