ESPN Media Kit

The Client

The global leader in sports reporting and broadcasting. ESPN is a high-traffic web site with a laundry list of advertisers including the biggest brands in the world. We worked with the sales and marketing team on an overhauled version of their digital media kit.

The Project

A few years ago, the ESPN web site underwent a complete a redesign that moved the site to a responsive design. This meant changes to the assortment of display advertising formats and their behavior. It also coincided with an industry push to HTML5-based advertisements. I and my team, working with sales and marketing and the ESPN Creative Works team, collaborated on a completely redesigned digital media kit.

For this project I got to wear many hats. I assisted with the site design and art direction. I did coding, graphic design, as well as writing and editing copy for ad guidelines and policies and the development of the policies themselves. Afterwards I personally managed the site content myself. This was a big on-going project that had many eyes on it and one that I have a great deal of pride for.

What I Did

How it Went

Out of all The Walt Disney Company's properties, ESPN is by far the leader in advertising revenue. Before I came on to this project, I had built years of experience in ad trafficking, QA, and ad systems management. I had also begun to help manage content for the previous version of the ESPN Media Kit site. It was with this intimate knowledge and expertise, along with my background in design, that made me a perfect fit to help manage the development of the redesign.

At the time, the industry was shifting to responsive web design. A single site rather than separate versions for mobile devices with the same content as desktop. This also coincided with the movement from Flash-based advertisements to HTML5. With these industry shifts, Sales and marketing needed an updated media kit site with current and accurate guidelines for advertisers. Plus an updated design would match the new version of ESPN.

early prototypes of the redesigned ESPN web site and how ads would fit in the layout

The first part of this project began with the redesign of the main ESPN web site. These early prototype builds from the site team let us get a feel for how the new responsive site design would function. We first had to figure out how our display ad formats with fit into everything. It was at this stage that I and my team helped determine what formats we would initially support at launch.

Our first task was to work with the site and sales teams in an assessment of our ad product catalog. Figuring out what will stay, what will go, and what needed to be created wholly for the new site design. Many used industry-standard sizes and specifications. Yet, there were many custom built products and edge-cases for ESPN. These needed to be figured out.

Eventually we were able to consolidate our ad products list. We streamlined our offerings for advertisers and paved the way for our Universal Ad Package. This was a collection of formats that advertisers could purchase that would serve appropriately-formatted creative to users regardless of device. My in-depth knowledge of our advertising setup and insights into how the new site design would affect ad serving proved extremely valuable.

early wireframes for the media kit redesign

After we determined the changes to the product catalog and ad formats, I got to work creating early wireframes for the new media kit. For this redesign, I and my manager worked through ideas, making decisions on how to organize and present the updated information.

The first big challenge of this project was deciding how to convey the ad guidelines and specifications. We had to educate advertisers and creative agencies about how their ads would appear on the new responsive version of the ESPN web site. This meant they would need to submit multiple sizes to accommodate users with a variety of screen resolutions, which ended up being a lot of information or organize.

images of more developed wireframes of the design

We continued to develop the wireframes further. Those were then worked into more detailed mockups during the design process. As we solidified the organization of the content, we devised a hierarchy of the information. Our experience working directly with advertisers, account managers, and ad trafficking came into play, as we were familiar with common sticking points.

images of the mockups for the site design

My wireframes progressed into high-fidelity mockups. Here, the design of the site started to come together. The design itself borrowed from the ESPN site redesign for brand consistency. Although rather than creating a mirror it had some uniqueness of its own. This design would undergo more changes before going live. Still, many of my design elements that took shape here would make it into or heavily influence the final product.

At this point in the project, one of our in-house design teams were brought in to help us bring it to completion. Due to the nature and workload of my ad development team role, we didn't have the room on our plates to build out the entire site while keeping up with our day-to-day responsibilities. ESPN Creative Works stepped in. We collaborated with them on further refining the design of the site and content. They did a fantastic job on the build, wrote some great code, and I enjoyed working with them on this project.

screenshots of the finalized site design

The final design of the Media Kit site after working with ESPN Creative Works for the site build. While the final look is lighter overall, many of the elements I developed were incorporated into the final version. Elements such as the general layout, spec table, navigation, and thumbnail styles.

After the completion of the site by Creative Works, the entire site was handed off to our team. From then on I personally managed the content of the site and handled its regular upkeep. My responsibilities covered a lot of ground. I kept ads specifications and policies up-to-date, but also made sure ESPN's guidelines were in-line with industry standards (IAB) and our competitors, while at the same time protecting the user experience for our fans. I ensured consistency in language across formats and also handled the writing of new specifications for ad formats launched over time.

Most all the copy on the site has been overseen, written, or edited by myself. Later, I oversaw the localization of content into Spanish and Portuguese for our teams in the LATAM and Brazil markets. I modified other content for our international teams in EMEA, ANZ, and India regions. I created and edited images; made code and content changes as needed. The rapid pace of ads technology and business needs meant the site needed to be updated regularly and I made sure the content was correct and accurate.

I also maintained our library of ads demo pages, styleguides, and Photoshop templates for advertisers and clients to use. This contributed to ads creative being delivered to ESPN within specifications, thereby reducing potential issues and eliminating additional back-and-forth for asset requests and streamlining operations. A healthy media kit made sure Ad Ops ran smoothly.

images of additional content for the media kit including styleguides and Photoshop templates

Examples of styleguides and Photoshop templates that were created and maintained for the media kit. These were invaluable to advertisers. They made sure assets were delivered correctly, which in-turn reduced trafficking time and errors thereby increasing overall efficiency.

My Takeaways

The ESPN Media Kit is a project from my time at The Walt Disney Company that I take a lot of pride in. It was no small task and to have played such an integral part in it made be feel confident in my abilities. I got to use a wide array of skills: design, coding, writing, and content management. I drove to make the site the best that it could be and a valuable resource for stakeholders, inside and outside the company.

I played a major role in the site redesign and the continuing work afterwards, but its development was a cross-team collaboration. It brought together the talents of Ad Ops, Creative Works, Sales and Marketing, site developers, and our international teams. It was a great experience to work with and learn from such a wide variety of individuals and disciplines. Working on this project helped expand my abilities. In web design as well as my project management and interpersonal skills. Plus it's nice to have created something useful for so many others.

Visit the Live Site