Templates.
UI/UX REDESIGN
How can UX design enhance the partnership between supply-side platforms (SSPs) and publishers in native advertising?
This case study details the development of a unified Template UI tool that streamlined native advertisement template management, improving efficiency and user experience by consolidating three separate tools into one cohesive platform.
ROLE
Senior UX Designer
LOCATION
REMOTE
DATE
2023
BRIEF
Streamline native placement template creation and management.
CLIENT
TripleLift is a leading native advertising and programmatic solutions company. Their platform uses computer vision to seamlessly integrate ads into digital content across websites, mobile apps, and connected TV.
WHAT IS A TEMPLATE?
A template serves as a blueprint for native ads, designed to mirror a publisher's page style for a seamless user experience. Interaction designers craft these templates to naturally blend ads into the site's content, making them more engaging and less intrusive—ultimately enhancing their effectiveness.
Problem.
The Supply team were utilising three disparate tools for managing native advertisement templates, leading to inefficiencies and frequent errors.
Solution.
We developed a single, unified platform that serves as a centralised hub for all template-related tasks, from creation and editing to association and review, providing a seamless workflow that aligns with our users' needs and expectations.
Process.
Validate the Problem
Our initial step involved a comprehensive analysis of the existing system in collaboration with the product team. Through the development of user stories and journey maps, we were able to pinpoint key challenges.
Inadequate task flows for multiple template management
Presence of superfluous steps in user workflows
Insufficient error handling mechanisms
Inconsistency between aesthetic choices and design system
Process completion times are suboptimal
Lack of a cohesive and purposeful user interface layout
Research and Requirements
Based on these user insights, we established core requirements for the tool, including template creation and editing capabilities, association management features, data validation mechanisms, and robust error handling. These requirements formed the foundation for developing a user-centric solution that addressed the specific challenges faced by our diverse user base.
Prefers structured, step-by-step workflows
Focuses on one task at a time
Requires clear, guided processes with minimal complexity
Primarily concerned with overall workflow efficiency and error reduction
Prefers consolidated information on a single screen
Comfortable handling multiple pieces of information simultaneously
Prefers flexible, feature-rich UIs
Focused on creative aspects and technical details of template design
Design and Prototyping
After mapping each use case, I created wireframes that incorporated TripleLift's basic Tailwind CSS style guide—the precursor to their official design system. For more details on the development of the design system, refer to the Diagnostics case study.
USE CASE
WIREFRAME
PROTOTYPE
Associate Workflow Prototype
Results and Refinement
The final design featured a navigation panel for easy feature access, tabs for switching between workflows, a central workspace for task execution, and an action panel with global controls. The Edit workflow incorporated inputs and a code editor responsive to designers' workspace preferences. We paid special attention to the Association Workflow, implementing step-by-step guidance and real-time error handling to prevent costly mistakes.
Usability Testing Metrics
Task Completion
85%
+15%
Error Rate
3%
-12%
User Satisfaction
8/10
+4.5
As we look to the future, the Template UI tool will continue to evolve with our newly adopted design system. This integration ensures consistency across all our digital products, further enhancing user experience and efficiency. The updated interface now incorporates our standardised color palette, typography, and interactive elements, creating a more cohesive and intuitive user journey.
Learnings
How can UX design enhance the partnership between supply-side platforms (SSPs) and publishers in native advertising?
By streamlining daily workflows, enhancing core-product management, and reducing errors, this innovative UI not only improved internal efficiency but also serves as a prime example of how strategic UX design, coupled with a robust design system, can drive innovation, enhance partnerships, and ultimately contribute to the success of both SSPs and publishers in an ever-evolving digital landscape.