Past Project

SEARCH OVERHAUL

Next Project

macbook pro_5x.png
noun_clipboard_538260_1A1A1A_5x.png

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.

noun_construction worker_1197768_1A1A1A_

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.

noun_tools_1848754_1A1A1A_5x.png

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. 

d047e9a4-7ea3-4960-90b9-6d1ef38ab05c_rw_

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.

2ac3fc7f-e105-41e6-8794-6aed3db08874_rw_

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.

6d66ce5d-2052-41cc-b1e2-b416af534a9b_rw_
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. 

3c240939-1d65-4782-a6b3-9554d0d5a7ab_rw_
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.

39823e6b-0deb-4f9c-8a6b-2ba0dca60191_rw_
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.

2484a28d-0f4c-4132-8c7c-e4bd13af5fda_rw_
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. 

Screen Shot 2019-02-10 at 3.54.09 PM.png

Past Project

Top of Page

Next Project