Summer 2019 Internship
Role: Product Designer - Ads Business Platform
Skills: Interaction Design, Interdisciplinary Design, User Research, Workplace Communication
Tools: Proton, Sketch, Origami
Summary
In 2019, Facebook Design began migrating its designs to the new design system intended to be rolled out in late 2020. The Ads Team at Facebook used the redesign as an opportunity to solve some of the design-related issues and unify the approaches that design teams have used for our core feature set.
The first redesign project that I completed was a new iteration of the location selection tool, referred to as Geotargeting.
The second redesign project was a unification of the different search patterns that we used throughout targeting.
The primary goal of these redesigns was to improve the discoverability of the more powerful features that targeting offered for inexperienced advertisers while reducing friction for experienced brands.
Geotargeting Redesign 🌎
Previous Design
Advertiser feedback described the old geotargeting experience as having a clumsy selection flow and cluttered view of selected locations. And for smaller advertisers, the unintuitive selection options led to lower than expected advertisement reach. From a design perspective, many of the important features had low discoverability and less use as a consequence.
A few of the issues surrounding clutter and low discoverability are on display here. 1. Map drop-down toggle has low visibility but is very important. 2. Presenter uses cluttered organization. For example, Brazil is shown twice in the selection presenter. 3. Also, it is common for selections to be overwritten due to the back-end grouping of locations.
New Design
The redesign of the geotargeting element focuses on keeping the same functionalities as similar as possible for more experienced advertisers. The improvements were made as direct solutions to advertiser feedback on the old design. The newest iteration of the design made the functionality of the exclusion less obscure by allowing advertisers to drop an exclusion pin on the map or select it in the search bar. Clutter is cut down by using hierarchy and combining similar settings options for individual selections. Additional improvements are made by the overall search redesign as part of my second project.
Improved visibility of some of the most important features. Exclusion can be done through the search bar, or by dropping a pin on the map. The map drop-down toggle is more visible to advertisers. And the presenter view is cleaner. Dedicated undo and redo buttons allow for a comfortable exploration of location selection. Most of the buttons are explained and less obscure.
Search Redesign 🔍
Previous Design
Each of the three targeting tool’s search experiences was very different in the old design system. When ported over to the new design system, the fragmented approach for search still required more fine tuning. Examples of the three unique designs are shown below. The redesign aimed to reduce the difficulty in adapting to three different search patterns for our advertisers and our designers.
Although each of the three tools shows different types of results, the search bars would benefit from more similar approaches and more intuitive and richer search results.
New Design
Considering the three unique types of search results that this unified approach needed to handle, I began exploring different layouts that could satisfy all three cases. Using some feedback from user testing, the design with minimal yet crucial information in the results pane with a pop-over for context proved to be the most intuitive for advertisers.
These images show the unified search approach for geotargeting and detailed targeting. The third image shows the pop-over for one of the detailed targeting results showing context about the car rentals interest. This pop-over shows more useful information than before, including an interest heat map, estimated audience size, and related interests for exploration.