VICE Media Internship: Encouraging Users to Discover, Listen, & Subscribe to VICE Podcasts
--
Role: Product Design Intern
Team: Kevin Li (Engineering Intern)
Timeline: Summer 2018, ~8 weeks
Overview
During my internship at VICE over summer 2018, I was paired up with the engineering intern, Kevin, to work on a project for VICE Podcasts.
VICE has steadily been investing more resources into podcast production across its network. Some of their most popular and regularly updated podcasts include The VICE Guide to Right Now, published a few times a week highlighting a single story from a vertical within the network, Biscuits, a hockey podcast from VICE Sports, and Radio Motherboard, a series from Motherboard covering various technology topics.
This is great—podcasts are becoming an increasingly popular content medium, rivaling articles and videos. But there’s a problem: despite VICE’s growing investment in podcast production, there’s no dedicated way to discover or listen to them on VICE sites or within VICE apps.
The Context
From both a user and a business perspective, there exists a clear problem.
What’s wrong with the way things are?
VICE users want to discover podcasts that are new and interesting to them. However, they don’t realize VICE produces podcasts because:
- VICE podcasts are not readily distinguishable from other forms of content on the site.
- There is no dedicated way to discover or listen to podcasts on the VICE site.
This is significant because VICE is investing a considerable amount of time, energy, and resources into podcast production as a new content medium to compete with other media companies in the marketplace who are expanding their podcast offerings. If users don’t engage with VICE podcasts, VICE falls behind and stands to lose more than it is gains with this foray into the podcasting sphere.
Deconstructing the Existing Podcast Experience, or the Lack of One Thereof
Right now, when VICE editors want to publish a podcast episode, they write an article for the new episode and embed the podcast (hosted through aCast, a podcast hosting platform VICE is partnered with) into the article. This podcast then appears in the same article feed as other stories.
Looking at the VICE home page, can you spot the podcast hidden amidst the rest of the content? There’s no indication that it’s a podcast aside from the fact that it’s themed “The VICE Guide to Right Now Podcast.” No album artwork displayed, no nothing. If users can’t tell an article from a podcast after a cursory glance at the home page, how are they expected to actively listen and subscribe to these podcasts?
Similarly, once a user clicks into a podcast from the home page, they are presented with an article page describing the podcast episode. Only after scrolling to the very end of the page do they find the podcast, seemingly embedded into the article as an afterthought:
Users are notorious for having short attention spans on the Internet. Why is the listening experience being pushed to the end of the page, and thus the end of the experience? Shouldn’t the podcast be front and center once a user makes it onto this page?
Investigating the Problem Space
Before jumping to any conclusions, we conducted in-depth research across the problem space to uncover business needs, empathize with our users, assess the data, and complete a competitive analysis to learn how other media companies are designing their podcast experience.
Uncovering Business Needs
To learn more about VICE’s podcast strategy, we went straight to the source. We met up with Dory, the executive editor, and Sophie, a podcast producer.
Throughout our conversation, it became pretty clear what they wanted us to do: build a podcast landing page, i.e. a page where all podcasts across the VICE network are showcased neatly in a single hub.
But would this be the best solution? How would users even discover this theoretical landing page in the first place? Would a landing page even be useful if we weren’t taking into account the modes by which VICE users were entering the site (i.e., the entry points)? As we proceeded with our research, these questions lingered in the back of our minds.
Empathizing with the User
Research Procedure In order to investigate this problem space and get a better sense of the general listening and discovery habits of podcast listeners, we conducted user research among 10 podcast listeners, through both in-person contextual interviews and Google survey. We wanted to understand how, when, and why users listened to podcasts in general. We also asked questions to discern the current visibility and discoverability of VICE podcasts, specifically. Here is a sample of the questions we asked:
Findings
- Most people value podcasts due to relative ease of consumption. Most people listen while commuting/doing other everyday tasks. Everyone polled used a mobile app, usually Apple Podcasts. Every podcast listener falls within this listening spectrum. Most fall somewhere in the middle:
Why people listen to podcasts: 70% of individuals interviewed enjoy their ease of consumption. 30% of users are captivated by their storytelling ability.
When people consume podcasts: While commuting (90% of interviewees), doing chores, at work, and just to relax.
How people listen to podcasts: 80% use the Apple Podcasts app, while 20% use some other aggregating mobile podcast listening app.
Most important thing for people in a podcast: Interviewees mention personalities of the host(s), production value, story analyses, production value, and storytelling ability. Almost half of interviewees (40%) mentioned personalities of the host(s) as a key determinant of a good podcast.
How people discover podcasts: 70% hear of podcasts through word of mouth. Others forms of discovery mentioned include Apple Podcasts, Google, interpodcast advertising, external websites, and Facebook groups.
And finally, the most staggering finding of them all:
When was the last time you listened to a VICE podcast? “Wait, VICE has podcasts?” “Never…I didn’t realize they had podcasts?” The majority of interviewees had no idea VICE even produced podcasts.
Assessing the Market: Competitive Analysis
To get a sense of how other media companies were executing their respective podcast experiences, I conducted a competitive analysis. I examined companies such as Vox, Buzzfeed, NPR, CNN, The Atlantic, The Washington Post, and The New York Times, analyzing the way they design for podcasts.
I soon discovered that podcast discoverability wasn’t just a problem for VICE — podcasts produced by media companies lacked in digital visibility across the board. Media companies are choosing to depict their podcast offerings on landing pages that are relatively difficult to discover, typically linked to discreetly in the navigation and not immediately apparent to the viewer.
Product Strategy: Translating User Needs Into Design Requirements
In order to ensure that the podcast experience I designed would satisfy user needs, I derived a set of product requirements that the experience would have to deliver upon, based off findings from user research:
Approach
By creating a quick bare-bones user flow, I discovered that there are two ways in which a user can hypothetically encounter a VICE podcast: through a social link, or by organically visiting vice.com:
This is why we couldn’t simply make a landing page for podcasts and call it a day: VICE users enter the site from many different points, and a standalone landing page is largely undiscoverable. We needed to assert the presence of podcasts throughout the entire VICE system.
We decided to create a three-pronged approach to the podcast experience by redesigning the podcast experience for the home page and podcast article page, and creating a landing page to showcase all podcast offerings.
By consulting with the analytics team, we were able to validate our design approach to tackle the two entry points identified in the above user flow: analytics revealed that the greatest traffic on vice.com occurred on the home page and article pages. Thus, it made sense to design with these entry points in mind, as this is where most users end up.
Improving Discoverability of Podcasts from the Home Page Feed
How can I differentiate the way podcasts are represented on the home page from purely text-based, article content? Because I was designing within the existing VICE design system, I couldn’t introduce some wild podcast experience into the home page. I had to take into consideration how podcasts would live alongside VICE’s articles and video. The first idea I considered: the VICE home page was already divided into separate components under headers such as Latest, Features, and Videos. Why not simply introduce a new header titled Podcasts? Could it really be that simple?
I quickly ruled out this idea. While VICE does have a group of dedicated podcasters, there aren’t yet that many podcasts regularly being updated and so the same four most recent podcasts would probably be visible on the home page for a good amount of time. In the context of a media company’s home page, which is supposed to be constantly evolving and updating to reflect the latest content, this experience would be stagnant and underwhelming. Besides, a podcast section would appear really far down the page on mobile, decreasing discoverability.
As an alternative, my manager suggested I explore how I could integrate podcasts into a revamp of the home page he was working on that hadn’t yet gone live on the site at the time. This revamp eradicated the “Video” division on the home page, instead integrating this content into the Latest feed with all VICE’s most recently published articles. So I mocked something up:
This made more sense—podcasts would appear the feed when they were published, and still considered relatively new content. Podcasts would be more visible on the homepage when they are first published.
But aren’t we very close to where we started? How would we emphasize that this was, indeed, a podcast? I identified the content requirements necessary to create a comprehensive experience:
Visual Design
Which play button is most intuitive?
By allowing users to play the podcast on the home page, we introduce a new component into the design: the play button. Not only does this visually distinguish a podcast from a regular article on the home page, but it also allows users to listen to the podcast with just one click, while passively skimming the rest of the home page. I mocked up a few explorations for how this play button could look:
After reviewing the buttons with the rest of the team, I ruled out A and B because they didn’t align with the existing button style guide that the rest of the VICE design system implemented. I ruled out D because it felt too impersonal considering the lack of the call to action text element present in C. Yet C looked still looked too bulky, and its rounded corners also deviated from the unrounded edges of the VICE button style guide.
During a critique, someone suggested I indicate the duration of the podcast in my component. Keeping in mind this feedback, I iterated upon the play button, coming up with a more modular, sleek visual treatment that considered every step of the play experience, including the initial, played, and paused state:
How can we encourage users to subscribe?
While chatting with the VICE product manager about our project, he mentioned that a key business goal for this podcast project should be for us to increase subscriptions to VICE podcasts. He emphasized the need for subscribe links that would be visible even from the home page feed. VICE podcasts are available on Apple Podcasts, aCast, Stitcher, and Google Play. Using this content, I explored what these subscribe links could look like:
I ruled out B because the subscribe element was secondary in relation to the play button, and treating them similarly in terms of UI (both of them being black buttons) would crowd the interface and complicate the interaction from the user’s perspective. I ruled out C because even though the visual treatment was different than that of the play button, the text was still too bold and even the fact that the buttons existed gave them too much importance for a secondary action. I decided to go with A because the unweighted font style meshed with subscribing as a secondary action.
However, in order to avoid introducing too many elements on the interface at once, which would look too messy, I decided to only show the subscribe links if the user plays the podcast, because playing the podcast indicates interest in exploration and potential subscription. Based off our user research and personas, this made more sense as opposed to showing every VICE user an option to subscribe, because they might not be interested in podcasts and are browsing the home page in search of other content mediums.
Prototyping the Play-Pause Animation
I prototyped the transition between the initial, played, and paused states in Principle:
Final In-Feed Podcast Component
I integrating the above features into a final home page podcast component:
Designing a Podcast Page Template
What would happen if a user clicked into the podcast on the home page, or if they came across a link to a podcast through a social media feed like Facebook or Twitter? I identified key content requirements I would have to integrate into the page:
Building off the existing VICE article page design, I sketched out different ways I could integrate these requirements into a clean, versatile template. Pictured below are the final contenders:
I eliminated A because the timeline of recent episodes in the sidebar created an excessive amount of white space on the edge of the page, which wasn’t in line with the rest of the design system’s sparing use of padding.Also, the sidebar in A took up space where a vertical advertisement was supposed to be placed.
I chose B because the podcast was embedded at the top of the page, which made sense because playing the podcast is the primary action of the page. In addition, the album artwork was front and center, emphasizing the theme and personality of the podcast. It left room for a vertical advertisement in the sidebar. It also recycled an existing modular VICE feature that provides users with suggestions for similar content. In this case, I recycled the feature to showcase other episodes from the podcast.
However, there was something missing: was there a way to make it even more immediately obvious to the user that this was podcast content? I explored the way VICE designs for the other content medium they create: video. VICE videos are showcased within a special VICE video site, video.vice.com, which differs in visual treatment from the white background of VICE.com. By treating video pages with a black background, the design draws attention to the video playing—the primary action—and away from other elements on the page:
What if I adopted this black background for design option A that I had sketched out initially? Its function would be similar to that of video.vice.com, sleekly emphasizing the primary action of the page—listening to the podcast. After iterating on this idea, I ended up with this final design for the podcast template:
Podcast Player
Product Vision: Why a podcast player?
Our vision in integrating a podcast player into the website was based on extensive research and strategic analysis regarding the benefits such a feature would bring and its feasibility on a technical level. Upon discussing with Kevin, he assured me that while no similar feature existed on the VICE website it would be doable to integrate into the existing system from a technical standpoint.
Strategically, a podcast player would yield immense benefits from both an experiential and business perspective: not only would it allow users to easily listen to VICE series, but it would also help VICE build a podcast audience, allowing them to grow subscribers and expand the reach of their podcast offerings. A player would increase the chances that VICE visitors would convert from listeners to subscribers, providing users with a streamlined listening experience.
What would a podcast player look like?
To explore this question, I sketched out three different ideas I envisioned as possibilities for the podcast player:
I eliminated C because having the podcast player in the navigation wasn’t very obvious because there were already so many elements present in the nav. I eliminated A because having the player in the header would not make sense for certain superlede pages which featured full-screen images dominating the top of the page. This style was especially popular among certain verticals like Garage, VICE’s art and fashion site. I decided to go with B because it worked across any page, superlede or otherwise. A tradeoff I faced with B, though, was that moving the mouse to the bottom of the page could open up the MacOS dock. But this tradeoff seemed bearable compared to the other, weaker options of A and C.
I was also worried that the mere existence of a player in the footer would crowd and complicate the interface. My manager advised me to design two states for the podcast player: a minimized state that would serve as the main state of the player, neatly and sleekly fitting into the existing design system, and an expanded state that would provide more information about the episode playing. The minimized state would transition into the expanded state when the user hovered on the player, and transition back when the user hovered out of it.
I iterated upon this idea, eventually landing on this final design after extensive critique and advice from my manager:
Another designer on the product design team, Jon, helped me prototype the transition between the minimized and maximized state in Principle:
Designing for Mobile
How could I extend the existing VICE mobile design system to seamlessly integrate podcasts without disrupting the mobile experience?
According to the analytics team, a considerable amount of VICE users use mobile devices to access the site. As a result, I designed mobile versions of the home page, podcast template, and podcast player components to address the mobile experience. After countless iterations, critiques, and testing, I finalized the following mobile components, using my desktop designs to guide the mobile experience:
Landing Page: Designing a Home for Podcasts
The final stage of the podcast experience necessitated the creation of a landing page to showcase all VICE podcast offerings across the verticals.
I analyzed the landing pages of competing media companies I assessed at the beginning of this project, in the competitive market research phase. I noted the entry point, features, and content they tended to feature, using this information to inform my design of the VICE podcast landing page.
I needed to design two screens for the landing page: an initial home page that showcased all podcast offerings, and a podcast-specific page that would appear once a user clicked into a particular podcast from the home page:
After iterations and extensive critique, I finalized my design:
Final User Flow
Desktop Flow
Mobile Flow
Final Prototype
I prototyped the final desktop and mobile flows on InVision.
Check out the Desktop prototype here, and the Mobile prototype here.
Reflection
This was my first ever professional experience doing product design, and I learned so, so much. Learning about Nielsen’s usability heuristics in class is all well and good, but actually being in the workplace, working on a real project with tangible deliverables within the scope of a complex design system—that’s a completely different experience. I had to find a way to build off the existing design system seamlessly, without disrupting its visual and experiential guidelines.
This project taught me so much about the importance of communication within a team. Collaborating with Kevin, the engineering intern, regarding the technical feasibility of my designs was integral to delivering our proof of concept at the end of the summer. Hearing the perspectives of others such as the product manager helped me contextualize my design process within the goals of the business as a whole, and helped me make sure that my design was not just responding to user needs but also business needs.
If I were to start this project over, I would consider creating mobile designs before desktop designs. A large portion of VICE users use mobile devices, and while this project required the creation of both mobile and desktop experiences, I wonder if creating a mobile-first product would have allowed me to come up with a more intuitive mobile design.
Next Steps
- User testing. Because of time constraints, I was unable to user test the designs, instead relying on frequent design critiques with my manager and the rest of the product design team to guide my work. I’m curious to see how users would react to this product, and update my designs accordingly.
- Create mobile landing page. Unfortunately, due to time constraints, I wasn’t able to prototype the mobile version of the landing page.
- Prototype the experience for other verticals. I prototyped the podcast experience for VICE.com, but what would the visual design of the product look like for other verticals?
- Design more engaging album artwork that emphasizes the vertical from which the podcast originates. I used the existing album artwork to create my prototype, but I think it would be fun to see how we could update those album artworks to make them more exciting — plus, it’d be a great way for me to exercise my graphic design skills.
