Ad Product:
Premium Wrap
A journey through an IMDb ad product over the years
Part One
Designing a More Efficient Ad
What is it?
The Templated Expanding Companion Unit is an ad product at IMDb that I designed and project managed. It is based on one of our more complex & popular ad products and aims to maintain the same KPI’s and design quality as its predecessor while removing complexity around my team and our users.
Results of the New Design:
Since this was my pet project, it was a great feeling to know that my efforts greatly affected our business and our users in such a positive way.
Production time reduced by 50%
Removes development time completely through design tools
Saved ~880 production days from our dev teams
No more QA required
Increased efficiency by 45%
Grew international sales by 18%
My Role in the Project
This project was an interesting one in that I incepted it on my own. After building about 90 of these units by hand, I was frankly tired of the repetition.
I gathered all initial tech requirements.
Audited previous products to define common structure.
Designed the UX and implementation of all back end ad service templates.
Socialized the new design with Sales and Product teams.
Created all internal and client facing specs, PSD templates, and training materials.
Measured and reported on success metrics.
Created all internal documentation.
What Was the Product Before?
In its previous form, this product was difficult to sell, and was causing frustrations with our customers, especially within the fast-paced entertainment vertical. It was also putting a lot of pressure on my team to produce custom rich media ads within very tight timeframes. Creating a templatized solution allowed us to solve both problems.
Requirements
Gathering
In addition to gathering feedback and requirements from partner teams, I also did a full audit on the existing template products to spot gaps in their performance and measure their clickthrough rates. One thing that I found was that less custom units (meaning less custom animation and photoshop work) performed better in their respective KPI's over units that carried excessive animation and premium design.
The Idea
A templated design was the best solution – a template that allowed my design team to work autonomously without the need for Design Tech. This way, we would be able to react faster and iterate quicker for our clients while delivering a product on time and to the same quality standards that our customers expect from us.
Here are the wires and template mapping that I built to present to leadership. They're low fidelity but in the IMDb world, we prefer to iterate quickly with low fi wires and then move over into high fidelity prototype mockups to sell the idea. The wires here are for internal alignment on functionality only.
Templated Design Elements
This example shows each element that a designer is responsible for. Each one of the elements pictured here will activate displaying different messaging. Each element here can also be designed to change and swap out over specific dates so that movie studio partners we work with can adjust messaging based on movie release dates I.E. “In Theaters Thursday”, “In Theaters Tomorrow”, or “Now Playing Everywhere”.
Internal and External PSD Template
To further simplify the creation of the unit, I designed a PSD template and toolkit for my designers to use as well as a client or agency.
The layer structure outlined in this PSD allows for a designer to easily drag and drop their assets into the mock and the “generate assets” within Photoshop.
Once exported, the files were automatically dropped into their own assets folder ready for easy upload into our internal ad service tool. Due to the naming structure within photoshop, these assets were also sized properly to adhere to specs standards in k-weight.
The last piece of the design template hand-off was of course the most boring, must super crucial part, the documentation. To go alongside the internal documentation for how the product functions, I also launched and external facing specs site with downloadable templates and videos for our partner agencies and clients to use.
Technicals
From a technical standpoint, I needed my designers to be able to implement their designs simply. In the product’s previous state, each designer would prep their files and hand off to a developer to implement. This in and of itself took at least 3 hours. In this new system, I designed a template for our back-end ad service to receive all the assets in a simple drag and drop format. To do that I worked with the dev team in charge to modulate the template so that each asset would be easy to upload and assign date messaging toward.
The Result
This product lived for about two years and saved roughly 880 development production days from our Design Tech team. It also increased execution efficiency in the Design team by 45% and allowed for clients and agencies to design their own. An added benefit was that it grew international sales by 18%. It turned out that the simplification and reduction in SLA was enough to convince our advertisers in the UK and DE to purchase the product. Overall, the Templated Premium Wrap allowed us to raise the creative bar through speed and efficiency while also increasing bandwidth and design/dev resources for our other products to better serve our customers.
Part Two
Responsive Website Update
Brave New [Responsive] world
At the beginning of 2020, IMDb officially launched its all new responsive homepage to a new responsive layout. The Templated Premium Wrap now needed to also be responsive. This update brought a new set of challenges but also new opportunities to improve the overall experience.
👈 From this
To this 👉
Enter: The Templated Premium Billboard
To create the new Templated Premium Billboard, I took all that I learned from the Templated Premium Wrap and improved upon it.
Three States,
Three Main Assets Required
The new design is broken up into three different states: A ten second intro, twenty second auto play resolved video, and a static side unit.
These three states stay the same for each responsive breakpoint. So, no need to design it twice. The ad slot responds, not the creative.
The Design Template
Much like its predecessor, the new responsive design also has an internal and external facing design template. I created the first iteration of this template for each of our desktop breakpoints.
The good thing about meeting IAB standards is that the majority of the elements within this PSD are usually already built by our advertisers’ agencies. Due to the fact that they fall within the IAB standard, this ad placement could also run on any other IAB standard site with little effort.
Easy drag and drop build
Launching soon will be a similar uploading system for this product. The Client or an internal designer can simply upload their three elements and the optional wrap. Once they drag and drop these items into the ad service, the unit will dynamically build itself out with no development effort necessary.
Note: Due to not requiring any Design techs, this unit consistently ships with zero bugs.
The Doc
And of course, this gets documentation as well. This time in the form of an easily accessible Quip doc and partnering external facing specs site.
The Result
So far in 2020, we have shipped a countless number of these units with none of them requiring development effort by our design techs. Additionally, the production time is a consistent 5 business days. Our advertisers and Customers are happier than ever as well, now that the video content can play longer. The auto play video-first approach in this unit was in direct response to customer needs. The 6-8 second intro of the legacy Premium Wrap didn’t allow our advertisers to tell a coherent story to introduce their title properly. Now that they can utilize up to 30 seconds of total auto-play video. In addition to that, users of our site used to complain about the fact that the video content for the Premium Wrap Ad overlapped the site content of IMDb– it was a very poor user experience. It was essentially a glorified pop-up ad. This new layout allows for video content to always display with the ad and never interrupt our users experience with IMDb.