Adding a feature to an existing app: Adding a 'Search by' feature and a slide up viewport to see all saved and categorized items.
B2C, Social, Lead generation
Project Overview
About
Instagram is the 4th most used social app, and 2nd most downloaded app. Users post and share images and videos, peruse for inspiration, ideas, learning, advice, and current trends.
The Problem
Instagram offers valuable information on news, travel, work, fitness, investing, etc. Users can view this information or save it and come back to it at a later time.
​
The problem is that many users do not come back to their saved posts. The way categories are displayed right now a bottom, side-scrolling carousel with a small viewport making it a tedious process should a user have many saved categories they'd have to sort through.
Others do not know they can save posts.
The Goal
To add feature a way that could make it easy to search and sort through this valuable saved information in an efficient manner without increasing the number of steps by too many.
​
To remind and inform users of the saved feature and how they can use it.
My Impact
Adding a search by feature in the saved items and categories page, and a viewport pull-up to better see all the saved and categorized items.
For businesses, Instagram saves are a strong indicator that your content resonates with your audience, so finding a way to make this asset more desirable to the user would directly benefit these same businesses.
Research
User Research Study
Because Instagram is so commonly used I wanted to
understand how users engaged with the app and how
frequently.
I started with a google survey with random participants.
​
7 users took part in a google survey, and all users stated they scroll Instagram for updates
during the day, viewing posts and stories, browsing and searching for specific things.
Demographic
Male: 1 / Female: 6 / Age: 28 - 36 years


What users liked about the saved feature: ​
-
86% of users said they liked that they could sort and saved items to come back to.
What users disliked about the saved feature: ​
-
Users mentioned there was no shortcut, felt like they were going out of their way to get to it,
low-level organization, would like to see a search feature.
If users could change or improve the saved feature, they would:
-
"Find a way to make it more exciting to save posts."
-
"Easier to navigate to saved categories, similar to a Pinterest board in Instagram."
-
"Remove the shop icon on the menu bar and add a saved icon to be able to find items
they’ve saved easily" -
"Add a search feature."
-
"Add a scroll up/down feature on the categories page."
-
"Probably, I would make it closer to what Spotify has. I think they have perfect organization."

Competive Analysis & Market Research
Looking at other social apps with the option to save items such as
songs, videos, images, or posts (Facebook), each one had a save
option. Some are visible on the same screen with an icon, while others are hidden behind the profile or hamburger button.

Define
User Study & Persona
Looking at the surveyed users, I wanted to understand what
motivated users to check instagram daily/with the frequency
that they did.
​
All users stated they scroll instagram for a period of time during the day generally to view posts and stories by their friends and accounts they follow, to search for specific things and to see
what’s new and trending.
​
I created the persona below to reflect a user who s keen to
know what's new and trending by using creative social platforms.

Design
Design objectives
User Flow
Because Instagram is already an established business, I skipped
the user, business, and technical goals, and focused on the re-design and focused on additions and suggestions that came from the users.
With the addition of the new assets, the user flow shown here
reflects the user taking the normal route of saving a post with the
option of creating a category, but now with the option to use the search bar or 'earch by features such as 'search by keyword' or 'search by hashtag'

Task Flow
The task flow here focuses on the user saving an item to
one of their many existing categories, but instead of manually
swiping across the narrow carousel viewport on the bottom of the page they can use the search bar or the search by feature to better
search for the desired category.
​
A second function of the search by options is if a user is
searching for a specific saved post, but they can't remember
the handle or date by which they saved the item, they can use the search by options to help narrow it down and find the item.

UI Kit
According to Instagram.com their typeface is Instagram Sans.
I found and downloaded the free font.
​
The UI Kit is rather simple and straightforward, as the branding already existed.

Wireframe sketches
Adding the search bar and
options to search by.

Progression from saving post to pull-up viewport to view all categories.

Close up of what the 'search by date' feature would look like

What expansion of the search by option would look like with options like chronologically, A-Z, most recent, etc.

Low Fi Wireframes
The flow here shows the user using the 'Sort by' feature to sift through their saved categories to find an item in 'Most recent.' This would bring to the top only categories with the most recent saves.

Same flow here, but with the option to sort by 'A-Z'

Search Bar expansion - from icon to search bar - for the user to type
.jpg)
Test
High fidelity wireframes and Prototype

I carried out hybrid interviews of the visual UI
and google surveys of the prototype testing.
6 users took part in visual UI feedback
8 users took part in prototype testing
​
One thing that I found interesting was that after carrying out the initial survey of how the saved feature could be improved, and many users suggesting a search feature, a majority of users during testing said that they utilized the sort feature more than that of the search.
​
Testing and Iterations
-
Which flow did you use - The search bar option, or the sort by option?
- "I choose the search option to find the "More Ux Ideas"
- "I only used the sort flow"
- "I think the Sort by was the easiest. Just because I felt like it caught my
eye before everything else did (I didn't even realize the search button
was available at first."
- "Probably the sort by feature."
- "I liked the first flow where you could sort & click."
- "I used the sort by A to Z after pulling up the save categories."
- "Sorting by date"
- "Definitely like the sort by function but I would like labels to let me know
which sort i had selected (ie z-a or a-z)"
88% of users chose the option to sort by
Original
Iterations
1st round of iterations
The search icon was getting missed and users didn't know what would happen when they clicked it, if it led them somewhere else, or if it simply expanded.


I added the search bar along with
the icon to reduce the extra step of clicking and expanding.
2nd round of iterations
Because the option to sort
by date was not favoured by
many users, I removed it and added a sort by option of 'recent' in place.
Since this was now gone, I asked users a second time if they liked having a drop down menu to choose from or a top navigation option.


Winner!
In an unmoderated survey, 11 out of 15
users preferred the top navigation option
over the drop down menu.
Users said that it made for less steps, and cleaner UI.
Final round of iterations


Final Iteration

I refined the search bar
and buttons to mimic the UI that Instagram has.
1. I had focused more on finding a way to make the
save an item feature more organized and to find ways
to sort items that users would use the most within
the small screen space that Instagram offers, and on the
other hand not spending much time on finding a way to
draw attention to the saved icon for users that didn't already
know about it.
Reflections
Next Steps
There was ideation that came about when putting together the flows and ways that the app could be even more appealing to users, some of which included:
1. Create a subtle reminder, or pop up to remind the user they can save an item or music with the save icon.
This reminder more than likely would only happen when the user is not on their familiar feed, but rather exploring Instagram or after selecting an info post for example.

.png)