top of page

Instagram

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

Timeline: 4 weeks 

Role: Product Designer

UI Design

UX Design  

Research  

​

​

Tools:

Figma

Whimsical 

FigJam

Google surveys

​

iPhone 13 Mockup (1).png
iPhone 13 Mockup.png
iPhone 13 Mockup.png

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

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 

How users interacted with the saved feature
How often users used the saved feature

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

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

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'

User flow

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

Test

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. 

Save an item - alpabetically arranged.jpg

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.

Group 52.jpg
Group 53.jpg

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

Instagram

IMG_8326.jpg
IMG_8327.PNG

Final Iteration

Group 53.jpg

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. 


 

Vector 1 (1).png
1384014.png
3178158.png

© 2023 Alexa Bourne
 

bottom of page