Past Project

SEARCH OVERHAUL

Next Project

SUMMARY

By overhauling a search results page and introducing new ways to search, I crafted an update for Snapchat's ad review tool to optimize for efficiency and scale.

ROLE + TEAM

I was the sole designer for this project, but I interfaced with product and engineering teams regularly to ideate features and ship this product.

TOOLS USED

  • Sketch

  • InVision

  • Quip

  • JIRA

PLANNING

WHITE BOARDING

The user research aspect of this project was addressed in team meetings and with the product manager due to past experiences and KPI's.

To begin contextualizing these goals in terms of design, I drew a rough sketch of what types of search patterns I wanted to leverage. 

DESIGN PROCESS

USER FLOW

I paid special attention to the userflow in this project, because I wanted to be sure that a fancier search wasn't adding more steps to the process. 

This feature would really shine in specific searches, but I wanted to ensure that it wouldn't burden the many people who wouldn't need to search so specifically.

UI ELEMENTS

After designing the user flow, I created mockups in Sketch to fully visualize the updated search process. I had to include individual elements here as I'm not able to share images of the full tool.

SPECIFIED SEARCH

To specify results right off the bat, I added a feature to categorize the search term to the original field.

VERTICAL DRAG AND DROP

Through a vertical drag and drop, users are able to select and organize the columns most pertinent to their search. I chose a vertical orientation as opposed to a horizontal one, so users avoid dragging the columns across the screen. 

Previously, the columns weren't able to be changed and lacked important fields, and leadership requested this update to help them customize results. 

MULTI PARAMETER SEARCH

On the search results page, users can add additional search parameters to support very detailed searches. 

I added this feature to quickly find sensitive content, which was a problem the previous version didn't address.

BULK ACTION

Before this initiative, a dropdown menu to specify the number of search results housed the bulk action menu, which was a bit confusing. 

For clarity, I separated out the bulk action menu to stand individually and then eliminated the number of search results field entirely by implementing an infinite scroll.

THUMBNAILS

I added a thumbnail column here to allow a quick glance at the ad creative by hovering over the camera icon. This helped agents quickly identify whether or not it was the ad they were looking for.

 

I also added an "expand all" option next to the column header for people who were more visually inclined. 

Past Project

Top of Page

Next Project