New Ad Templates & Selection Page
(Composer Ad Builder)
New Ad Templates & Selection Page
(Composer Ad Builder)
With Composer’s new strategy, the team decided to refresh the design of our ad templates. This update also included a redesigned UX/UI for the template selection screen. The following outlines the work completed for both the new template designs and the updated user interface.
Type
Type
Type
Self Service Web App
Self Service Web App
Self Service Web App
Employer
Employer
Employer
Kargo
Kargo
Kargo
Role
Role
Role
Product Design Lead
Product Design Lead
Product Design Lead
Timeline
Timeline
Timeline
Jan 2025 - Present
Jan 2025 - Present
Jan 2025 - Present
Who is the user?
Retail Media Agencies, Small-Mid Size Media Agencies
Who is the user?
Retail Media Agencies, Small-Mid Size Media Agencies
Who is the user?
Retail Media Agencies, Small-Mid Size Media Agencies
What was their primary goal?
What was their primary goal?
What was their primary goal?
Who was on the team?
Who was on the team?
Who was on the team?
Where did we start?
Where did we start?
Where did we start?
What challenges/constraints were we working with?
What challenges/constraints were we working with?
What challenges/constraints were we working with?
“As a Kargo advertiser client, I would like high quality, performant templates that I can build easily within Composer so that I can quickly activate my campaign."
John Smith
“As a Kargo advertiser client, I would like high quality, performant templates that I can build easily within Composer so that I can quickly activate my campaign."
John Smith
“As a Kargo advertiser client, I would like high quality, performant templates that I can build easily within Composer so that I can quickly activate my campaign."
John Smith
Secondary Research
I collaborated with the Product Manager to analyze reports on Kargo's top-performing ad templates, using those insights to inform our new template design decisions.
Competitive Analysis
I explored competitor templates and UI examples to help guide how I could more effectively position our new designs.
Secondary Research
I collaborated with the Product Manager to analyze reports on Kargo's top-performing ad templates, using those insights to inform our new template design decisions.
Competitive Analysis
I explored competitor templates and UI examples to help guide how I could more effectively position our new designs.
Secondary Research
I collaborated with the Product Manager to analyze reports on Kargo's top-performing ad templates, using those insights to inform our new template design decisions.
Competitive Analysis
I explored competitor templates and UI examples to help guide how I could more effectively position our new designs.
Secondary Research
I collaborated with the Product Manager to analyze reports on Kargo's top-performing ad templates, using those insights to inform our new template design decisions.
Competitive Analysis
I explored competitor templates and UI examples to help guide how I could more effectively position our new designs.
Secondary Research
I collaborated with the Product Manager to analyze reports on Kargo's top-performing ad templates, using those insights to inform our new template design decisions.
Competitive Analysis
I explored competitor templates and UI examples to help guide how I could more effectively position our new designs.
Secondary Research
I collaborated with the Product Manager to analyze reports on Kargo's top-performing ad templates, using those insights to inform our new template design decisions.
Competitive Analysis
I explored competitor templates and UI examples to help guide how I could more effectively position our new designs.
Secondary Research
I collaborated with the Product Manager to analyze reports on Kargo's top-performing ad templates, using those insights to inform our new template design decisions.
Competitive Analysis
I explored competitor templates and UI examples to help guide how I could more effectively position our new designs.
Secondary Research
I collaborated with the Product Manager to analyze reports on Kargo's top-performing ad templates, using those insights to inform our new template design decisions.
Competitive Analysis
I explored competitor templates and UI examples to help guide how I could more effectively position our new designs.
Previous Design
Key Takeaways
1. The adhesive units and our in-article Venti unit achieved the highest performance.
1. The adhesive units and our in-article Venti unit achieved the highest performance.
1. The adhesive units and our in-article Venti unit achieved the highest performance.
2. Instagram and Facebook banners were the most popular social templates.
2. Instagram and Facebook banners were the most popular social templates.
2. Instagram and Facebook banners were the most popular social templates.
3. Our competitors separated the creative management experience from the creative building process.
3. Our competitors separated the creative management experience from the creative building process.
3. Our competitors separated the creative management experience from the creative building process.
4. Our competitors used grouping and filtering to simplify their selection pages and reduce visual clutter.
4. Our competitors used grouping and filtering to simplify their selection pages and reduce visual clutter.
4. Our competitors used grouping and filtering to simplify their selection pages and reduce visual clutter.
5. Unlike us, competitors showcased real, colorful visuals of their templates during the selection process rather than using icons or grayscale imagery.
5. Unlike us, competitors showcased real, colorful visuals of their templates during the selection process rather than using icons or grayscale imagery.
5. Unlike us, competitors showcased real, colorful visuals of their templates during the selection process rather than using icons or grayscale imagery.
Design Exploration (Ad Templates)
Design Exploration (Selection Page UI)
Stakeholder Feedback
"We should make full use of the available ad format space to enhance engagement and increase click-through rates." - VP of Ad Design
"We should make full use of the available ad format space to enhance engagement and increase click-through rates." - VP of Ad Design
"We should make full use of the available ad format space to enhance engagement and increase click-through rates." - VP of Ad Design
"On the selection page, let’s add a background image to the cards to help the ad templates stand out more." - VP of Ad Design
"On the selection page, let’s add a background image to the cards to help the ad templates stand out more." - VP of Ad Design
"On the selection page, let’s add a background image to the cards to help the ad templates stand out more." - VP of Ad Design
"Where possible, let's ensure all units are compatible with both mobile and desktop formats." - Product Manager
"Where possible, let's ensure all units are compatible with both mobile and desktop formats." - Product Manager
"Where possible, let's ensure all units are compatible with both mobile and desktop formats." - Product Manager
"We can eliminate the initial split screen that separates the selection process into Display, Video, and CTV categories since we are keeping our multi-select feature." - Product Manager
"We can eliminate the initial split screen that separates the selection process into Display, Video, and CTV categories since we are keeping our multi-select feature." - Product Manager
"We can eliminate the initial split screen that separates the selection process into Display, Video, and CTV categories since we are keeping our multi-select feature." - Product Manager
"Let's just priortize our Instagram and Facebook Echo templates first before we design any other social units." - Product Manager
"Let's just priortize our Instagram and Facebook Echo templates first before we design any other social units." - Product Manager
"Let's just priortize our Instagram and Facebook Echo templates first before we design any other social units." - Product Manager
"Due to the current page architecture, we are unable to implement the overlaid selection page effect that you had envisioned. Let's put this on hold for now until we have more bandwidth later on to explore this." - Engineering Lead
"Due to the current page architecture, we are unable to implement the overlaid selection page effect that you had envisioned. Let's put this on hold for now until we have more bandwidth later on to explore this." - Engineering Lead
"Due to the current page architecture, we are unable to implement the overlaid selection page effect that you had envisioned. Let's put this on hold for now until we have more bandwidth later on to explore this." - Engineering Lead
Backsplash
Collapsible Backsplash
Collapsible Card
Cornerstone
Instagram Echo
Facebook Echo
Instagram Echo (Home Depot Version)
Selecting and Building New Templates
Business & User Outcomes
1. Launched 6 new ad templates for client use.
1. Launched 6 new ad templates for client use.
1. Launched 6 new ad templates for client use.
2. Introduced desktop ad templates to users for the first time, with four of the new templates designed for desktop compatibility.
2. Introduced desktop ad templates to users for the first time, with four of the new templates designed for desktop compatibility.
2. Introduced desktop ad templates to users for the first time, with four of the new templates designed for desktop compatibility.
3. The updated selection page UI helped guide our new product direction toward a cross-channel approach spanning Display, Video, and CTV.
3. The updated selection page UI helped guide our new product direction toward a cross-channel approach spanning Display, Video, and CTV.
3. The updated selection page UI helped guide our new product direction toward a cross-channel approach spanning Display, Video, and CTV.
4. Successfully onboarded three new clients by leveraging the new templates and UI screens to support the sales process.
4. Successfully onboarded three new clients by leveraging the new templates and UI screens to support the sales process.
4. Successfully onboarded three new clients by leveraging the new templates and UI screens to support the sales process.