Case Study: Audible Channels

Discovery through Visual Design — Professional Work

Ameer Suhayb Carter
Portfolio of Ameer Suhayb Carter
10 min readDec 22, 2016

--

What is Audible Channels?

Audible Channels is like the audiobook version of Netflix. It’s a hub where users can listen to hundreds of original audio series and playlists handcrafted for every interest. Sounds dope right? But…

If this was a beta test and I asked you to identify where to find said content and quantify the number of content available — you wouldn’t have been able to do so.

The Challenge

Offering a new product to an existing business is hard. What’s harder is deciding how to deploy it. But the hardest part of all? Amid three years of internal debate and development hell, how do you revitalize interest in a product that had long been thought dead and egregiously bad?

As a Visual Designer + UI Consultant for Audible, Inc., I was in charge of the product’s future vision for both Apple & Android Devices. I helped usher in Audible Channels, a hub for all short-form audio content that would exist within the Audible App. To do this, I delivered a Vision Deck, UX Wireframes + UI Explorations.

Content + You

Content is becoming contextual, immediate & personal.

We must ask ourselves: What’s important? What is engaging? What speaks directly to the user?

Products like HBO Connect, and Twitter Moments are working to deliver custom content that connects and brings users closer to their favorite brands.

HBO Connect brings their super-fans closer to the shows they love. They provide them with behind-the-scenes access, a heightened voice on social platforms and exclusive goods.

Twitter Moments collects the best trending items and creates a story utilizing the most popular tweets about those moments.

Curated content positions the brand as a tastemaker.

We have the ability to set the course. Is what we offer something of legend? Or will it blend in with everyone else?

Audible has over 40k titles, and dozens of partnerships with publishers, news radio, journalists, literary authors and more. There’s literally no excuse for not leveraging these relationships to offer original content and exclusive access to developments from the media Audible’s customers consume.

We needed to leverage original content with curated content to deliver an experience that is unique to Audible and their consumers.

Channels, Today (as of 2015).

(In a compilation of images.)

If I told you that during it’s initial beta, that Audible had nearly 60–70 different channels, would you have believed me? Probably not. And if you went through the pain of scrolling near infinitely to get to them all, you’d be fatigued and pissed off. I wouldn’t have blamed you either.

The current channels experience was dull and lacked the necessary visual hierarchy to distinguish the concentrated level of content available on the channels platform. So I decided to do something about it.

Studies revealed a news-centric focus and users questioned the content we provided.

4 out of the 6 channels promoted were news. Boring.

After combing through months of UX research and focus group testing, I noticed one common thread throughout the app experience (from the app walkthrough to the FAQ): there was a focus on news-related content and it showed in the product’s initial advertising and messaging.

But here’s the deal:

Audible had 75 Channels and 14 Categories. Why not show off that diversity?

We had the content…at the time, our delivery method was half-baked and wasn’t utilizing it’s own potential. And with added pressure to achieve unity with the Amazon PRIME platform, the time was ticking to make something shake.

Product Landscape (setting the table)

I, alongside my awesome UX partner, conducted a thorough competitive analysis of the top podcast and audio applications in the Android and iOS app stores.

Some of the apps we analyzed. Yes…medium was actually really helpful.

Some of our research is proprietary so I can only show you a small sampling of our results in this matrix and some paradigms we used to describe primary user behaviors below.

We learned that we did not have basic features in the areas of discovery, content organizations, recommendations, category browsing and even search capability to name a few.

For on boarding purposes, most of the apps we analyzed had either presented with paradigm 1 or paradigm 2. Out of 15 apps, we learned that 40% of apps had paradigm 1 , 25% had paradigm 2 and 35% offered both.
Red = We don’t have it. Green = we have it.

We weren’t a competitor. We hadn’t hit the benchmark, let alone a vision we can reach that exceeded it.

Actionable Insights

And, if we wanted to compete, we had to bring it.

Content is created every second. It’s the reason there are 80 million photos posted to Instagram or nearly 1 billion tweets generated daily. What separates the best from the noise is how the content is delivered. Delivery is king.

The Audible platform shouldn’t exist on an island. There are myriad of touch-points we can leverage to bring users into Channels.

The Explorations

Component Development

The essential aspect of discovery stems from immersion. This is not the same as you being apart of a world like you would in a fiction novel, we’re talking engagement and the ease of exploring content to listen to, save and cherish.

To achieve high user input, creating a system that touched on the core tenets: curation, customization and engagement needed to be established.

The Architecture for Element Representation

Architecture: The core tenet of curation is only as good as the content you choose to display. What haven’t we shown to our listeners before? What content have we highlighted? Can we remix in a way that seems fresh?

In fact, showing individual articles / episodes were non-existent, topics felt bland and channels, while important, got in its own way due to their large art sizes.

One of the immediate actions I took was to take the rectangular sizes of channels and topics (which were mandated to be rectangular through Audible’s Design HIG) and shrink them. Where one big rectangle spanned the full width of the device, but was 2/3 less tall than it’s original counterpart. For articles, I had to request a pattern adoption through the Product Team (responsible for the HIG) and get over 50% of the Audible Design Team (50+ strong) to agree to accepting it as an official pattern.

That was huge. And contributed to the biggest shift in how Audible presented its content.

You have some building blocks — now…put them together to make bigger blocks.

Components & Arrangements: After getting buy-in with the building blocks, it was time to put them together to make bigger blocks. The big topic squares formed into a grid, you see a channel / topic full width with 4 smaller channels under it, or a full width channel with surfaced articles, etc. Then I put them in a few arrangements. What I settled on followed somewhat of a 1 x 4 x 3 grid: where the 1 represented a highlighted topic / channel, the 4 were a stack of channels or topics and the 3 represented a list view of 3 articles, a channel highlight with 2 episodes or a topic highlight with 2 articles.

Confusing right? At first. After some real content was inserted, it started to make sense, but it didn’t turn out how I liked.

You’ll see why.

Component First UI Pass

Look at all those channel stacks! They look so good isolated.

I transposed the component frames with real content. Looks good right? Take a look at this:

This is insanely cramped and while it’s loaded with content — it is almost overwhelming. Not to mention, the 1 x 4 x 3 Grid was not effective for content arrangement nor content variance.

Then I tried it in white.

Felt better, but since the mandate was to move to dark theme, this couldn’t do. Back to the drawing board.

Final Content Types

Overview of Content Types

It breathes!!!

You can tell, from the 15 different treatments for channel, topic and category views that it would be a) hard to keep track of, and b) too much logic to implement in a short period of time. So I spent some time condensing my first pass into 4 essential pieces. This is what I came up with.

The Final Content Types were broken up into 4 different zones following the 1 x 4 x 4 Grid:

(1-Grid) Featured: Based on the Audible Content Team, they would be responsible for surfacing the highlighted channels for a particular campaign. I wanted to ensure that the user had important metadata that pertained to the channel and emphasized imagery to capture user interaction.

Breakdown of the Featured Card

(4-Grid) Topics: Based on the Audible Content Team, they would be responsible for surfacing popular, new and other engaging topic/categories for the user. As you’ll see, there is heavy emphasis on lifestyle imagery to help the user connote the type of environment they can be in as they tune into the topic’s channels. You know what the subject is about, it’s vague enough to evoke curiosity and you are aware of how much content is within each topic card.

Breakdown for Topic Grid

(4-Grid) Channel Grid: Based on the Audible Content Team, they would be responsible for arranging channels to surface on the explore tab based on user interaction. I continued the 1 x 4 x 4 rule and displayed only 4 channels for scan-ability.

Breakdown for Channels Grid

(4-Grid) Category Card: An idea I pitched to surface a category and reveal the top three channels associated with the category was well received and was added to mix up the content discovery between topics, channels and featured channels. Now you can have news, or science, or “popular channels”, channels stacks based on the Audible Editor’s picks…it’s endless and stupidly simple.

Breakdown of Category Card

Putting It Together

Naturally, it makes sense to put the elements together to see if such a format is cohesive and user friendly.

The 1 x 4 x 4 grid devised in conjunction with work in Audible’s PRIME Book Club & my directors’ stewardship became a feature adopted for the Audible main discovery page layout.

I’ve put together a quick Invision prototype for scrolling through the explore tab and a channel PDP (product description page).

When presented, our concept made a lasting impression with all stakeholders and was slated to be built in stages with the inclusion of favoriting, tag system, offline downloading and having a better sense of curation for channels discovery. We decided that we would go in this direction and while it was going to be slow, we had a launch plan. We knew that Channels Beta to Channels V1 would have favorites, tags and downloading. Channels V1.5 would introduce better discovery and enhanced deep linking in Channel PDPs. Channels V2 would have more enhancements until Channels V3 for dark theme to match the rest of the Audible Products and extensions to Alexa, and other Amazon hardware / software.

It felt like a huge win. Except…

The New Audible Channels (what was shipped)

Still white. But hey, it has my checks and add buttons! Even my original channel “highlight”

The launch of Channels couldn’t have been anything less than a snowball effect of craziness which led to many debates on launch dates, if the product was still a beta, a full scale PRIME launch and more.

I left Audible two weeks before beta launch, and you can see the current product of Channels here as it’s live! I’m curious to see where it goes. They have a great core team that will nurture the product to the vision we all shared.

I’m very grateful for the experience and I’d love to get a chance to work with the Audible design team with other products. It was a great ride nonetheless and I wish them well. :D

Ameer Carter is co-founder of the mother/son dual purpose consultancy KM&A, bridging the gap between design and industrial & organizational psychology to inspire businesses to build better selves, thoughtful leadership and products for others. We are currently scouting projects within Fashion, E-Sports, Education and Manufacturing industries and AR/VR environments.

For all contact, reach out at ameer@kma.agency

--

--