Instagram with a tweak
General Assembly UXDI Project I Adding a feature to an existing mobile app
The Project:
For this project, we were asked to create a new feature for an existing app. We designed the "Categories" feature for Instagram. With this new feature, the user can group their followings into categories and divide their feed into smaller and refined feeds.
Role: UX/UI Designer and Researcher in a team of 3
Duration: 2 weeks
Skills: User Research, User Flows, Sketching, Wireframes, Prototyping, Usability Testing
Tools: Figma, Miro
The Final Product
Wire Flows
The app starts with an onboarding session. We inform the user about the new feature and give some examples to the ways they can use this feature.
Since the user has no categories yet, the first thing they need to do is to create one. While they are creating a new category, the user has the option to show or hide that category in the main navigation tab.
After the user named the category, the next step is to choose which accounts to add under that category. The Sort By menu has a "Suggested" option which will display related accounts at top.
Once the user created categories, they can access them from the Categories tab. Tapping a category button displays that category's feed. Home button takes the user back to their normal feed.
From the category's pop-up menu the user can toggle the visibility of the category, rename or delete the category, edit the content of the category or share the category with a friend.
The See All button displays all the categories that are created including the hidden ones. In the Categories page, the user can sort their categories, create new ones or navigate to a category. The thumbnails display the latest posts in that category.
The category list is also accessible from the followings page. From here the user can also see the category's content and make adjustments like adding or removing profiles.
When following a new profile, the user can assign a category to that profile from the drop down panel. They can also access a certain profile's category info from that panel and make changes.
Case Study
Coming up with a new feature
How Instagram feed works?
As described in Instagram’s help page; Instagram's technology uses different ways, or signals, to determine the order of posts in your feed. These signals are used to help determine how your feed is ordered, and may include: likelihood you’ll be interested in the content, date the post was shared and previous interactions with the person posting.
Possible area of improvement
Besides Instagram's algorithm the user has no control over the order or the content of their feed.
Our Hypothesis
As the users’ following numbers grow or the profiles they follow gets more diverse they would benefit from dividing their feed into smaller and more dedicated ones.
User Research
We began our research by conducting 10 user interviews. Our goal was to get a better understanding of why and how the users use Instagram and to determine whether or not they would benefit from categorizing their feed.
Using affinity mapping method, these interviews allowed us to determine the followings:
• The most common reasons to use Instagram were, to stay connected with friends/family, and to get inspiration/information about areas of interest
• The users were on Instagram for a long time and their following numbers built up
• As the users follow more and more profiles, they find it hard to catch up with all the information
• They either try to limit the number of followings or check frequently to catch up
• Even though the reasons vary the users would benefit and use the categorization feature
Personas
By synthesizing our research, we built two personas based on the commonalities among our users. We choose the persona who would benefit the most from the new feature as our primary one (Avery Russo).
Problem Statement
"Avery needs a way to efficiently categorize her followings by interest while viewing and accessing them whenever so that she can declutter her feed and stay updated with her followings"
Competitive analysis
Once we had a better idea of who we are designing for and what we are designing we performed an analysis among apps that use a categorization feature. We focused on the Pinterest, Youtube and Facebook apps. From that analysis we found out that categories were a part of main navigation and swipe & tap motion is used to switch between categories. Other functions that we found applicable were;
• Board layout
• Visibility toggle button
• Sort by feature
• Option to create boards
Design Studio
With our key takings from the comparative/competitive analysis we performed a design studio and selected the common design solutions to move forward to wireframing.
User Flows
Design studio allowed us to have a better understanding of how the user will navigate through categories. As we dig deeper into the design process new flows emerge. We added flows that include tasks like creating a new category, accessing all categories, modifying category content.
Prototype
Usability Testing
For the usability testing each member of our team conducted 2 tests. The primary tasks that we tested were;
• Creating a new category
• Adding profiles to that category
• Using sorting features
• Assigning category to a profile
• Editing profiles in the category
Analysis: Overall, the Categories feature was well understood, intuitively used, and found useful by our users. Although all users were able to successfully complete tasks, some ambiguity was mentioned.
‣ 4 reported confusion regarding new Categories icon visual design
‣ 3 did not understand “See All” was an option to view and interact with
‣ 3 felt the “Done” button from adding Category on user profile was unnecessary
‣ 2 voiced that the sorting icon was misleading and unclear when editing or viewing category profiles
Iteration
Some of the users mentioned confusion about the Categories icon. We divided our onboarding screen into two separate screens. In the first screen we used the icon real big to form familiarity with the icon.
Another confusion mentioned was about the See All option in the Categories tab. Some of the users thought it was a list title so we changed it into a button form.
Our initial design for choosing a category of a newly followed profile had a Done button. After the usability testing we decided that the button was redundant and the option to choose a category should be a permanent option.
Our sorting buttons were found misleading in the usability tests. Some of the users thought the button would take immediate action rather that opening a pop-up menu. We decided to use a different icon design that is more associated with options.
