Native Stream ads
What are Native Stream ads
Native ad formats combine a variety of assets provided by advertisers in order to produce rich, compelling ad experiences. These ads are displayed alongside page content, which provide interaction and engagement superior to traditional display advertising.
Native stream ads are clickable ads that fit the form and function of the content around them, such as within the content stream on Yahoo properties, apps, and third-party publishers.
The problem
The native business was loosing out on revenue as the design team could not support creating images for native ads. While the sales and account management teams were using image editing softwares available online and in-house they were unable to achieve the output desired by our clients
The goal
To create a simple user-centered tool that would quickly and easily crop images into 2 sizes we use at Yahoo! for our Native stream ads:
• 627x627 (1:1 ratio)
• 1200x627 (1.91:1 ratio)
This would be used by the sales and account management teams to create images for native ads on Yahoo properties, apps, and third-party publishers.
The team:
Product manager
Product Designer
Interactive Developer
Product manager
Product Designer
Interactive Developer
Tools:
Overflow
Sketch
Photoshop
Invision
Overflow
Sketch
Photoshop
Invision
Methods:
Sales interviews
Brainstorms
Usability testing
User stories
Sales interviews
Brainstorms
Usability testing
User stories
Discovery
As this tool was mainly being built for internal users (Sales and Account Management) our
first task was to interview them and understand what they would like to achieve from this tool
and also and how complex they would like this tool to be. We collaborated with Sales and Account Management teams to gather user requirements.
first task was to interview them and understand what they would like to achieve from this tool
and also and how complex they would like this tool to be. We collaborated with Sales and Account Management teams to gather user requirements.
We conducted brainstorm sessions between designers, sales/account management, product owners and interactive developers.
The learnings from all these sessions helped us define our design requiremens which were then translated into lo-fi sketches. After a few rounds of iterations we converted these drawings into wireframes.
Wireframes
The solution
Provide and interface that could be used by sales and account management teams to create images for native ads across all Verzon Media properties.
We needed to keep this simple so as to avoid any need for training to use the tool and to avoid having to use any design resource for creating these images.
From what was conceptualised as a basic cropping tool, we went on to add more functionality to the edit section enabling users to flip and rotate the image giving them a little more control over the output but still making sure they would be compliant with our ad specifications.
Design principles
Minimal
Reduce functionality to only the most essential elements to achieve desired output
Reduce functionality to only the most essential elements to achieve desired output
Restrictive
Keep the functionality restricted to ensure the output would be compliant with Verizon Media’s ad
specifications (including filesize).
Keep the functionality restricted to ensure the output would be compliant with Verizon Media’s ad
specifications (including filesize).
Consistent
Use the same navigation mode so that users can easily navigate between screens
Use the same navigation mode so that users can easily navigate between screens
User journey
Color palette
Typography
Hi-fi prototype View on Invision
We then built an invision prototype which was shared with stakeholders. This prototype also enabled us to conduct usability tests and gather requirements for build.
Next steps
This is now being built by the Ad Plaform teams in the US. I will continue to lead this project on behalf of the EMEA team. We are looking to integrate this feature into the Yahoo! Ad Platform after we have tested it in isolation.
