Overcast for Android in an hour

Download Overcast on iOS

I have been using Adobe Experience Design as a prototyping tool a lot lately. I wanted to get some practice in. So for an hour on Friday after work, I decided to design Overcast: Podcast Player as an Android App.

Splitting Playlists, Podcasts into separate screens

Overcast puts both playlists and subscribed podcasts together. This becomes flawed when a user starts subscribing to a large amount of podcasts.

I personally subscribe to more than 30 podcasts (don't judge me), scrolling through a list that large can get tiresome and frustrating to find the podcast i'm looking for.

It follows that the more podcasts someone subscribes to, the more playlists they will create. This then becomes an exponential problem.

Having these listed in such a way These are distinctive areas should be separated I would also add a setting to resize the cards down to a much smaller scale. Power users can show a 4x6 scroll-able card view, while casual users with few subscriptions have a simpler interface to use .

Podcasts View

Seperating playlists also allows more detail to be shown rather than just a name. Here we show a selection of the podcast episodes in the playlist so the user knows more about the playlist than just the name.

Playlist View


Having an upfront search/filter also alleviates this issue. Results come back with matches with subscriptions.
This can also be expanded upon to also make finding a new podcasts easier by showing potential subscriptions related to their search.

Add Fab

Add Button This is mostly a platform change. The Floating Action Button (Fab) is used for a promoted action. In this case to add a new podcast. This changes on the playlists screen to represent adding a new playlist.

Settings upfront

Settings placement Overcast iOS advertises itself as being "powerful yet simple". Hiding the settings under the app's icon is clean, but presents problems for being simple.
Having the powerful features hidden doesn't do the power of the app justice. Moving settings to a tab of it's own helps with this issue. The tab is clearly labelled.

Nothing says settings like "Settings"

This does become a localisation issue (There are pros and cons to icons). A new user is much more likely to customise the app if they can clearly and simply see where they should go to do so.

The podcast screen

Selected Podcast Screen

The flaw on this screen is the two tap to play. The changes for android makes tapping the podcast list item play that podcast. Extra options for sharing, favouriting adding to playlists, playing next and archiving are hidden behind the more_vertical icon.

The per app settings here are hidden in contrary to the navigation. This is because I approached this screen's primary function to be playing episodes. The actions on episodes would be again made clearer by changing from icons to words.

The toolbar on this screen is coloured to associate with the podcast image's colour.
This is done effectively in Pocket Casts, this seems to be against Marco Arment's (Developer of Overcast) general design philosophy.

I believe it can be done well, however I can see how a shoddy solution could easily produce an extremely sub-par design.

On Adobe XD

I am very happy with the speed that I produced this prototype with. I am excited for future updates and the eventual full release of the product
Download the design

Stay tuned for design for Overcast Desktop and Overcast tvOS

read more:  What is a Pure function? Explained simply with examples
read more:  Sword Art Online: Ordinal Scale Review