Instagram:
Profile Interface Redesign

As the product grows, Instagram’s profile page seems bit more clumsy than before. It keeps changing users habits by adding more interaction elements, which messed up the hierarchy of the interface. As a heavy Instagrammer myself, I decided to do a small design exercise to re-imagine the profile page.

The main goal for Instagram is to enable users to share and browse visual contents they are interested in. For profile tab, it is a place where users manage their own profile and learn more about other people in the community. Hence it is very important to keep the page clean and intuitive to use. Problems would prevent users from showcasing their creativity, as well as exploring more interesting cotent. 

I decided to work on the self profile page first, then apply it on other use cases.

Problem

As there are two directions for improvement, I chose to begin with the use case of user’s own profile tab instead of  other people’s profiles.

Since the profile tab is the hub for all of users’ photos, videos and settings on Instagram. The main goal here is to create a space where users can manage their own profile easily. But as the features grow, I found few problems with the interfaces that prevent users from understanding their own profile and managing it efficiently.

Approach

I began by investigating the structure of the current interface design. I sketched out the hierarchy of the information presented, and did a short research about the relationship between the interactive elements and their functionalities.

After identifying few key issues, I started brainstorming about the potential solutions, specifically the improvements that can be accomplished by interface changes. 

Solution

Based on the few issues identified, I altered the hierarchy of the interface elements and introduced a new interaction pattern for a more minimal design. 

Edit Profile:
Users can edit their profile by tapping on the profile section. With background accentuating which section they are editing.

Photos of Me:
Users can check photos they are tagged in by clicking the Tag icon. A separate layer that differentiates itself from user’s own photos will pop up.

View change:
Comobining two buttons in the original design into one, by tapping the view icon users can switch between List/Grid view. The button itself is changed based on the context.

Archived:
Using the same mechanism as the view change interaction, users can switch between current presenting posts and archived posts by tapping another button.