This American Life Mobile App

*This was a personal project completed for my senior portfolio in 2013

My This American Life app may be the most used app on my phone. I play episode after episode as I work on projects or as do that regular drive from Milwaukee to Minneapolis. And as much as I love Ira Glass and all the stories that he shares, I think the app needs some work. I cannot for the life of me make a mental map of the app. So I took it upon myself to redesign it with the goal of making it more intuitive to it's users.

Screenshots of the app as it was at the time of the redesign

Current Function Map

My Function Map Redesign

Users aren't able to make a clear mental map of this navigation with multiple access points & no back buttons.

As you may have noticed there is a lot going on. What I came to realize, is that there didn't need to be. A lot of the functions were really simple and could be grouped together. Users didn't need three different ways to access shows. So I simplified, reorganized, and added new features- a log in system and a queue (I'll elaborate on this later.)

Some of the Initial Sketches

Wireframes

The Redesign

All Shows

All Shows doubles as the opening screen for my design of the app. Right when you open the app, the latest episode is presented to you at the top of the list. The user can scroll down chronologically to view other episodes. If they want quick access to other years, the timeline feature on the left allows the user to jump around. If an episode looks good, the big play button allows quick access to listening.

To see a longer description of an episode users can just click More.

Clicking the More link on any of the episodes will bring the user into a detailed description of that show. From here they can start play the episode, add it to their Queue, favorite it, save it for offline listening, or share it with a friend. The description of the episode is broken down by segments making it easy for users to scan the material.

Nested Navigation

At anytime a user wants to access any of the features on the app, they can pull right or tap the hamburger icon.

Here users can see that they view the episodes in with different filters, such as played, unplayed, and even by contributors (David Sedaris is my favorite.)

In the Nav, an episode count is displayed next to the Queue so users can easily see they have some pending episodes waiting for them.

Queue

So many times when I listen to TAL I wish I could store my episodes somewhere. There is a favorites feature but I don't want to label it as a favorite without listening to it. Therefore I designed the Queue which displays episodes you've hand selected for future listening. Clicking the arrow would take them to the More screen or just click the circle play button for immediate listening.

The Player

At any time a user can pull up or tap the arrow at the bottom right side of the condensed player to expose the full page view. This brings the user to the detailed screen for that episode.The user can see what act of the episode they are listening to in time lapse display at the bottom.

All Screens

Something to highlight is the updated Blog feature. The blog on the current app takes the user out of the app into Safari to the TAL website. For my design, I brought those blog features into the app. Easily scroll and read stories, comment & share with friends.

Also you will notice that a subtle way to differentiate Played and Unplayed episodes is by changing the color of the Play button. Heard is blue while unplayed is red. But users can view heard and unheard episodes at any time by using the filter options in the navigation.