This American Life
A UX refresh on This American Life’s homepage
Role
UX Designer
UX Researcher
The team
UX Bootcamp submission
Timeline
June 2021 – Sept 2021
The challenge
New listeners are unsure what the homepage offers
This American Life is a leading podcast show with millions of listeners, however their homepage is out of date and their user experience is neglected. In a landscape of podcasts, the original radio podcast’s homepage is dated and missing possible growth avenues.
The idea
The homepage needs to showcase the energy their shows reflect and to work for new and exisiting podcast listeners and. I want the homepage to increase engagement, onboard new users, and to help open up a new revenue opportunities.
UNDERSTAND
This American Life and Me
This American Life produces informative entertaining audio shows based on stories around a theme. Every episode, from the first broadcast on radio in 1996 to the present, is available on the website.
- The website hosts new and archive podcasts
- Spotify and Apple Podcasts host the 10 latest episodes.
- Users both new and old come to the website
I’d seen the website before the current one and downloaded the app. Here’s a favourite episode.
New Listeners
Today, I’d like to focus on new listeners and their journey.
As a UX professional, I’d like to take a brief look at the front page and see what ideas come to mind.
The website had not changed in 6 years, as per new episode, the content had just been updated. It was outdated and with the recent boom of podcasts, This American Life appeared to be falling behind.
RESEARCH
Let’s mark it up
A few options for what to do next sprang to mind, and the most straightforward decision was to do a heuristic markup. I went over the header, landing page, recent episodes, suggestions, and footer to see what problems they have and what solutions they offer.
Findings
- No context – The landing page has an image of this week’s episode, which is confusing for new listeners to understand what the site does.
- One dimensional – There is an absence of interesting transitions, interactions, or animations.
- Lack of order – The way the sections are organised is disruptive. The user flow needs to be reconsidered.
Guiding usability
I like to draw upon a number of principles that take a number of factors into consideration that could impact the experience. I used a slightly modified version of Dr David Travis’s 247 Web Usability Guidelines as a basis for my Heuristic Evaluation.
The main failings I want to explore further were:
- The value proposition is clearly stated on the home page (a tagline or welcome blurb)
- Users will understand the value proposition
- By just looking at the home page, the first-time user will understand where to start
- The design of the home page will encourage people to explore the site
Looking into the landscape
This American Life’s digital strategy is not an iterative process, the product (website and mobile App) has not changed for over 6 years. So, what features in the current audio listening market should they have as standard?
Findings
Features that have become standard:
- Continue where you left of between devices
The episodes are accessible on the mobile app and desktop and are linked. So, a user can continue their listening experience from one device to another. - Save, list and organise your content
Listening episodes for later or bookmarking your favourite content is another tool to organise and select your content needs. - Suggested content based on your history
Competitors take usage data information to build content lists for the listener. Discovery of new episodes seems to be a core tenet in keeping listeners engaged.
Huge library
I then took a small sample of forum pages and pieced together their thoughts on the homepage. I discovered that many of the pages were related to finding content from its 20 years of the show, known as The Archive, and deciding upon what to listen to next; which is incredible as the homepage has a recommended section dedicated to this.
Value Proposition
Serial, a spinoff show from This American Life, was sold to The New York Times for $24 million dollars.
Despite the homepage’s dated design, This American Life is a highly valued product in this field. It just happens that it’s not marketed or built to support onboarding and retention.
Creating features for the Archive has the possibility of meeting customer needs, increasing onboarding and opening a new revenue stream.
The value propositions demonstrates how an approach to the content could be used to deliver needs for the customer.
ANALYSIS
What the user research says
The research had given some cues that could be used to validate the design decisions.
A landing page that communicates This American Lifes value
A userflow so they know where they are, whats here and where they can go
Highlight 4 beginner episodes that show variety and depth
DESIGN
Deciding on design
TESTING + IMPROVEMENTS
The research insights were the gateway to the design. Hand drawn sketches became three low-fi wireframes (in Figma) and were then considered for down the hallway testing (with non-UX colleagues).
Does the design communicate where the user is, what’s here and where they can go?
One answered those questions and I ideated further. In an ideal situation metrics from useability tests would be used to justify those design decisions to the stakeholder.
Presenting the depth of the archive low-fi, high-fi to high-fi prototypes.
Selection and choice chips low-fi, high-fi to high-fi prototypes.
Joining the dots
This was an evolution of the brand rather than a full rebrand and many of my color decisions were made based around the brand having a sharp and information style. I used the WCAG2 Accessibility Guidelines to pass/fail colour combinations font, background and buttons.
the final screens
The New Homepage
The new homepage has an improved user flow, a new landing page to introduce This American Life, a section to highlight what The Archive is, how and where you can listen, selection chips to guide users to content, a select 4 recommended podcasts and a section for the most recent episodes.
This American Life – Homepage redesign
CONCLUSIONS + LESSONS LEARNING
Reflections
Beyond the user interface, the user flow was the key takeaway to the process.
This is the third iteration and looking again there some simple changes that can be made to improve upon.
- The headings typeface should be more inkeeping with the print aesthetic.
- If this is built for new listeners, then the episode sections probably shouldn’t be there. I built a wireframe without the episode section, it felt much better.