Diego Vanegas
UX Designer

Instagram

Adding an MVP

Image alt tag

Brief

Design an MVP based on the users needs for Instagram having in mind the business perspective. This was a 2 week project which consisted of three members including myself, the roles that I was involved in were user research, comparative analysis, user flows, problem solving and prototyping.

Before starting the project we came up with the idea of having a custom feed on your main page on Instagram by creating groups, since this was all a speculation we went through the design process to polish our MVP.

1. Knowing the user

Interviews

We conducted ten interviews, all the users were active instagram users and the questions were around what motivates them and how they organize their feed.

Findings:

  • Uses Instagram for inspiration

  • To stay in touch with friends and family

  • Social media apps for news and updates

  • Hashtags are important to filter searches

  • Finding accounts is not a pleasure experience if you don't know the exact name

Instagram's New Feature

Affinity Mapping

Our research told us that our users can’t find what they are looking for.

Instagram's algorithm is doing a poor job at targeting adds and suggesting accounts, most user complain about this, saying some adds were completely irrelevant and at some point stopped using the app because the content wasn't interesting to them.

Answers where categorized as 1 being the least and 7 being the most helpful

Answers where categorized as 1 being the least and 7 being the most helpful

Surveys

We decided to ask about what current features were useful and what would they like to add to instagram, the purpose of this was to verify if users would be interested in grouping accounts and having a custom feed that filled their personal taste.

After conducting 23 surveys and ask them about 7 features some current ones and some new ones, we concluded that our grouping features was something users are interested in.

Hypothesis

Instagram users need a way to organize their feed so that they can choose content that suits their current preference.

Instagram's New Feature

Persona

Based on the affinity map and the user interviews; we created Selena. Selena is a designer and an avid Instagram user that finds the social media platform as a way to get inspire and help her out with her work.

Selena finds it frustrating when she can't find what she's looking for since she follows more than a thousand accounts.

2. Checking The Competition
Instagram's New Feature

Feature Inventory

We compared Instagram with they main apps our users are using and discovered that Twitter is the one that checks all the boxes.

Instagram's New Feature

Task Analysis

I described and went through a series of tasks with the social media apps that check most of the boxes in the feature inventory and again discovered that twitter even though it doesn't do a great job compared to the other apps, it does almost everything in relative simple steps.

Instagram's New Feature

Site Map

Creating the site map and figuring out where to add the new Grouping feature help me a lot to create efficient user flows and to give the whole team an understanding of the solution.

User Flow

Thanks to the task analysis I had the challenge of designing the user flow with fewer steps than Twitter which is the only app that allows you to customize your feed. The goal was to reduce the number of steps by one or two steps to make it more efficient.

3. Working on the Solution
Instagram's New Feature

Problem Solving

I started the problem solving with fast sketches and the first thing was to figure out the position of the group icon ( if it needed one) and how to implemented within the current Instagram interface. I proposed a solution that was integrated with Instagram with the intention of being unintrusive yet obvious.

Challenges:

  • How to display groups in the home screen

  • Where to position the overlay when adding an account to a new group

  • Make a clear difference between saving a post and groups

  • Contextual navigation

  • Deciding weather or not to create an icon for groups

Instagram's New Feature

Wireframes

We decided to make a fast usability test on the position and look and feel of the group icon which was our biggest challenge. Aside from that we also tested menu overlays and all the new added functions and iterated our design based on the results.

4. Testing our Design Solution
Instagram's New Feature

Onboarding

For a more in depth usability test we decided to do a high fidelity test since our user are highly familiar with the app already. I designed a quick onboarding introduction to the new feature as a short video.

Results:

  • The onboarding screens was confusing and users didn't had the chance to play it back

  • We change the onboarding intro from an auto playback to a interactive step by step introduction

Instagram's New Feature

Adding an account

After changing the onboarding and making it interactive the percentage of missclicks was reduced to almost zero.

5. Prototype
Instagram's New Feature

Final Result

In the final prototype I had te responsibility to make sure the whole design was consistent with Instagram's branding guides, as a result of that the Grouping future blends in perfectly with the app.

Having the option of a custom feed would be helpful from the business side of Instagram in regards of creating more accurate adds and promote accounts that are more suited for the user.

Image alt tag

Onboarding

This was key to the user in order to understand the new future and embraced it with no issues.

Image alt tag

Adding an account to an existing group

We decided to embed the "add to group" action into the current "Save post" icon, based on our usability tests, it made sense to take advantage of what users were familiar with.

Image alt tag

Creating a new group

Same as "adding a group" we used instagrams plus icon, an icon already known by the user.

Image alt tag

Viewing groups

This was the most challenging part of the project. We decided to go for an icon next to the creating a new post. The usability test showed us this was the best position for the grouping future.

Image alt tag

Searching within groups

One of the user frustrations was on searching for accounts the user already followed, so we added the option of searching within groups already made, this way the chances of finding an account increased dramatically.

Image alt tag

Managing groups

Big discussion and challenging time when it came to where to manage groups, thanks to the sitemap and user flows previously done, the solution was again added to what the user is already familiar with, creating consistency .

Image alt tag

Contextual Navigation

Final iterations of our design solutions was adding a contextual navigations, which gave the user a clear understanding of where it was standing and how it got there.

Image alt tag

Knowing in what group is the account in

This was one of the final changes we made to our design, thanks to our users feedback, we added on the about account a clear and subtle message staying in what group the account was part of.

Final Thoughts

What did I learned?

Adding an MVP to an existing app is very challenging, I enjoyed the problem solving part of the project, creating spaces where it seems theres no room for was interesting and making it possible very satisfying. Having the constrain of being consistent with Instagram's brand guide helped to focused more on the UX part of the project rather than spend time on the UI even though it some parts was challenging.

What can I improve?

There's space form improvement always, in the future I would like add the option of adding an account to multiple accounts and in general see if this future will be an actual instagram future one day.