iHeartRadio National Website Redesign

UI/UX

One of my first projects when starting at iHeartRadio was the redesign of the national website. With over 50 million registered users at the time it was very important for our team to create a simplistic, intuitive responsive site that puts listening opportunities first and foremost. I worked as a UI/UX designer on a team with our Product Design Lead and a front-end developer. My work focused mainly on the modules on the artist and station profiles, site-wide search, and authentication/sign up, and the fullscreen and mini, but I was able to touch many other areas of the site as well. It was very exciting to be a part of such a major redesign!

You can view the site live at www.iheartradio.com (must be logged in).

Modular Profile Design

iHeartRadio allows users to access all types of stations. Whether it's your local radio station, a station based on your favorite artist or song, or a station featuring all of your favorite podcasts and talk show, they all have a similar profile page design.

There is a finite amount of different content types that every station profile page can have. These include everything from photo galleries, news stories, artist's albums, songs, similar station, events, etc. However, every station can have any combination of content types that they desire; some stations have a ton of content, while others may not have much at all.
Because of the freedom these stations are allowed we needed to come up with a solution for our profiles that allowed stations to choose their content and be able to put it in whatever order they wanted. We solved this by creating a system of "modules". Each content type has a specific design that is able to stack and be rearranged in any combination and order the station decides on. This type of design really lent itself well when it came to responsive design. All of the modules translated very well when scaled to mobile.

View homepage sketches here, and wireframes here.

Below is an example of one of the profile types, Artist Profile; to the right is the iHeartRadio homepage.

Individual Module Breakdown

Click thumbnails below to view in full.

FULLSCREEN PLAYER EXPERIENCE

For iHeartRadio, listening is the most important feature and I had the pleasure of being able to work on the UX and UI for the fullscreen player experience, as well as the mini player. The site has a "mini player" that is always present at the bottom of the screen no matter what page you visit. If you click the 'expand' button you will be take to the fullscreen player experience. It features album art stretched fullscreen to give you a beautiful immersive experience that you would be proud to have shown up on your screen or tv for any social gathering where you want music.

Within the fullscreen player you also have access to 'My Stations' and 'Listen History'. I wanted to included the features within the fullscreen experience so users could quickly and easily access their most-listened-to stations and play them without having to exit the fullscreen mode.

Click the images below to view larger.

Fullscreen Search

UX/UI

With millions of songs and thousands of stations, it is not surprising that the search functionality is one of the most-used features on iHeartRadio.com. Because of that we wanted to be sure that we were making the most of that experience. We created a fullscreen search to help users quickly and easily find what they are looking for. When a user starts typing in the search bar they are automatically taken into fullscreen mode with autofill to help them find the content they want.