Employer
iHeartRadio

Contributions
Interaction Design, Visual Design, Motion Design, Product Management

Platforms
iOS, Android, Windows Phone, Windows 8, WebOS, BBX OS, Web, Chromecast, XBOX 360, Playstation 4, Amazon Fire TV, Apple TV,  Android TV, Google TV, Yahoo TV, Apple CarPlay, General Motors MyLink, Ford Sync, Land Rover InControl, Toyota Entune, BMW Connected Drive,  JVC, Kenwood, Pioneer, Bose SoundTouch, Sonos, Android Wear, Galaxy Gear

A key part of our strategy at iHeartRadio was to "be everywhere our audience is." So we built an app for every platform we could find.

My team of designers and I worked on apps ranging across Mobile, Tablet, Web, TV, Automotive, Connected Speaker, and Wearable. I made it a priority for my team to learn the idiosyncrasies of each platform and understand the basics of the technology. 

During my tenure, we implemented the core iHeartRadio experience across 27 different platforms.

iHeartRadio for
General Motors

The General Motors "infotainment" platform serves its four largest brands, from the entry level Chevrolet to the premium Cadillac. Apps for the platform have to accommodate a wide range of hardware and interaction methods. Some vehicles come with high-end capacitive touch screens while others use a simple 4-way controller.

GM provided us with a simple set of safety requirements and a bare-bones interface guidelines document. Unfortunately, the interface guidelines described a lot of vertically scrolling lists and small touch targets, elements that are especially problematic in automotive ergonomics.

I took a step back and reimagined our app with big juicy buttons and horizontal scrolling lists. Changes designed to work for the large, clumsy movements that originate in a user's shoulder and elbow, instead of the delicate movements of a user's fingers.

The alternate design direction paid off. Testing in a driving simulator showed our app to be the safest on the platform, and General Motors now uses iHeartRadio as an example to shoot for.

iHeartradio for
Amazon Fire TV

In 2013, Amazon decided to build a TV platform based on the custom fork of Android they had developed for their Fire Tablets. They invited iHeartRadio to be a launch partner.

When we first began working on this app, Amazon had not yet developed a set of UI APIs, so we had to build the entire experience from standard Android primitives.

The Fire TV hardware was engineered to be as inexpensive as possible, so the graphics processing was far less powerful than a standard smartphone at the time. We worked through several iterations of our animations to make sure they where fluid and fun.

Below is a motion study I animated to help our developers when building the interface.

iHeartRadio for
Ford Sync

Ford Sync was one of the earliest voice recognition interfaces widely available to the public. Because the technology was so young, I had to design within some very interesting constraints. 

Our app ran on a connected smartphone, and supplied the vehicle's entertainment system with a script and a dictionary of terms to listen for. The larger the dictionary, the less likely the system was to understand the user.

My initial design made use of a browsable menu, a key component of graphical user interfaces. However, once we built the app, we discovered that was a critical mistake.

The experience of browsing a graphical menu was a revolution in the early '80s, but that concept doesn't work for voice based interfaces.

I redesigned the app and reduced the list of options to one of 16 genres or any previously saved station. If you wanted more options, you could park your car and pull out your smartphone.

iHeartRadio for
XBOX 360

Plug a Kinect into an XBOX and you can interact with it in three different ways. There's the regular game controller of course, but there's also voice commands, and gesture controls.

Every app developed for the XBOX 360 and XBOX ONE platforms has to accommodate all three interaction methods. That means each view has to include three layers of interface.

Below, you can see an example of the same view in three different interaction modes.

XBOX 360 apps are rendered by the system's CPU instead of the GPU, so all the power that goes to rendering games is unavailable to app developers. We wound up scrapping a lot of our more ambitious ideas to make sure the app ran smoothly.

iHeartRadio for
Google TV

Google's initial TV platform earned very little traction, so in 2011 they announced a 2.0 update and a renewed push to get the software on the latest TV sets. This new iteration had a larger focus on Apps instead of utilising video enabled websites.

Our lead developer and I spent a lot of energy on the transitions and selector animations. The app had to have "whoosh!"

The app got a lot of attention from the Google TV team and in the spring of 2012, we where invited to demo at the Google Village during SXSW.