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.
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.
How often do you search photos on Instagram?
Participants' experience on Instagram search.
Goals for searching photos are:
The tag filter feature should be added in
2. Define Problem & Propose Solution
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.
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
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.
Tim opens Instagram and searches ‘#fimphotography’ and ‘#landscape.’
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.
Tim updates the Instagram app and finds out that Instagram added a tag filter feature on the app.
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.
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.