Twitter: Ads Library

Designing a consumer-facing surface displaying ad library

BACKGROUND

This project started as a means to comply with new EU regulations called the Digital Services Act (DSA), designed to increase advertiser transparency. It includes several initiatives including a new consumer facing page for an ad library, disclosure on certain ad formats, and updated ad preferences. There was no dedicated privacy team, so we created a team of people from different parts of the business to deliver a solution that met legal requirements.

MY ROLE

As the sole designer on the project, I worked with product, legal, FE engineers, and BE engineers spanning across different parts of our business, including the consumer and revenue teams. I was the only team member from the Ads team, and provided extensive insight into how our Ads business works, the various formats to account for, and metrics that we measure.

THE PROCESS

This project was unique in that it was led by the Legal Team who ultimately had the driving opinion. I worked with legal initially to understand the requirements, however the project scope was ever-changing as they translated different legal requirements. I started by conducting a competitor audit to inform the UX of how the page would work. I closely collaborated with product and engineering to review several concepts and workflows, and they would share level of effort associated with each. Since I was the only team member also on the ads team, I was responsible for pulling relevant engineers who understood certain ad formats that we needed to account for.

COMPETITIVE ANALYSIS

This type of ad library already existed from a regulation around political ad, an ad type that Twitter did not support. I looked to competitor platforms to understand their search/filter functionality, and the information that they shared. The most interesting finding was the relationship between the ad library and the ad detail, and the way that a user could navigate to each individual ad.

WIREFRAMES - TWO CONCEPTS

There was some ambiguity around legal requirements that caused an undefined project scope. This gave us the opportunity to explore two different UX flows, which I brought to our team to discuss. The first concept rendered the full ad library, while second concept consisted of a downloadable file. How could we create an ad library that was understandable for the user, but not overly complex for the engineering team to build?

WIREFRAMES - THE OUTCOME

We decided to move forward with the first concept for several reasons:

First, there was an increasing emphasis on transparency in a global capacity and we expected that this would be the first of many requests for an ad library or something similar. It made sense to built it right the first time.
Second, after pulling in an engineer from the ad team, we learned that we previously had a similar library of political ads and could pull from that backend infrastructure. In other words, the level of effort to build Concept 1 was less than initially expected.
Third, we agreed to limit the level of search and filter capability for the MVP in order to simplify the build.

DESIGN ITERATIONS

Once we determined what features would make up the ad library, I explored different designs for each feature. I pulled inspiration from the competitive audit, while making adjustments depending on our needs and the best experience for our user.

FINAL DESIGNS

I mocked up high fidelity designs after we made key decisions about different features. While these designs currently only account for ads in the EU, we expect it to translate to other countries as they begin to enforce more strict laws around transparency.

TAKEAWAYS

This project taught me how to make progress towards a moving target. I found that the most challenging part of this project was its ever-changing scope and updated legal requirements. Despite the changes, I was still responsible for making progress and sharing designs with the team, especially because of the hard deadline provided by the DSA regulations. It was during workshares that we worked through unknown questions and identified new solutions for the project.

This project was especially demanding because of all the use cases. For example, the design needed to account for ads that were taken down, deleted ads, ads that had different formats, ads that had multiple creatives, etc. Throughout this project, I created an efficient system for myself to account for all of the different use cases, and expect it to serve me in future projects that are similarly complex.

Lastly, this project reinforced that workshares with your larger design team can prove incredibly valuable. Beyond the feedback that I received, I gained context about related projects that were before my time at Twitter, and was able to use that knowledge and context to advocate for my design solutions. Had I been unaware of some previous projects that my team had worked on, the outcome of the project would have been quite different.

READ ANOTHER CASE STUDY: