The Media Lunch Break podcast uploads on a weekly schedule covering the latest in pop culture news. They have also expanded their show segments to include “reading assignments”, where the hosts assign a comic to each other to read and they review it as part of their show. The podcast can be found streaming on all major podcast platforms. The problem was that their old website was not fully developed as a functional aspect of their podcast’s online presence.
The Media Lunch Break hosts have worked hard to grow their show into what it is today. They like their brand identity, which is present in each episode they record and they want to update their website to function as a home hub for their brand. I helped bring life to their placeholder website with fleshed out functionality that acts as an extension of their weekly episodes.
While I knew that the desire was for a redesign of the shell website, I wanted to understand better what that meant to each host. I conducted an interview over zoom with the hosts and discussed their visions for the website. Through the interview we came to the conclusion the hosts ideally wanted the following featured on their website:
With an understanding of the hosts' visions, I conducted market research to understand how other podcasts utilize their websites as an extension to their audio focused entertainment. This research involved analysis of direct and indirect potential competitors.
Podcast episodes are engaged through popular apps such as Apple Podcasts, Spotify, and Google Podcasts. Since podcasts are audio format entertainment, there needs to be extra content value outside of the main episode upload schedule to draw loyal listeners to the website of the podcast.
To prepare for user testing I performed an initial moderated user test over Zoom with the hosts. The main purpose of this test was to ensure the prototype functioned as the hosts had in mind and revise any key points needed before going to user testing.
Once seeing the website, the hosts felt that the top navigation bar needed to be fleshed out and the three cards at the bottom of the home page needed to be revised. Instead of the recommended reads and watches pages that would break up “reading assignments” by category, they wanted to have pages featuring their personal top recommended comics and movies, and an additional page added for all “reading assignments”. They also wanted to access the shop page through the top navigation bar.
I took this feedback and revised the prototype, however I cautioned them that “reads”, “watches”, and “reading assignments” may be confusing navigation items and I was not confident users would be able to navigate through the site with ease. We determined that this would be further exploded through user testing.
Based on various feedback from 6 participants, I continually iterated my design over the span of 4 weeks- with 4 major improvements:
★ Originally only parts of cards were clickable.
★ Based on feedback, this did not allow for users to naturally flow through the website as it created unnatural target points.
★ Originally designed two pages to differentiate host’s recommendations of watchable media and reading media.
★ Based on user interactions with the site, the split pages caused confusion between what is a host recommendation and what is a “reading assignment”.
★ Originally “other places to listen” call out was placed on the bottom of the episodes page.
★ Based on user interactions with the site, the majority of users were not able to locate this call out when asked.
★ Allows quick location and promotes engagement on the major apps users use to engage with podcasts.
★ Originally “show older” button was designed as clickable text to load additional reading assignment cards.
★ Based on user interactions with the site, some users did not locate this clickable text.
★ Allows button to stand out on page, highlighting that it is interactive.
This was my first-ever UX project outside of structured learning projects (Huzzah!) I am extremely grateful to have been brought on to this project so I can see what it is actually like to build a website for real people. On that note, a few closing points and things that I learned:
The main functionality of the website was the primary focus for this phase of the project. It’s important to get the core function of the site down before adding visual bells and whistles, such as finalized photography. However, the majority of people are not going to have a full opinion until they see something that is colorful and full of pictures, so placeholder images are a great asset to make use of.
1 Ask the clients what they want, and then show them something more. In the beginning stages clients are going to think they know exactly what they want, however their opinions are going to change along the course of the design process. It is best to give multiple iterations on ideas and make the process fun for not only yourself but for the clients too.
2 Be cautious but not a jerk. Often people are very sure they have the right answers, designers feel they know design best and clients feel they know their products best. Instead of getting into a battle of wits, put ideas through tests with actual users for outcomes that can be objectively analyzed.
Moving forward, this project will continue into a second phase where we will finalize the visuals of the website, removing the placeholder photos used. After that is completed, we will enter the final phase of this project where we build the site out using Webflow.
For more work inquiries, or to grab a coffee, please email me at mel@melleedunn.com
Thank you so much for reading!
