shortorange-header.jpg

ShortOrange - The Cloud Podcast Player

ShortOrange is a free SaaS podcast player available on web and Android (formerly iOS). I work alongside two of my Android developer friends, and handle design / product strategy for the applications as well as help shape the ShortOrange identity.

I joined ShortOrange after the backend catalog system had been developed and set up with a rudimentary Bootstrap front-end to stream podcasts and save subscriptions. My goal, and reason for joining, was to expand our feature set and grow our user base while providing them a smoother experience and clean interface.

Contents

 

The ShortList & Timeline: Reducing playback friction

After we had implemented progress tracking, users with accounts could easily identify new episodes from the podcast feed pages. However, it was still a tedious (and network-intensive) process to switch between each page of podcasts, loading an entire page of old podcasts users had already listened to, when they were often just going to find the first / newest episode.

One of my biggest goals with ShortOrange was to make it easier for our registered users to access specifically the episodes they wanted without wasting time or data. Couple this with the fact that a queue and an aggregated view of all podcasts together were two of the most heavily requested features, and the ShortList and Timeline were born. I came up with the name both because "The ShortList" is another riff on the name ShortOrange, but also because it carried the connotation of being part of an exclusive, or selected club.

 

How should we measure success?

Setting up the right KPIs for this project was important because I wanted to measure a change in behavior with a completely new feature. Therefore, I couldn't measure one metric prior to release and then after and get a useful result but with Mixpanel, I was able to set up various events to track and segment them by what I wanted to study.

Primary Metric: Media Plays vs Page Views

The relationship between media plays and page views is important because they directly exhibit how much effort (how many pages a user has to go through) is required to achieve the primary purpose of ShortOrange (listening to podcasts).

 
High-level diagram of how the quantity of Page Views being high in relation to Media Plays causes friction, and how a Timeline can help.

High-level diagram of how the quantity of Page Views being high in relation to Media Plays causes friction, and how a Timeline can help.

Before implementing the ShortList and Timeline, there were significantly more Page Views than Media Plays. This makes sense because users were required to navigate to a podcast feed page to see if there was anything new that they had not played yet, whether or not there was anything for them to do there.

So in order to be successful, the relationship should show an increasing ratio of Media Plays to Page Views for logged in users. Page Views may increase globally as a result of increased usage overall, but the amount of Media plays should ideally increase at a faster rate if we are successful. This study should exclude unregistered / logged out users because they don't have access to the features that would affect those metrics.

In this case, this was the one main metric that was the most important to the release, but others were tracked as well. These included adoption, episodes added to the ShortList, episodes marked complete from the Timeline, etc.

 
Exploration of UI for handling multiple individual episodes from a given podcast on the timeline, as in some cases, a podcast may include multiple episodes back-to-back.

Exploration of UI for handling multiple individual episodes from a given podcast on the timeline, as in some cases, a podcast may include multiple episodes back-to-back.

Working timeline shown with progress-based filtering. This enhancement tested well with regular users; some mentioning they would be inclined to just bookmark this page and navigate straight here since it includes what they would use ShortOrange reg…

Working timeline shown with progress-based filtering. This enhancement tested well with regular users; some mentioning they would be inclined to just bookmark this page and navigate straight here since it includes what they would use ShortOrange regularly for.

In the month following the release of the ShortList & Timeline, the gap between media plays and page views converged (while both rose), demonstrating I reduced friction in playback.

In the month following the release of the ShortList & Timeline, the gap between media plays and page views converged (while both rose), demonstrating I reduced friction in playback.

But I want more data!

Episode Completion

I tracked when episodes were marked complete from the episode options on the Timeline, but did not track the completion of episodes via the ShortList.

Firing the event when an episode completed on its own OR when it was skipped (it's very common for users to skip the "goodbye" portion of podcasts) would be very useful insight about the usage of the ShortList.

New user registrations from the ShortList and Timeline account walls

I exposed the ShortList and timeline to the logged-out users with a pathway to registration in order to encourage users to sign up for accounts. 

However, I neglected to set up tracking on that funnel to see how much of a motivating factor for signing up the features were.

 

logo-old.png

Old logo

tiny_green_logo.png

New logo
as icon

orange_white.png

New logo
in mono

New logo as
CSS animation

Redesigning the ShortOrange Logo

ShortOrange wanted to step up its brand identity and include symbolism related to the product with the logo- whether it was headphones, a speaker, a cloud, etc.

The creators of ShortOrange were attached to the "citrus" type of orange, and they also really liked the idea of the orange slice, originally represented as a full cross-section of an orange through the middle. My priority for this project was to create a versatile, modern, and fruit-based logo that alluded to the idea of a web podcast player and could be used independent of any text.

Avoiding the Limewire Effect

 

When I asked iTunes podcast listeners about the existing ShortOrange logo, many said it reminded them of Limewire, the infamous service through which songs were at one time illegally distributed.

Based on this and how common other existing wagon-wheel-like logos out there were, one easy constraint I could set was to avoid the perfect circle cross-section as the main component of the mark.

 

 
Limewire - Not who we wanted to be associated with

Limewire - Not who we wanted to be associated with