laura jane keller

With one foot in motion design and one in front-end development, I'm a versatile designer who loves taking an idea from concept to final product

360 Panorama Viewer
Challenge

Familiarity with 360 panorama viewers was increasing on mobile platforms due to interest in VR/AR technology. I was tasked internally at Pandora to develop this technology into an ad product clients could purchase and run on Pandora's ad platform. This was part of a push to expand our rich media offerings and bring in more high spend clients.

The audience for this product would be a Pandora listener on the mobile platform. Visually, the user would be served a display ad prompting the user to interact for 15 seconds in exchange for one hour of uninterrupted listening. In the panorama viewer, users would tilt or pan their device to explore a panoramic image. Within this environment, hotspots would appear. These hotspots could be tapped, toggling modal windows with context specific information and the option to drive users to external client pages.

Process

Other versions of this technology would focus more on the panoramic image/video. As a way to make our product stand out from the competitors I added a layer of interaction and the option to drive off platform. This decision was made to give a client a way to spread brand awareness and bridge our advertising platform with the client's existing websites and micro-sites.

After this initial ideation on the product I was tasked with developing a prototype. Using placeholder assets, I developed the prototype from wireframe to HTML. What I learned from the initial static wireframe, teammates who had never interacted with this kind of product had difficulty understanding the userflow. My solution to this was to to animate it in After Effects and use that rendered video as a companion wireframe to the static one. Because this helped, we wound up using motion demos when showing early proofs to clients for this product.

The HTML prototype and wireframes acted as a visual tool for our sellers. As more clients purchased the product, I learned we had to evolve it. One obstacle that we kept encountering was the type of assets the client could provide. Sometimes they would have a horizontal panorama (cylindrical) or sometimes they would have a wide image (not seamless). I took this information and built in options for these panorama types in the product.

Another obstacle was file-size. Sometimes the clients would want to use audio clips or high-res imagery within their hotspots which slowed down the load time for the ad. We developed a three hotspot limitation in order to keep this from affecting load times.

Results

In the Toyota execution, users explored the inside of a Highlander SUV. There were three hotspots that toggled modal windows containing feature information for the USB ports, seating options, and trunk space. When Toyota purchased this product, their end game was to spread brand awareness of their new Highlander SUV. Using the options I developed in the prototype, they decided to highlight certain features in the ad via the hotspots and push interested users to their website.

All of this interaction would be tracked by internal and external means to see how well the product performed. The results were overall positive. Engagement rates for Pandora were above average and Toyota received an uptick in site traffic for their Highlander SUV. Further results, Toyota continues to partner with Pandora to spread brand awareness for their campaigns.

◆ ◆ ◆
Interactive Games
Challenge

My team would often group up with the Ad Product Questions team (APQ) at Pandora for ideas on building out our rich media offerings. Pandora's rich media ad products cater to higher spending clients and therefore deliver higher revenue per purchase. Because of this, we took a proactive approach to develop products multiple clients would buy. APQ let us know clients were asking if we offered ways of building various interactive games. I was tasked with building a 'toss' style game, similar to the basketball shooting games you find at arcades.

The audience for this product would be a Pandora listener on the mobile platform. Visually, the user would be served a display ad prompting the user to interact for 15 seconds in exchange for one hour of uninterrupted listening. Within the ad unit, the user was instructed to score as many goals as they could in the 15 second time limit. When the time was up, a resolve frame would serve with a message or an optional CTA, driving users to a client's external page.

Process

I was able to build off an earlier project I created for McDonald's with a similar build. Having user data from the McDonald's campaign helped inform how I approached improving the product. In the original, the user tilted their device to aim the ball object. We noticed based on the internal tracking we implemented on the unit, that users were exiting the game before their reward was served or not getting a success resolve frame (success resolve was served when the user would make at least one "goal"). One possible explanation to this was the users were finding the instructions too difficult. I remembered a few occasions, handing this product around to the team and seeing initial confusion with the tilting action.

In order to reduce the barrier to execution, I changed this to a swipe interaction. Swiping to launch a ball object is a game standard interaction a user would be more familiar with if they had ever played a mobile game. My thought behind this was the quicker the user understood the game, the more time they would spend engaging with the product.

In a way, the McDonald's campaign acted as an early prototype. This greatly sped up the development process for the new toss game. As with the 360 panorama, I began with a static wireframe, but moved fairly quickly after that to an HTML prototype. In order to avoid the obstacles I encountered on the McDonald's campaign, I got it into as many hands as possible before we sent it to the sellers. It didn't take much coaxing to get my peers to play, they found it very entertaining and seemed to understand the instructions immediately which was great news.

Result

One of the first to purchase the new toss game was Wendy's during the World Cup Finals. Their aim was to promote brand association for their Hispanic market with the World Cup. Unfortunately Wendy's wasn't able to secure rights to use the World Cup branding, so our toss game worked perfectly for their needs. We were able to brand a football (soccer) toss game with Wendy's creative, having the user visually connect Wendy's brand with football. Given the campaign flight dates, it would run during the Finals, bridging the connection between the two brands without implicitly doing so.

The product would go on the evolve but the core mechanics I built in this first prototype remained. Our goal with this was to aim for a product we could see many purchasing, and our results matched. We even picked up a client we were having difficulty pitching rich media to, Netflix, during their Santa Clarita Diet Season 2 campaign.

◆ ◆ ◆
Animated Carousel
Challenge

Bank of America came to us wanting to spread awareness for their 'Meet Erica' campaign. For this project, the client was to design the initial wireframe while I would take the design and bring it to final build. The client's goal with this was to spread awareness of the Erica product to existing BofA customers. Early on the client also discussed their interest in thorough tracking and user data testing results.

The audience for this product would be a Pandora listener on the mobile platform. Visually, the user would be served a display ad prompting the user to interact for 15 seconds in exchange for one hour of uninterrupted listening. After clicking the trigger banner, they would be greeted with a BofA rich media ad, introducing them to Erica. In the first slide, users would be asked to choose a feature or advance the carousel forward to begin the experience.

Each subsequent slide would emulate how Erica would function with a given feature through animated text bubbles. Clips of Erica's voice and sfx would trigger with the animation. The user could navigate the carousel by tapping or swiping to progress or go back. The goal of the unit was to drive customers off platform to a BofA page to learn more/install the app. At the end of the carousel was a CTA button. Also, a persistent button would appear under the navigation after 15 seconds elapsed.

Process

Avoiding a one-to-one replication of the Erica product, we wanted make users some of the many things Erica does. Before BofA purchased the unit, the account manager reached out to us to create a presale pitch with ideas ahead of the pitch meeting. In this presale wireframe, the unit would act more like the app itself, but paired down and automated. BofA liked the idea, but because of legal reasons needed to show the content in another way. BofA purchased the unit and sent over a new idea, the animated carousel, each slide acting as a vignette of a feature.

While prototyping, I encountered a few obstacles with the functionality. The app's webkit browser, where this ad was displayed, required a tap interaction to autoplay audio files. I solved for this by having audio trigger only after the user tapped on the first slide to navigate. Therefore ensuring audio loading/playback in the subsequent slides.

The second issue dealt with the app's native audio cues. After the user interacted for 15 seconds, an audio and visual prompt would indicate their hour of uninterrupted listening had begun. This overlapped with the ad unit's audio, making the audio sfx difficult the understand. My team and I talked with engineering who in turn resolved this by allowing us to toggle the audio cue for sound dominant rich media ads. This option would go on to help us with future products.

Results

We implemented both internal and third party tracking to detect interaction for each slide. Because of this data, we found the BofA ad performed well above average in engagement. The prototype also informed future audio driven rich media executions.

◆ ◆ ◆