Answers where categorized as 1 being the least and 7 being the most helpful
Diego Vanegas
UX Designer
Adding an MVP
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
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.
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.
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
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.
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.
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
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
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
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
Adding an account
After changing the onboarding and making it interactive the percentage of missclicks was reduced to almost zero.
5. Prototype
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.
Onboarding
This was key to the user in order to understand the new future and embraced it with no issues.
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.
Creating a new group
Same as "adding a group" we used instagrams plus icon, an icon already known by the user.
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.
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.
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 .
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.
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.