Manage Negative Keywords for Ad Campaigns
What did I contribute?
I delivered this project during my product design internship at CommerceIQ.
My responsibilities included creating robust user flows, designing wireframes, ensuring cohesive visual design, and creating a development ready high-fidelity prototype.
I collaborated with the product and engineering teams to meet requirements, validate ideas, and gather feedback.
What was the project about?
CommerceIQ's e-commerce retail management platform provides the ability to create and manage ad campaigns on various e-retailers in the US like Amazon, Walmart, Target, Instacart, etc.
One aspect of managing an ad campaign is managing negative keywords. To put it in simple words, negative keywords are basically words for which you do not want your product to be promoted. Read more about negative keywords here.
In this project, I have redesigned the negative keywords management flow such that it reduces user errors and task completion time.
This is the existing flow
Imagine that the user wants to add the word "chocolate" to the list of negative keywords. They select the ad group and this is what they see.
1. They can enter a list of words, 1000 maximum, separated by new line.
2. They can select the match type - broad or exact match.
3. Get a preview of words that are going to be added.
4. Apply changes.
But wait... there are some issues with that
There are two problems with the existing workflow -
1. No support for viewing existing negative keywords.
Currently, user cannot view existing keywords. So if they are trying to add the word chocolate, they don't know whether this already exists or not. Though adding it again won't likely be disastrous but knowing that it already exists can help save the double work.
Secondly, if they don't know what exists then how they remove unnecessary words from the list? Clearly, there is no support for this action.
2. Bulk actions are not supported.
Adding negative keywords happens at ad group level and there can be multiple ad groups under a single ad campaign. In the current flow, if we want to add the word "chocolate" to 5 such ad groups then we can only do that individually because bulk actions are not supported. Now imagine there are 10 such ad groups. That's will need a lot of time in a repetitive meaningless task.
Initial thoughts
First solution was inspired by the thought that we can integrate the "view" and "delete" actions in the existing layout.
You can see that the layout looks similar to the existing one but with added features.
Feedback
The list of keywords is not scalable
Firstly, it involves both horizontal and vertical scrolling which is not a smooth experience. Considering the worst case scenario that the user selects 50+ rows and each row has 100+ words then the information becomes too overwhelming for the user.
Repetition of words causes information overload
The layout was designed in such a way that even if there are common words among different ad groups, they are shown separately. This creates a lot of unnecessary repetition of words which is not desired by the user.
Iteration on first feedback
Pivoted view of keywords
To avoid this repetition, I decided to keep the "Add" flow as it is and pivot the list view on keywords. Now, instead of an expanded widget, there would be a side drawer, the number associated with every word would indicate how many selected items it's a part of.
The new design was helpful in reducing the information overload. It also helped in solving the problem of vertical and horizontal scroll.
Feedback
Having two separate layouts for "Add" and "Remove" is not an ideal user experience
Having the expanded widget for adding and a side panel for removing keywords did not provide a consistent experience. Add and remove are two similar actions on the same item, i.e. keyword list. Hence they should be part of same flow.
Too much whitespace in the list view
This layout for keywords did not optimally utilize the white space especially when the rest of the dashboard is very information heavy. If the list scales to 100 words then it would take a long scroll to browse through the list.
Second iteration
More compact design with integrated experience for adding and removing words
In this iteration, I combined both the experiences and optimized the white space. Have taken into consideration following decisions while designing this layout.
1. Reducing interaction cost
When it came to deleting multiple words from the list, one option was to make the user first select words and then delete. Instead, I chose to keep it one click delete. Two reasons - number of clicks are less and most of the use cases are for deleting a couple of keywords at a time.
2. Choice of colors
I chose two complementary colors to make it easy to distinguish between two types of words. The colors have minimum contrast of 4.5 to adhere with WCAG 2.2 guidelines for accessibility. They align well with the existing dashboard theme and are not over-emphasising the match types.
3. The order of words in the list
My options were chronological, alphabetical, or descending order of frequency. Descending order of frequency makes most sense when multiple rows are selected, giving the user an idea about relative occurrence of words.
Design alternatives for list of keywords
The final prototype
Key takeaways
Design System and Auto-layout are crucial to iterating quickly
I delivered this project in a span of two weeks. And this is the usual timeline of task delivery in startups, things move fast and the deadline is always "as soon as possible". I was able to hand it off in time because I could quickly incorporate all the changes that came up in feedback. And this was possible only because I used atomic design approach for building components and extensively used auto-layout for organizing layers. Helped me improve the efficiency significantly.
It's important that the new designs integrate well with existing product experience
It can be tempting to experiment when designing new features, whether its visual design or tweaking element interactions. However, what matters the most for the user is a consistent product experience. Sometimes, this may require us to opt for the second best design that we have come up with but that's okay.