Instagram
Tag Filter

UI/UX l 2020

Motivation

When I conducted user research for a travel planning app, I realized quite a few users often use Instagram to search for photos of places they want to visit to see what it’s like. Not only for travel, but also when they visit places in their local area, because Instagram has become a photo data bank, due to its massive amount of photo uploaders. It is a great benefit to have tons of photos to look at, but users soon face a dilemma. Many hashtags have over a million posts, but there is no way to filter searched posts yet. Users have to scroll through a million posts to find what they want to see. Instagram technically is not a photo searching app, but it has become like a photo data bank, and lots of users use it to search for photos to get information. It will improve users’ satisfaction with experience using the app, if it adds Tag Filter feature.

My Role

UI/UX Designer

Design Process

User Research - Define Problem & Propose Solution - User Persona & User Scenario - User Flow - Wireframe - User Testing - Interface Design

1. User Research

To investigate, whether users need a tag filter feature or not,

I carried out a survey, to see answers in percentages, to Instagram users, ages 25 - 34, because the age group of 25 - 34 has the largest share in the distribution of Instagram users, according to Statista. As a result of the survey, I was able to collect data and statistics on users’ thought processes and opinions.

Key Results

How often do you search photos on Instagram?

  • Never (7%)
  • Once a month (3%)
  • Once a week (21%)
  • Once a day (54%)
  • More (15%)

Participants' experience on Instagram search.

  • 67% of participants experienced frustration searching photos.
  • 84% of participants need a tag filter feature.

Goals for searching photos are:

  • To get information about certain places or products.
  • To get inspired by other people’s photos.
  • To see good photos.

The tag filter feature should be added in

2. Define Problem & Propose Solution

Problem Statement

There is no problem, when there are few searched posts, but when there are millions of searched posts, inconveniently users have to look through them one by one to find what they need.

Solution Statement

Add tag filter feature to Instagram, so users can search multiple hashtags in one search, conveniently to sort out searched posts.

3-1. User Persona

To walk in user’s shoes,

I made a user persona, based on the result of user research.

3-2. User Scenario

Trigger

Tim is a film photographer, whose specialty is in landscape photography. He wants to see other photographers’ photos in his field to see what and how others are photographing.

Action

Tim opens Instagram and searches ‘#fimphotography’ and ‘#landscape.’

Frustration

Tim wants to see landscape photos in film photography. When Tim searches ‘#fimphotography’ on Instagram, 23.4M posts show up, mostly portraits, and some still-lives and landscapes. Then, he searches ‘#landscape,’ and 144M posts show up, mostly in digital photography. Tim goes back to ‘#fimphotography’ posts, because it would be faster to scroll through 23.4M posts than 144M posts. He wishes he can search #landscape’ within his search result.
A few weeks later, there is an update on the Instagram app.

Solution

Tim updates the Instagram app and finds out that Instagram added a tag filter feature on the app.

Reward

Tim can search ‘#landscape,’ within the 23.4M posts of ‘#fimphotography’ on Instagram to see only landscape photos in film photography. He does not have to scroll through 23.4M posts anymore, skipping portraits and still-lives, just to see landscapes.

4. User Flow

To establish a pathway of the app,

I set a user flow. Step by step, how the users would progress to filter search posts.

5. Wireframe

To visualize the user flow,

I constructed wireframe, placing texts, buttons, image boxes, and other elements on the screen-ratio artboard. In this process, I could get a better sense of how each screen would look, and be able to use wireframe for user testing.

7. User Testing

To get feedback for the wireframe,

I conducted user testing with six of the user research participants. I guide them to search #filmphotography, then #landscape, using the tag filter. I asked for feedback and put them together. The feedback was mostly positive. All participants said it is very clear how it works, but two participants mentioned that it would be nice to have an option to save the filtered search for the future.

8. Interface Design

To infuse life to the wireframe,

I designed interface, on the basis of the existing Instagram app’s interface.

Struggle with placement of the tag filter button

Because Instagram’s search result page is already packed with elements and posts, I had to go through many triers and errors. It was tricky to minimize the change to the existing page and adding a visible tag filter button to the packed search result page at the same time.

A solution to placement of the tag filter button

Not every tag needs a filter feature. Some tags have so few posts that they don't need a filter. For that reason, I decided to go with the fourth option among four of my placement options. In addition, a notification is added to pops up when the number of searched posts exceed 1000, to attract users’ attention to the tag filter button and invite users to use it at the same time.

Design of tag filter feature

To make the new tag filter pages look consistent with existing app pages, I studied Instagram’s icon style, margins and paddings in between elements, sizes of texts, use of colors, sizes and colors of buttons, types of notifications, and many other design styles of Instagram, and apply them to tag filter pages.