Our research uncovered two main pain points:
Pain point #1: Ad groups were hard to find on the edit settings page
- Campaigns with a large number of ad groups created a very long page that users had to scroll excessively to use.
To solve for this, I redesigned the information architecture of the page to move away from a single column layout in order to separate the ad group edit form from the list of ad groups. I introduced a left navigation column that contained a list of ad group cards with key performance indicators as informed by our research. When a user clicked one of the cards, the edit form for that particular ad group opened in the right panel of the screen.
Moving from a single column to a two column layout made it much easier for users to quickly view and edit their ad groups.
Discovery
The goal of this project was to make it easier for users to view and edit their campaigns and ad groups within the platform.
In the previous experience, editing an ad group was done from an overall campaign rollup view, and when a user edited one ad group, the card expanded on the page into the form which was comprised of multiple cards.
If a user had 10 ad groups, for example, it resulted in what felt like endless scrolling.
Goals
How might we make it easier for users to view and edit their campaigns and ad groups in the platform?
The Challenge
Choozle is a SaaS company that enables businesses to run programmatic campaigns using its platform. The product integrates with demand-side platforms (DSPs) such as The Trade Desk and Amazon Ads in order to distill their vast advertising offerings into a curated and simplified experience for maximum campaign performance.
Our product team received feedback from users and account managers that revealed opportunities to improve the experience of editing campaigns and ad groups within the platform.
During 2022-2023, I was the sole product designer responsible for the end-to-end design process from conception to final deliverables. My role included the following responsibilities: conducting interviews, user research, competitive analysis, wireframing, information architecture, prototyping, visual design, usability testing, design QA prior to release, and design iteration. I worked cross-functionally with a product manager and our front-end engineering team to bring the project to life.
Overview
Campaign and Ad Group Edit Flow
Design Decisions
Users shared that "the new navigation makes it significantly easier to select and work within an ad group when optimizing a campaign." One user said, "it saves us a few seconds on each update but those seconds really add up over time." Another user said, "I don't have to scroll all the way down to try and find the ad group I'm looking for—that's super nice."
Overall, the feedback confirmed that our solution improved the ad group edit experience for users.
Tradeoffs and considerations
When we began the project, I designed both desktop and mobile flows; however our very small engineering team only had the resources to be able to continue to invest in our web application development. Therefore, we moved forward with a web-only experience.
The next steps for this project would involve conducting additional research on user preferred ad group sort order, and continuing to build the mobile experience. Further design iterations to the form experience have yet to be released, so when those have been released we would gather additional feedback on those improvements and continue the design process.
Results, Reflections, & Next Steps
^ BACK TO TOP
- Comparison metric on performance graph - We added a second axis to the graph to allow users to compare the performance of two metrics when optimizing ad groups.
The new campaign and ad group edit experience will save users time by allowing them to manage their campaigns with minimal clicks and scrolling.
User Feedback and Design Iterations
- Users mentioned they desired the ability to reference their campaign settings and ad group performance metrics from within the edit workflow in order to make optimizations to their ad groups based on performance data.
Performance data was displayed on other pages of the app, requiring users to:
1. navigate back and forth,
and
2. remember the performance metrics when optimizing campaigns and ad groups.
This burdened users with navigation issues as well as cognitive load, increasing the time required to complete the core task of optimizing campaigns.
In the design, we solved for this by introducing a performance graph on the page above the edit form.
In order to maximize the amount of available space on the page for the form, I designed the graph to be collapsible.
- The previous ad group form header was green. I updated it to a neutral gray within Choozle's design system. Part of my design philosophy is to use color intentionally, and when it comes to enterprise interfaces especially, color should primarily serve as a call-to-action. This change also improved the form's readability for users, as the previous green background color with white text did not pass web content accessibility guidelines (WCAG).
- I incorporated a vertical action menu in the ad group cards in the left column. Choozle used material ui components, and during our usability tests we validated that users understood this common design pattern and were able to access additional actions from within each ad group card.
Hi-fidelity Designs
- I redesigned the ad group card summary view so that the ad group cards were able to be collapsed. I also added bulk controls ("Expand/Collapse all") so that users could easily control the display of ad groups on the page.
One user shared, "I don't have to scroll all the way down to try and find the ad group I'm looking for—that's super nice."
- Ad group count - Displaying the ad group count reduced cognitive load allowing users to view the number of ad groups within a campaign at a glance
- Archived ad group section - We moved the archived ad groups into their own section, giving users control over whether to show or hide them.
