Data Ads - Enhancing Efficiency with a Custom Design System by Ricardo Pinheiro

Data Ads - Enhancing Efficiency with a Custom Design System

Ricardo Pinheiro

Product Designer

Design Systems Specialist

UI Designer

Figma

Introduction

Data Ads is an advertising management platform designed to help agencies create, manage, and analyze ad campaigns across multiple channels. The platform was intended to streamline the entire process of campaign management, making it more efficient for media buyers, campaign managers, and creative teams.

During my work on this project, I was responsible for the end-to-end design process, creating an intuitive user interface that helped to boost workflow efficiency. The key focus was improving the overall user experience, from uploading and managing creative assets to managing budgets and automating repetitive tasks.

The problem

Inconsistencies in design and development are hindering the company's ability to streamline processes and deliver new products and ideas effectively.

Screenshot of the original Data Ads platform interface before customization features were implemented

Goals & Approach

Consistent experience across all devices

"The customer may drop off for a myriad of personal reasons and pick up on several devices at different times."¹ To ensure a predictable user experience, components should be highly consistent.

Modernise existing and upcoming design elements

Clarify component pages with usage examples and edge cases

Research & Discovery

In a agile startup nature, quick insights were essential. I conducted competitor analysis, researched admin interface best practices, used existing documentation, and collaborated with the product owner to shape major decisions for each concept screen.

Notes taken during user interviews and task analysis

Primary Research

I conducted a series of stakeholder interviews with campaign managers. The insights gathered revealed that the user base was diverse in their day-to-day tasks but had one unifying requirement: a need for speed and clarity in managing ad campaigns.

Secondary Research

In addition to user interviews, we performed a competitive analysis of similar tools in the market like Google Ads Manager and Facebook Ads Manager. We identified best practices and common pitfalls in the design of ad management platforms.

The research revealed that most tools had steep learning curves and were overly complex for day-to-day tasks. Data Ads needed to balance depth with simplicity, allowing for power users and beginners to manage campaigns without friction.

Typical component page setup

Visual Exploration & Iteration

Based on the research findings, I worked closely with the development team to establish the framework for the design system. With the structural decisions in place, I moved into the visual design phase. The goal was to create a UI that was not only functional but also visually engaging to foster stakeholder buy-in.

White label styling

During the development of Data Ads, we implemented a visual customization feature, allowing clients to personalize the platform by changing colors, logos, and other design elements. This ensures the platform feels like an extension of their brand, enhancing user trust and recognition.

Slideshow displaying different versions of the Data Ads interface

Results & Impact

Although the Data Ads project didn’t proceed to full development, the research and concepts laid a solid foundation for future ad tech improvements. Key takeaways included:

Developers always know which design is the latest

To ensure clarity, I implemented a versioning system within Figma, which allows developers to easily track and overlay previous versions.

Entire company has a centre of truth for styling and component

Previously, teams like marketing frequently had to ask where to find specific design elements or assets. Now, with a centralised design hub, colleagues don't need to make these requests.

Updating designs takes around a 10th of the time

Components were used before but not to the same scale. However, now, with the new system, updating is effortless.

Stakeholder Buy-In

The visually appealing, user-friendly designs gained strong support from stakeholders.

Like this project

Posted Oct 30, 2024

Data Ads is a comprehensive design system created for a digital advertising platform. It features a full set of standardized components and guidelines, ensur...

Likes

Views

Clients

Mobicare