top of page

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
Screen Shot 2019-02-10 at 3.52.46 PM.png

Past Project

Top of Page

Next Project

bottom of page