Mobile App Design

Simplified Podcasts

  • Timeframe: 4 weeks (Summer 2013)
  • Personal role: All work
Simplified Podasts

Concept

Podcasting has been growing for years, but has seen little adoption among older and less technical users. Existing podcast apps are complicated tools for power users. Instead of using an application, novices often manage podcast files manually, which is also tedious and error-prone. Listening to podcasts doesn't have to be this difficult.

Goal: Help people get into podcasts by making a simple, unintimidating app to manage their podcast feeds.

Design Questions:

  • Why are there so many bad podcast apps for Android? What is so intrinsically difficult about designing a podcast app?
  • Are the advanced features of competing apps necessary for mainstream users?
  • What will appeal to users who listen to podcasts but don't use an app to manage them?

Research and Insights

Interviews revealed a few critical insights:

  • Users often don't put queue in preferred order because it it too tedious

Interview with Jeremiah, 30, Engineering Instructor

  • Doesn't use podcasts often - "I don't care enough."
  • Downloads files on PC browser, transfers to phone manually. Considers this a major barrier.
  • Admits to not being sure what podcasts are in reference to serial format and ability to subscribe. Thinks of podcasts as individual files rather than a series. Organizes in terms of files rather than episodes.
  • Has listened to podcasts he liked with friends, but thought it too daunting to do more.
  • If he was going to use an app for podcasts, it would need to include a search feature to find the podcasts that his friends recommend.

Journey Map

The main task in this app is to find an episode and play it. Any instance of an episode can be played by tapping it once, but some users will choose to queue content for uninterrupted playback of multiple episodes.

Once set up, the app can be opened and playing a new episode with only one tap. Some users may never leave the new episodes tab. Advanced functionality with the queue and subscriptions tabs are available, yet completely optional.

Flow Chart
Journey Map: Unnecessary features have been removed, allowing for an app that feels simple.

Linear Prototype

After working out the conceptual side of task organization on paper, I made a vector based prototype using the Android 4.x Holo conventions. Creating a tab-based navigation helped clarify the organization of tasks. I realized that multi-level navigation in existing apps is the primary source of perceived complexity. My early iterations focused on staying on one view and only switching between tabs.

The following wireframes include all the major views of the application without final visual styling.

  • First run
    First run. Coach marks help first time users add a subscription.
  • RSS link automatically copied from clipboard. Import will scan entre device for OPML file - no hunting for file manually.
  • Search by name
  • Search results. Advances to the subscriptions tab when added.
  • All unlistened episodes in chronological order. Expand description with context menu
  • Add to queue with context menu
  • Confirmation
  • With Wi-Fi, episodes are automatically downloaded. Force download on cellular network available in context menu.
  • Clarification of action and confirmation.
  • Download status and progress.
  • Listened/unlistened in black/gray
  • Subscriptions tab. Tap to expand and show recent episodes.
  • Add to queue via context menu.
  • Confirmation. Any action without visual results uses a toast confirmation.
  • Rare functions in overflow menu.
  • Unsubscribe
  • Confirmation dialogue
  • Toast confirmation
  • Settings. Kept to a minimal level.

Interactive Prototype

A limited prototype was created in Axure RP to test the most essential interface elements.

Try the prototype on your mobile device or in a browser. For desktop browsers, use Ctrl - or Command - to zoom out. To view full screen on your mobile device, choose the second option on the left: App Home.

Please note the alternate condition available for first run setup.

Try the prototype (v1.2)

Evolution of the Queue Tab

Two major usability issues were present in the queue tab:

  • Episodes must be reordered
  • Actions must be applied to multiple items (mark as listened, download)
The Trouble With Contextual Menus
Listen Menu
Press-and-hold menus are tedious and de-contextualize actions.

Traditionally, press-and-hold contextual menus have been used to solve both problems.

This approach has multiple issues:

  • The press-and-hold function has no visual signifier and has poor discoverability.
  • Because the menu takes up most of the screen, context within the application is lost and it becomes difficult to see how changes have been applied.
  • This cannot be applied to multiple items at once and must be repeated for each episode. This is tedious and time consuming.

Additionally, user interviews revealed that ordering the queue was often too tedious to be worth setting up, and they chose to manually select the next desired episode after an item had finished. This creates a distraction when driving, a common setting for podcast consumption.

Multi-Select Interaction
Multi Select
Multi-select is powerful, but requires discovery and remains tedious

My early approaches focused on bulk actions like "mark as listened" that required multi select. In version 4.x, Android has moved toward a multi-select convention. Multi-select is a powerful function for batch operations and is well established as a convention. Unfortunately, This approach still requires some discovery for tap-and-hold to select convention. Once items are selected, another step is required to apply the desired action. Reordering remains tedious.

A New Approach to Queue Order: Handles
Grip
Handles use a physical metaphor to signify the reordering function.

Handles allow quick movement with visual feedback in one step. They are a common convention across both Android devices and web apps. The handles only appear on the queue tab, so the feature is more likely to be noticed. Instant visual feedback is given as items are dragged with a user's touch.

Remaining functions are placed in an overflow menu. The menu is quick to access and in the same part of the screen, making the remaining, less commonly used functions easy to repeat on multiple items.

Prototype Testing Results

Findings from user testing with Trevor, a self described podcast novice who is unfamiliar with Android conventions. He used Spotify as a reference point for understanding this app's interface. Tested with prototype v1.0.

  • He had difficulty adding podcasts. Headphone icon was difficult to understand. Coach marks absent in this version of the prototype, may have helped. He expected a search icon and text field rather than a multi-method add dialogue.
  • He worried that subscriptions would cost money. Label could be changed to "feeds" or "my feeds."
  • Suggested showing listened percentages, rather than listened or not listened.
  • Interpreted gray (listened) items as unavailable. Gray levels adjusted.
  • Discovered reordering grips on queue tab and attempted to use them, but stopped when the prototype didn't respond. When drag and drop is implemented, visual feedback will be required when the item is "picked up."
  • Testing the prototype from the onboarding state will remedy much of this confusion.

Testing with Mark, a power user and frequent podcast listener. "I break podcast apps." Uses Android devices daily, familiar with conventions. Tested with prototype v1.1.

  • He expected a skip back 15 seconds button. Took a while to notice the progress bar.
  • Adding podcast subscriptions was not obvious. Like Trevor, Mark expected a magnifying glass icon to signify search, even though search is only one of three options.
  • Advocated for an "add a podcast" button.
  • Expected a now playing tab, but was comfortable with player at bottom if it could be tapped for more detail. Advocated for multiple size options in player.
  • Understood handles for reordering the queue.