KIM THUY TU
temp2.png

Instagram iOS Redesign

A redesign concept of Instagram aiming to make the user interface and user experience more intuitive, engaging, and personable.

Instagram iOS Redesign

Disclaimer: I do not work for Instagram. The views from this case study is strictly my own and is not reflective of Instagram. As a relatively new designer, I'm acknowledging that my vision might be overly ambitious. In an ideal environment, I would be working at Instagram where I would have access to the datas and metrics to help influence the ideas and concepts generated. Until then, this case study is not meant to be comprehensive or exhaustive in any way. 

This case study was republished on freeCodeCamp and the Observer.

A Super (Suuper) Brief Intro

Challenge

Select an application I love and use everyday and see how far I can push myself creatively as a designer—
I chose Instagram since I've been a dedicated user since 2011— a year after it was launched. Since then, it's been a wonderful 6 years where I was able to see all the different changes and innovations that emerged within the app. Although I only used Instagram for it's filter in the very beginning, now I use Instagram pretty religiously to express myself and stay connected with current trends. So you can trust me, I'm an Insta-veteran.

Goals

For Redesign

  • To facilitate a more engaging and seamless experience when it comes to exploring and staying connected
  • To design a more personable and intuitive user interface
  • To design through user empathy (HCD) 

For Personal Development

  • Learn how to conduct and analyze user research, create flow charts and wireframes, design through Sketch, craft animations through Principle, and prototype through Invision
  • Complete my first design project from start to finish while sticking to my design principles

Project Roles: User Researcher, Data Analysts, UI/UX Designer, Product Designer
Side note #1: Sketches and wireframes can be found at the end of this case study.

Understanding the Company

Instagram is a visual-storytelling application that provides a platform for users to curate and share life's beautiful and creative moments. Since it's debut in 2010, Instagram's user base has grown to over millions, allowing people from all over the world to connect and share moments from their life. To keep with its ever growing presence, Instagram is constantly innovating creatively to push its mission of "sharing the world's moment" forward.  

The User Research & Data

 Me, attempting to make sense of all the datas from the research with post-it notes and my gator shirt. 

 Me, attempting to make sense of all the datas from the research with post-it notes and my gator shirt. 

Before I began my redesign project, I conducted interviews with 40 Instagram users to get a better understanding of who I am designing for. What does a typical Instagram user look like? What are their reasons for using Instagram? What keeps them coming back? These interviews were conducted either in person or via phone/video call. 

meta-chart (1).png

Target Audience Demographics—
Among the 40 Instagrammers I interviewed, there was 10 males and 30 females. The age of the male users ranged from 22 to 27 years old, while the female users ranged from 19 to 25 years old. 65% are currently college students or graduates with plans to pursue higher education. I felt like this was a fair representative sample of Instagram's current user base since 90% of Instagram users are younger than 35. Furthermore, 55% of all 18-29 years old in US are Instagram users

To make this even more interesting, 67.5% of the users I interviewed ranked Instagram in their Top 3 Most Used Application. Additionally, 72.5% of the people sampled uses their Instagram everyday.
 

And the fun continues—

I asked the 40 Instagrammers I interviewed to describe Instagram using 3 adjectives. What do they think about Instagram? How does it make them feel?

A total of 64 adjectives was collected
Top 3 adjectives used: Creative, Fun, and Simple
 

I also asked what they liked about Instagram and here are the top 3 reasons why
(1) its picture-based, (2) its easy and simple to use, and (3) it helps them stay connected.

Personas of a typical Instagram user 

Alex.png
Sam.png

Who do you relate with more? Are you like Alex who uses Instagram to share his life and occasionally uses the search feature to find cool things? Or are you like Sam who uses Instagram to stay connected with friends and her interests? Or both? Either way, I'll be designing with users like you, Sam, and Alex in mind.

Now that we have a better understanding of who I'm designing for, it's time to move on to the good stuff!


Part 1 of 4— Home Page

Really quickly, let's take a quick look at the current set up of Instagram's home page.

Assessment of Instagram's current home page

Assessment of Instagram's current home page

Aside from the repetitive functions within the home page, there were three major problems that I noticed.

Problem #1: Content Overload (Instastories vs Feed)

credits to xkcd.com

credits to xkcd.com

Immediately after opening the application, Instagram users are met with two prime features competing for their attention— scrolling through the stories or surfing through the feed? Both options are very content saturated and can almost feel like an endless pit of scrolling. According to the research on paradox of choices— more choices can actually lead to decision fatigue, less happiness, and guilt/fear of missing out. This is especially concerning when almost half of the Instagrammers I sampled reported checking their Instagram right after waking up and/or at night before bed. 

Side note #2: I decided to keep the minimal chromatic design Instagram implemented last year (2016) because I thought the reasoning and logic behind it was pure genius. You can read about it here.

 
 Tribute to some of my favorite Instagrammers. 

 Tribute to some of my favorite Instagrammers. 

> For the solution, I chose to integrate the stories directly into the feed for a couple of reasons: 

  • The feed and story will now be working together to facilitate a more cohesive experience for the user. 
  • Integrating stories into the newsfeed also prevents it from being a “rooftop deck” like what Julie Zhuo (Product Design VP at Facebook) mentioned. In the current IG design, Instastories are easily forgotten once the user starts scrolling through the feed. Out of sight, out of mind.
  • By implementing the stories into the feed, it'll be operating on a variable-ratio schedule of reinforcement. This is the most powerful type of operant conditioning that generates the highest response for any target behavior— in this case, instastories engagement. 
 
 

Side note #3: Don't worry, I didn't get rid of Instastories. I simply moved it into the message inbox, which you can get to by clicking on the top right corner of the home page. I will discuss this further in Part 3 of 4: Sliding into the DM and Stories.

 

Problem #2: Disassociation between top nav and swipe gestures

One of the main question I sought to answer through my user research was whether or not the swiping features on the Instagram home page was intuitive. Simply put– are Instagram users aware that swiping left and right corresponded with the top navigation? To answer this question, I conducted a relatively simple experiment during the interviews. 

+ Method

n=40

Before I started this experiment, I reminded the users that they should not be looking at Instagram for this portion of the interview. Then I primed the user to visualize the interface of Instagram by describing to me the layout of a typical profile page of Instagram from top to bottom. And then again, with the home page. After describing the home page. I asked them four simple questions:

> Click here to see the datas collected

FOR SWIPING:
1. From the home page, where does it take you when you swipe from left to right?
Answer: Camera to post to story
2. From the home page, where does it take you when you swipe from right to left?
Answer: Message Inbox

FOR TOP NAV:
3. How do you get to the screen to post to your story?
Answer: Top left camera icon
4. How do you get to your message inbox?
Answer: Top right "arrow" icon

*Note: If the user answer this part of the question with "swipe left/right", I would prompt them to give an alternative answer. (Do you know another way to get to __?)

+ Results

Overall Swipe Knowledge

  • Only 20% of people responded correctly to both swipe responses.
  • 30% got at least one correct, and 50% got NONE correct.

    Breaking it down further—
  • 50% of people know swiping left to right takes them to the camera.
  • 20% of people know swiping right to left takes them to the message inbox.

TOP NAV

  • 72.5% of people know how to get to their message inbox by clicking on the top right arrow icon.
  • 55% of people know how to post to their story by clicking on the top left camera icon.

Additional fun facts and stats:

  • Only 3 out of 40 people interviewed got all four questions correct.
  • On a scale of 1-5 on how familiar they are with navigating around Instagram, 75% of people rated themselves 4 or higher. Only 30% of those people got at least ONE of the swiping questions right.
  • A considerably high 92.3% of the people who answered incorrectly believed or guessed that swiping left would take them to the explore/search page.
    (Which makes sense since the search/explore icon is located next to the home icon on the bottom nav)

Idk. I just tap around until I find what I'm looking for, and then all of a sudden I see my face...” — random Instagram user when asked how do they get to their message inbox

The analysis from the results suggests that Instagram users have not established an association between the top navigation and the swiping features. A possible solution to make the swipe gestures more intuitive would be to link it with the bottom navigation. However, I thought this would be a great opportunity for me to implement a completely new feature...

 

> Swipe to see new and older posts

Part of my user research was spent reading through the reviews of Instagram on the app store. One of the main complaints from Instagram users was the lack of chronological order on the feed. 

What I wanted to know was why people wanted their feed to be chronological? Why were they so upset about this change?

By digging deeper, I found that users correlated chronological with thoroughness. With Instagram's current algorithm, popular posts (deemed to be posts that you wanted to see) are located towards the top of the feed. This frustrates Instagram users because they would often missed a post that they would want to see but didn't (aka FOMO— fear of missing out).

To compromise with Instagram's current algorithm and the user's need for chronological order, I decided to implement this swiping feature with an indicator to give users some peace of mind:

For example, if the indicator is in the middle. You'll know that this is not the newest post and you can swipe right to see the newer posts. If the indicator is on the far left, you can rest assure knowing that you're on the newest post from that user. To see older posts, just keep swiping left. 

For example, if the indicator is in the middle. You'll know that this is not the newest post and you can swipe right to see the newer posts. If the indicator is on the far left, you can rest assure knowing that you're on the newest post from that user. To see older posts, just keep swiping left. 

 

Question: What if I kept swiping left?

Answer: Eventually you'll have scrolled through that entire person's post history and ended up at their first ever posted photo... ending your swipe left journey. (/concern)

credits: xkcd.com

credits: xkcd.com

 

Problem #3:
Top left corner— out of reach, out of mind.

People hold their phones in many ways. Regardless of how they hold it, the top left corner of the screen will alway be the most inconvenient and painful location to place a navigation for users. Because reaaaaach *drops phone on face*... or something to that effect. 

Research suggests that the most accessible and least painful spot to place the navigations will be towards the bottom of the phone— right next to the user's thumb. 

From my data, 100% of the people I interviewed know how to post to their feed (because they use it). However only 57.5% of those same people either don't know how to post to their story or just don't use it at all. To increase the posting activity for Instastories, I chose to combine the two posting features because 1) it is now easily accessible and 2) low-key praying that the popularity from the feed will rub off on the stories. 

 
homescroll2.gif
 

Part 2 of 4— Explore or Discover Mode

Now you have the option to explore spontaneously through Instagram's current native algorithm or discover intentionally through your own collection of saved hashtags. Now Sam and Alex can just turn on "#ecgtracing" or "#fitness" to stay updated with their interests. In my case, I would probably turn on "#coffeefliicks" and "#dametravelers" to see aesthetic pictures of coffee and places. You can also just click individually on the hashtags to see one at a time and then drag down to refresh to see all the active hashtags together. You can also click to add new hashtags, delete hashtags, or search within your hashtags collection.  
(And yes, it is in alphabetical order)

 
 
 

Part 3 of 4— Sliding into the DM and Stories

Only 42.5% of the users I interviewed uses Instastories. Two of the biggest reasons why people don't use Instastories is because
1) they already have Snapchat and 2) they often see new stories from people they don't particularly care about. 

To remedy the second reason, I implemented a new feature called "Stories From Your Favs" to instill more value and purpose into using Instastories. Now the stories of the people you love, adore, and/or admire are all at the top for your immediate viewing pleasure. Talk about staying connected! You can easily remove or add people to your favs by clicking on the heart located next to their name. (Awee)

Side note #4: What was my reason for moving stories into the DM? First, I needed a place to put the stories since I moved it out of the feed. Second, when you reply to a story or send a photo, it goes directly into your message inbox. Therefore, it made sense to group Instastories and DM into one big happy package.

Side note #5: In the current message inbox interface, there is no bottom navigation. Users would only know how to get back to the home page if they know how to use the swiping features, and as I mentioned above— only 20% of the users I interviewed knew that swiping left takes them to their DM. With that in mind, I decided to keep the bottom navigation static here so that users wouldn't feel lost.

 

Part 4 of 4— Notifications and Profile

Ahhhh... the final stretch. For the notifications and profile page, I wanted to give the user interface more breathing room by adding more negative space and grouping/nesting similar items.  

Your Notifications

Additionally, you can now "like" and reply to comments directly within your notifications just by holding that person's username (tapping takes you to their profile). Once you hold the username, it will trigger a comment box to appear with an automatic @username— all you need to do now is to type your response and hit "Post".

I thought this would be a great feature because often times, you can get lost in the sea of comments within the post. What was their username again? Where is the comment? What did the comment say? 

I think you can guess which notifs are real...

I think you can guess which notifs are real...

 

FOLLOWING NOTIFICATIONS
Last fun fact of the day— only 35% of the Instagram users I interviewed checks the activities of the people they're following. Whether to keep this function or not was probably the hardest decision I had to make. I decided to keep it and simply redesigned it in a way to draw more attention to the activities by enlarging the photos.

Profile
To be honest, I love Instagram's current design. To increase the minimalism, I made some slight changes to the viewing icons and added in more negative space to keep the design consistency.

Sketches and Wireframes

A Quick Reflection,

Going into this project earlier this January, I knew this would be the perfect opportunity for me to hone my design skills since my recent switched from medicine this past semester. I want to pursue a career in product design so I figured the best way for me to learn would be to just throw myself into a project, and go from there. Looking back now, that is a complete understatement. Within the last two months, I was able to learn all the things I set out to learn in order to deliver this project and so much more. I think one of the best thing about the learning and creation process is that you come to curate your own. You learn what works, and what doesn't. You learn how to do things faster, better, and more efficient. You learn random things along the way while trying to learn about the thing you're actually trying to learn. And the cherry on top of that is that it doesn't end—
the learning process is continuous. 

Design doesn't get easier, you just get better. 

And that's a wrap, thank you so much for reading! 

 

 

For Documentary & Comparative Purposes 

These are screenshots of Instagram's user interface before my redesign— as of February 2017.

 

Upcoming Project: Vision for Instagram