AdPlayer

AdPlayer is a revolutionary ad product that plays music right inside the banner space and can be served across any ad network. AdPlayer includes a full set of media playing features such as song information, play/pause, and social sharing. It also has pop-out capabilities allowing fans to keep the music going wherever they browse.

Primary Screens

Initial State

Playlist State

Track View

Sharing Integration

Additional Features

Pop Out

Responsive Layouts

Content Integration

Inline Playback

Redesigning AdPlayer

Our company goal was to rebrand F Sharp which involved giving a new face to all of our ad products. I worked with a team of designers and project managers to update AdPlayer and all of the associated marketing materials including the website and the media kit spec sheet.

Product Specs

The first step to redesigning AdPlayer was to establish the new ad unit formats that we would be utilizing in order to make the product more scalable. The next step was to document all of the assets we would require a brand to provide, along with any design limitations (eg. background image with 828x828 dimensions).

Some of my research included determining the most popular mobile screen sizes as well as testing different safe areas for background images. The goal was to eliminate any edge cases that we might potentially run into while piecing together all of a brand's assets.

After organizing this information, I worked with other designers to deliver a comprehensive media kit spec sheet.

Wireframes

When it came time for wires I went back and updated all of the old files for the existing ad units and then designed new wireframes for the newly added formats.

These wireframes outlined the functionality of the AdPlayer for the 'one track,' 'playlist,' and 'radio' modes. It took into account transitions for ad unit resizing and also transitions between product states.

Design

After wires were completed I worked with visual designers to ensure that the initial vision was maintained throughout the rest of the creative process.

AdPlayer Site

The AdPlayer Site went through a similar developmental process as the AdPlayer product. I was tasked with revamping the old wires to fit our new F Sharp branding, while working alongside the visual designers.