TheTradeDesk.

Introduction

TheTradeDesk, an advertising platform company. It provides software that helps advertisers and agencies plan, buy, manage, optimize, and measure digital advertising campaigns across channels such as display, video, connected TV, audio, and mobile. They engaged me to redesign their platform, creating a more cohesive visual identity that better reflected and reinforced their brand.

Initial Meeting

The project began with a series of stakeholder meetings, where we conducted in depth discussions about the platform, its challenges, and its future direction. During these conversations, two key objectives emerged: stakeholders wanted the platform to feel more modern and to have a stronger visual connection to TheTradeDesk brand. To better understand the existing experience, I was also provided with screenshots of the current platform, which served as a baseline for evaluating opportunities for improvement and visual alignment.

Current Platform

Current platform screenflow: Partner > Advertiser > Campaign > Ad Group

• Partner: user selects from list of Advertisers.

• Advertiser: user can view Advertiser performance and can select from a list of Campaigns within the Advertiser group.

• Campaign: user can view Campaign performance and can select an Ad Group.

• Ad Group: user can view detailed overview of the Ad Group and can view/modify each category.

Screenshots of the current platform: Partner screen

Screenshots of the current platform: Advertiser screen

Screenshots of the current platform: Campaign screen

Screenshots of the current platform: Ad Group screen

Initial Process

Before exploring design concepts, I wanted to start by understanding TheTradeDesk brand itself. What does the brand stand for? What values and qualities does it represent? How should it make users feel when they interact with the platform? And most importantly, how can the experience create a clear connection between the product and the brand, making it instantly recognizable and meaningful to its users?

The Brand Guideline

TheTradeDesk Logo

Brand Colors: Legacy

Brand Colors: Current

When examining TheTradeDesk's brand palette, one of the most distinctive characteristics is its use of bright, vibrant, and expressive colors. Unlike many traditional brands that rely heavily on a single primary color, TheTradeDesk embraces a diverse range of colors to communicate expression, innovation, and creativity.

However, this visual richness is not reflected in the current platform experience. The existing interface feels minimal, neutral, and functionally driven, creating a disconnect between the product and the brand itself. As a result, users may not immediately associate the platform with TheTradeDesk's unique visual identity. This presented an opportunity to explore how the brand's color system could be more thoughtfully integrated into the product experience, creating a stronger and more recognizable connection between the platform and the brand.

History of Design Evolution for the Platform

With a foundational understanding of the brand, the next step was to examine how the platform’s visual design has evolved over the years. By analyzing previous versions of the product, I was able to identify shifts in visual language, layout structure, color usage, typography, and overall design maturity. This process helped uncover which visual elements remained consistent, where the experience had become outdated, and opportunities to create a more modern interface that better reflects TheTradeDesk’s brand identity.

Version 1

Version 1.n

Version 2

Version 3

Looking at the platform’s visual evolution, we can see that the earlier designs embraced a vibrant and colorful aesthetic that closely aligned with TheTradeDesk’s brand identity. Over time, however, the interface gradually shifted toward a more muted and gray color palette. While this transition may have been an effort to modernize the experience through a cleaner, more minimalist approach, it also resulted in the loss of much of the platform’s visual distinctiveness, making it harder to connect with the brand’s identity.

Users

As a next step, I’d like to conduct a user study to better understand who the platform’s users are and how they connect with both the product and the brand. To effectively redesign the platform, it’s important to capture the emotional and functional value users associate with the experience. Understanding how the brand makes them feel will help ensure that the redesign strengthens the qualities that resonate most with its audience.

User Journey

Next, I wanted to analyze the customer journey to better understand how users progress from initial awareness to becoming customers, and how they’re identifying with the brand throughout the process.

• How are the users identifying with the brand?

• What kind of emotion is the user feeling when looking at the brand and marketing materials?

Step 1: Email Contact

Email

This email serves as a marketing touchpoint designed to introduce prospective customers to TheTradeDesk's platform, capabilities, and value proposition.

Step 2: Research

Media and Promotional Materials

These are the promotional items and materials that the users can come across throughout many sources such as blog sites, social media posts, newsletters, etc.

Marketing Website

These materials express a colorful, gradient and an expressive tone about the brand.

Step 3: Onboarding & Platform Usage

Current platform design (Campaign page)

The current platform adopts a muted and minimalist visual language that feels disconnected from the expressive and vibrant identity showcased across the brand's other materials that Joseph had encountered previously.

User Interviews

Next, I conducted interviews with the internal marketing team to gain a deeper understanding of how they perceive the brand and whether the product experience effectively reflects that identity to customers. The goal was to uncover opportunities to better align the platform's visual language with the brand values and expectations established across other customer touchpoints.

There appears to be a common consensus that the platform's current design feels disconnected from the brand. The experience should better capture the sense of expression, creativity, and vibrant visual identity that defines TheTradeDesk.

Focus Areas

From all the insights gathered, I identified the core qualities that best define the brand:

• Colorful

• Expressive

• Approachable

Stylescape

Based on the key takeaways, I constructed the stylescape utilizing the core qualities of the brand that captures a colorful, expressive and an approachable tone.

Initial Redesign Concept

Icons

I used gradient tones in the left navigation icons to reinforce the brand's colorful and expressive identity throughout the platform.

Platform: Campaign Page

Platform: Advertiser

Platform: Ad Group

Platform: Partner

Feedback

The early response to the redesign was largely positive, with partners agreeing that it reflected the brand's identity and personality. That said, there were a few important pieces of feedback to address:

• The gradient treatment applied to the left navigation icons was the only use of gradients throughout the experience, making it feel visually isolated from the rest of the interface.

• While the redesign moved in the right direction, the Ad Group page still lacked the expressive use of color needed to fully align with the brand identity.

• The gradient treatments across the navigation and data visualizations created some visual ambiguity, suggesting a need for clearer guidelines on how gradients should be applied throughout the experience.

Design Refinements

Icons

Based on the feedback, the gradient treatment on the navigation icons was creating some visual confusion and felt inconsistent with the rest of the experience. To address this, I transitioned to solid fills using the primary brand colors, creating a stronger brand presence while establishing a more cohesive and recognizable visual language across the platform.

I began by using the three primary brand colors to establish the visual language for the icon set.

Before

After

This also produces a better result on Dark Mode.

Dark Mode (before)

Dark Mode (after)

Color

The color selection for the current platform feels disconnected from the brand and doesn't fully capture its core personality or essence. Instead, the colors come across as primarily utilitarian, prioritizing function over creating a distinctive and recognizable brand identity.

The legacy design more effectively captured the brand's essence through its thoughtful use of color, creating stronger visual distinction across categories while reinforcing the brand's personality and identity.

To address this, I established a color system based on the brand's primary colors (ones that are distinct from one another), creating derivative shades and tints that could be applied consistently across the platform for a variety of use cases. This approach preserved the brand's visual identity while providing the flexibility needed for functional UI elements and accessibility.

This is the result we see when applied

Before and After

The refined color system more effectively captures the brand's identity while creating a more cohesive and visually engaging experience across the platform.

The redesign builds on the strengths of the legacy design, preserving its distinctive brand character while modernizing the visual language to create a more polished experience.

Style - Gradient and Solid

Next, I established clear guidelines for when to use gradients versus solid colors throughout the platform. Through exploration, I found that reserving gradients exclusively for data visualizations while applying solid colors to all other UI elements created a more consistent visual language. This distinction reduced visual confusion, improved clarity, and allowed data visualizations to stand out without competing with the rest of the interface.

Survey

To ensure the redesign would also resonate with users, I conducted an internal survey to validate the proposed changes. The findings provided data-driven insights that helped support and justify the design decisions when presenting them to stakeholders.

With overwhelming support from internal users, I was able to confidently present the proposed changes to stakeholders. The recommendations were well received, and the redesign was approved for implementation.

Dark Mode

Following approval of the proposed redesign, I led the design of the application's dark mode, which is a highly requested feature from users. The new experience maintained the established design system while ensuring accessibility, visual consistency, and a seamless transition between light and dark themes.

Mobile View (Responsive Design)

I also designed the responsive experience to ensure the interface remained scalable while preserving clarity and usability across different screen sizes.

Design System

For the next step, I’ve built a structured, scalable design system to improve consistency across product. I have designed a flexible component architectures using Auto Layout, variants, and component properties to support a wide range of product use cases. I have authored component documentation covering behaviors, states, accessibility considerations, and implementation guidelines for designers and engineers. I’ve designed responsive components that maintained hierarchy, usability, and data clarity across desktop and mobile experiences. For organization, I have established naming conventions, file organization standards, and library governance to improve collaboration and long term maintainability. Components are grouped by purpose such as Inputs, Dialogs, Drawers, Filters, Menus, Pagination, and Popovers making them intuitive to locate and update as the system grows. And lastly, I partnered with engineering to ensure design components aligned with production implementation and reduced design to development inconsistencies.

Design Tokens & Theming

• Established color token architecture using design variables.

• Organized typography, spacing, elevation, and surface tokens for consistent implementation.

• Created semantic color tokens to support future theming.

• Built components that inherit design tokens instead of hardcoded values.

• Supported light and dark mode through reusable token structures.

Accessibility

Accessibility was considered throughout the component creation process, ensuring every component was designed with usability in mind. This included:

• WCAG-informed design practices

• Color contrast evaluation

• Semantic UI guidance

• Error and helper messaging

• Accessibility documentation

Documentation

• Documented component usage, behaviors, and design rationale.

• Defined interaction states and implementation guidelines.

• Provided examples of correct and incorrect component usage.

• Included accessibility considerations where applicable.

• Reduced onboarding time by creating clear documentation for designers and developers.

File Organization & Governance

• Organized design libraries into scalable categories.

• Established naming conventions for components, variables, and assets.

• Structured library to improve discoverability and maintenance.

• Maintained version control and library updates.

• Created a consistent folder hierarchy for long term scalability.

Collaboration

• Worked closely with engineering to validate component implementation.

• Gathered feedback from cross functional teams to improve component usability.

• Balanced business requirements with scalability.

• Incorporated stakeholder feedback into iterative improvements.

Design-to-Development Handoff

Once components were finalized, I prepared them for development by ensuring every supported variation, state, and behavior was fully documented within the design system. This provided engineers with a single source of truth, reducing ambiguity during implementation and improving consistency between design and production. Every component was reviewed before being marked Ready for Dev, ensuring it met predefined quality standards for implementation.

Design System Documentation Site

To improve adoption across product, design, and engineering teams, I helped create an online documentation hub that transformed the design system from a static Figma library into a centralized knowledge base. Rather than relying solely on design files, every component was documented in a web-based portal where designers and developers could quickly access implementation guidance, usage recommendations, accessibility standards, and component updates. The documentation site centralized:

• Component documentation

• Design rationale

• Usage guidelines

• Specifications

• Interactive demos

• Version history

• Release notes

The documentation wasn't written exclusively for designers. It was structured so that:

• Designers understood when and how to use a component.

• Engineers understood expected behavior and implementation.

• Product managers could reference standardized UI patterns.

• New team members could onboard more efficiently.

Final Design (All Screens)

Partner (Default)

Advertiser (Default)

Campaign (Default)

Ad Group (Default)

Partner (Dark Mode)

Advertiser (Dark Mode)

Campaign (Dark Mode)

Ad Group (Dark Mode)

Responsive Design (Mobile)

Final Thoughts

It was a true pleasure and an honor to redesign the platform and help evolve its visual identity. I’d like to thank the team at TheTradeDesk especially for this opportunity. This project was a lot of fun to work on and I hope to work on more projects like this in the future :)