Trying to get a feel for me and my Gator shirt from the post-it notes in my survey data


The challenge: Find an app you love, use it every day, and see how creative you can be as a designer by thoroughly refactoring it.

 

I chose Instagram because I’ve been a loyal user since 2011, a year after its launch.

 

At first, I started using it because of its filters. But over the past six years, I’ve seen all sorts of changes and innovations along with apps. I still use Instagram faithfully to express myself and keep in touch with current trends.

 

You could say I’m an experienced Instagram user.

 

A sidebar: I don’t work for Instagram, and all opinions in this case are entirely my own. Unlike the designers who work at Instagram, I don’t have enough user data to influence their current designs. So, this case study is not comprehensive, and I’m certainly not suggesting that Instagram should abandon their current design and adopt mine.


Some screenshots from my redesign



I’m embarking on a personal goal in this matter


My goals for the redesign:


  • Promotes a more immersive and fluid experience when exploring and online

  • Design an approachable and intuitive user interface

  • Design through User Empathy (HCD user-centric design)

 

My goals for my own development


  • Learn how to perform and analyze user research, create flow charts and wireframes, create design drawings with Sketch, animate with Principle, prototype with Invision

  • Finish my first design project based on my design principles from start to finish


My role in building this redesign


  • User researcher

  • Data analyst

  • The UI/UX designers

  • Product designer

 

For the sake of simplicity in this article I left my sketches and wireframes, but still welcome you to visit here (https://www.kimthuytu.com/instagram-ios-redesign/#sketches).

 


Learn about Instagram


Instagram is a visual storytelling app that gives users a platform to organize and share beautiful and creative moments in their lives. Since it first appeared in 2010, Instagram’s user base has grown to 200 million. It allows people from all over the world to keep in touch and share their lives.

 

To maintain its growth rate, Instagram is constantly innovating to advance their mission of “sharing the world’s moments.”

 


My user research and data


Before I started my redesign project, I conducted interviews with 40 Instagrammers to get a better understanding of the people I was designing for:


  • What is a typical Instagram user like?

  • Why do they use Instagram?

  • What keeps them going?

 

I talk to them personally by phone or video.






Target readership statistics


Of the 40 Instagrammers I spoke to, there were 10 men and 30 women. Male users range in age from 22 to 27 and female users range in age from 19 to 25. Sixty-five percent of respondents were college students or high school graduates planning to pursue higher education.

 

I feel like this is a very representative sample of the current Instagram user base. Because 90 percent of Instagram users are under 35. Also, 55% of 18- to 29-year-olds in the US are Instagrammers.

 

What makes the survey even more interesting is that 67.5% of users I spoke to ranked Instagram among their top three most used apps. In addition, 72.5% of the sample use Instagram on a daily basis.

 

The fun continues


I asked 40 Instagrammers I spoke to to describe Instagram using three adjectives. What advice do you have for Instagram? How does it make you feel?

 

In all, I’ve collected 64 adjectives.

The top three adjectives are: innovative, fun and simple

 

I also asked them what they liked about Instagram. Here are their top three reasons:


  1. It’s based on pictures

  2. It’s easy to use

  3. It helps them stay in touch

 


The personality of a typical Instagram user




The average analysis set of 40 people I’ve talked to


Who is more like you? Do you, like Alex, use Instagram to share his life and always use the search function to find cool things? Or do you, like Sam, use Instagram to keep in touch with friends and her interests? Or are you both?

 

Either way, I have designs in mind for users like you, Sam and Alex.

 

Now that you have a deeper understanding of who you’re designing for, we’re ready to do something awesome!


 

Experience #1: Home page



An analysis of Instagram’s current page

 

Aside from the repetitive functionality of the home page, there are three major issues I’ve noticed.

 

Problem #1: Content overload (Instastoriesvs Feed)


credits to xkcd.com


After opening the app, Instagram users have two main competing features for their attention — should they scroll in Stories or browse in the feed?

 

Both options scroll through an endless amount of content. According to research on the paradox of choice, too much choice can eventually lead to choice fatigue, reduced happiness, or guilt over missing out on things. Especially considering that about half of users check Instagram when they first wake up or go to bed.

 

Footnote: I decided to redesign Instagram in 2016 with minimal changes because I saw the genius behind the reasoning and logic. You can read it here (https://medium.com/@ianspalter/ designing-a-new-look-for-Instagram-inspired by-the-community-84530eb355e3).

 

To solve this problem, I chose to integrate Stories directly into the feed for the following reasons:



  • Feed and Story will be able to work together to promote a more cohesive experience for users.

  • Combining Stories and NewsFeed prevents it from becoming the “roof deck” Julie Zhuo, Facebook’s VP of product design, once referred to. In the current Instagram design, Instastories are easy to forget once users start swiping through feedback. Far from eye, far from heart.


  • When stories and feeds are combined, it operates on a fixed timeline. This is the most powerful operating condition that produces the highest response for any target behavior.



Note: Don’t worry, I won’t remove Instastories. I just moved them to the message inbox so you can get them by clicking directly on the top right corner of the home page. I’ll discuss it in more depth below.

 

Problem #2: Separation of top navigation and sliding gestures


One major problem I found through my user research was whether the swipe gestures on Instagram’s home page were direct or not.

 

Simply put, are Instagram users aware that swiping left and right is related to navigation at the top?

 

To answer this question, I conducted a simple experiment during the interview.

 

Method (n=40)



Before I started this experiment, I reminded users that Instagram was part of the experiment. I then asked users to describe to me the layout of the classic Instagram profile page from top to bottom, followed by the home page. I asked them four simple questions.

 

For sliding:

  1. On the home page, where do you need to swipe left to right to get to? Answer: Cameras to photos to Instastories

  2. On the home page, where do you need to swipe from right to left to access? Answer: Message inbox


For top navigation:

  1. How do you tap the screen to send your story? Answer: top left camera icon

  2. How do you get to your message box? Answer: top right arrow icon

 

Note: If the user answers the “swipe left and right” part of the question, I will prompt them to give an alternative answer. (Do you know of other interactive ways to go to ____?)

 

Here is my collection of data (https://docs.google.com/spreadsheets/d/1KEDjQmM1mRKUQ4qSrbgX7G1ZTFGoMRLWCcCIkHfAEO0/edit?usp=sharing)

 

Based on my research, none of Instagram’s knowledge about swiping is very good:


  • Only 20% of people responded correctly to all the sliding responses

  • Twenty percent got at least one right, and fifty percent got none right

  • 50% knew that swiping left to right guided them to the camera function

  • Twenty percent knew that swiping from right to left would lead them to the message box

 

Top navigation:


  • 72.5% knew to direct them to the message box by clicking the top right arrow button

  • Fifty-five percent knew that clicking the camera button at the top left guided them to post their story

 

Other interesting facts and figures:


  • Only 3 out of 40 people in the interview were able to answer all 4 questions correctly

  • When asked to rate their familiarity with Instagram navigation on a scale of 1-5, 75% of people rated themselves as a 4 or higher. Yet only 30 percent got only one correct answer on the sliding question.

  • A fairly high 92.3% of people who answered incorrectly believed or guessed that swiping to the left would lead them to explore/search the page. (This makes sense since the search/explore icon is located next to the home icon in the bottom navigation)

 

The survey’s analysis suggests that Instagram users don’t make a good connection between navigation and swiping gestures.

 

“I don’t know. I just clicked around until I found what I was looking for, and suddenly I saw my face…” — One Instagram user responded when asked how they got to the message box

 

There’s a way to make the swiping gesture more intuitive by associating it with bottom navigation if possible. However, this might be a good opportunity for me to create a new feature…

 


Swipe to see new or earlier photos


Part of my user research was looking at Instagram comments from the App Store. One of the main complaints among Instagram users is the lack of a chronological display in the feed.

 

What I want to know is why do users want their feeds in chronological order? Why were they so disappointed by the change? Digging a little deeper, I found that users think they can browse thoroughly by time. Instagram’s current algorithm puts popular photos at the top of the feed. This can frustrate Instagram users because they might miss the photos they want to see.

 

To compromise users’ needs for chronological order with Instagram’s current algorithm, I decided to combine the swipe feature with an indicator that gives users Pointers:



For example, if the indicator is in the middle. You’ll know that this isn’t the latest post so you can swipe left to see the latest posts. If the indicator is on the far left, you can safely ensure that you are now looking at the user’s latest post. If you want to see older posts, just keep swiping left.


Trust in xkCD.com

 

Problem #3: Top left corner — out of reach


People hold their phones in all sorts of ways, and no matter how they hold it, navigation in the top left corner of the screen is going to be the least accessible and most uncomfortable area for users. Because it’s like playing with your phone in bed and dropping it on your face.

 

Research shows that the easiest and least uncomfortable point to navigate is at the bottom of the phone — right next to the user’s thumb.



From my data, 100% of the people I talk to know how to take photos and post them (because they usually use them). Of those, however, only 57.5 percent either didn’t know how to take Instastories or never used them. In order to increase the frequency of Instastories, I combined the two functions for the reason that 1) thumb is easier to reach. 2) No more spending time popularizing Instastories.


 

Experience #2: Explore and discover mode


You now have 2 alternative channels to explore from. 1. Through Instagram’s current algorithm. 2. Purposeful discovery through your own collection of labels. So Sam and Alex can watch “#ecgtracing” or “#fitness” to keep up to date with their interests.

 

For my part, I might follow #coffeefliicks and # DameTravelers to see some pictures of the art of coffee drinking destinations. You can also click to add new tags, delete tags, or search through your tag collection (this is an alphabetical order, of course).


Experience #3: Slide into camera and Instastories


Only 42.5 percent of the users I spoke to had used Instastories. There are two reasons why people don’t use Instastories. 1) They already have Snapchat and 2) they’re constantly seeing Instastories of people they don’t follow.

 

To fix the second reason, I implemented a new feature called “Stories of People you Like” to tap into more value and purpose to use Instastories. In this way, more people will use Instastories.


Now, for you to be able to browse more easily, Instastories of people you like, people you admire are all at the top of your screen. Communicate and keep in touch!

 

You can easily remove or add users to your likes list by clicking on the heart next to their name.


Note: Why do I move Instastories into the camera? First, I need a place to way Instastories. Second, when you want to send photos or Instastories, you just go straight to your message inbox. Therefore, it makes perfect sense to put Instastories and cameras together.


Another thing to note: the message inbox doesn’t have a bottom navigation interface, so if users know how to swipe, they’ll know how to get back to the home page, whereas as I mentioned above — only 20% of people know how to swipe left to get to the camera. With this in mind, I decided to keep the bottom navigation bar so users wouldn’t get lost.



 

Experience #4: Notifications and profiles



Hahaha… Finally, the last part. For notifications and profiles, I wanted to give the user interface more breathing room by adding more negative space and group chats.

I think you can guess that the notices are real

 

In addition, you can like or comment on a user directly from your notifications page by holding down the user name (pressing down to enter the profile). When you hold down the username it triggers an automatic @userID comment box, then you just type in your comment and click “post”.

 

I think this is going to be a great feature because a lot of times, you get lost in the sea of post comments. What was their username just now? Where are the comments? What was that comment about?

 

notice



An interesting fact in the meantime — only 35% of Instagram users I spoke to checked the feed of the people they were following. Whether or not to keep this feature was probably the hardest decision I had to make, I decided to keep it and to some extent simply redesign it because I wanted to draw more attention to the image by making it bigger.

 

Introduction to the



To be honest, I like Instagram’s current design. In order to increase minimalism, I made some slight changes to the browsing icon and added some negative Spaces to keep the design consistent.


Reflect on the work I’ve done


Entering this program is the perfect opportunity for me to practice my design skills. I just switched from medical studies last semester and hope to pursue a career in products. So I think the best way for me is to put myself into a project to learn and take off from there.

 

In retrospect, all of this seems pretty simple. But over the past two months, I’ve learned a lot more than that in order to be able to complete this project.

 

I think one of the best things about learning and creating is that you start managing yourself. You learn what works and what doesn’t. You learn how to do things faster, better and more efficiently. You begin to learn something that you wanted to learn but didn’t in the process of trying.

 

The road is never complete. The process of learning is non-stop.


“Design doesn’t get easier, you just get better.”


That’s all, thank you very much for reading!


You can click here to see my full interactive prototype: https://projects.invisionapp.com/share/3TAPYZOZ6#/screens/221708141



Compiler: Lisa

Proofreading: Sand-teasing

Original link: https://medium.freecodecamp.com/i-wanted-to-see-how-far-i-could-push-myself-creatively-so-i-redesigned-instagram-1ff99f2 8fa8b

This article is translated by the non-academic design translation team




Other related articles:


Sketch Product Redesign – How to improve the experience of a polished product