Demographic targeting helps advertisers target the right audience. Advertising based on certain demographics reduces unnecessary impressions and saves budget by only showing ads to people who will be interested.
Demographic is a new addition to the interest feature. I needed to find a scalable solution for implementation while not affecting too much the component as I didn’t want to disorient the users.
The data in the attributes section provided by a 3rd-party vendor is available for an extra fee from the user. To clarify the fee requirement (and not to shout it out loud) I added the cart icon next to the title and highlighted the price per click on the description popup.
I designed the descriptive popup with a fixed height in order to make the categories browsing easier and keep the data on the same position.
While observing users playing with my prototype, I noticed that although there’s a selection limitation of 20 categories (due to system limitations), the users want to select more and then eliminate the excesses ones. I decided to keep the limitation as a warning but removed the limitation so users can select as many categories as they wish, and then remove the extras. To be sure about this decision I used a code snippet on this CTA to measure the usage. The reports showed that there is a big usage of this flow and although it includes an error, users understand and fix it and eventually save their changes.
The selected categories list was originally formed underneath the search box, but it caused the user not to be able to see his already made selection while browsing for new categories. I decided to bring it on top of the search box and made the categories results linkable so the user will be able to navigate with ease. On the way, I removed redundant text to make it more clear and clean (see the before & after slider).
A problem which arose from the user tests dealt with how to let the user browse all the categories within the 2 tabs (interests and attributes) and search for specific categories. I decided to present the tabs to the user when clicking on the search box and to hide them while typing. When the user knows what he wants he can start typing and the tabs are replaced with the search results. There is an indication on the right if the category is interest or attribute and while hovering over the results the description is shown again, as a fixed height popup.