UI DESIGN / UX DESIGN


Project Overview

Introduction

The Media Lunch Break Podcast is a podcast founded in 2016 by two close friends living in New York with the purpose of entertaining its listeners with a comedic mixture of popular culture news and reviews. The podcast can be found on many major podcast streaming websites and apps.

With the website redesign, I set out to update the website that was launched as a placeholder and create an immersive experience from the research that the hosts put into each episode for visitors who listen to the podcast.


My Role

I lead the design, testing, and development of this project from beginning to end. I collaborated with the hosts of the podcast during the entire project to ensure they remained happy with the product.


Problem

The old website is outdated

The problem with the existing website was that while the podcast has evolved and grown an identity over the years, the website itself has remained the same for 3 years. The website is also not responsive, which is problematic as the goal is to attract repeat users for a podcast who’s listeners mainly tune in from a mobile platform.


There is nothing drawing users to visit the offical website

The show has evolved over the years and is very informative with current pop-culture news and its reviews of comics and movies. The website, however, provides no additional value beyond what the show is already providing.

Goal

Integrate the website as a feature of the main show

Create a resource out of the main website that listeners can use to get additional content on the subjects covered in each week’s episode.


The Media Lunch Break Exisiting Website Design Mockup Image The Media Lunch Break Redesign Website Design Mockup Image

I worked on creating a solution that is inline with the hosts’ visions for their brand and a new simple visual style for the online experience. I also aimed to curate the online experience to be user-friendly and responsive.


Brainstorm and Ideation

I held an interview session with the two hosts to determine what vision they had for the podcast’s website. The hosts had a lot of vision for the website. However, to keep the website simple we narrowed down key components that the hosts felt were important to include.

  • Current aired episode on landing page
  • Previous episodes list
  • Bios
  • Merchandise
  • Recommended Reads/Watches


Sketches

After narrowing down the key components to include in the website, I sketched possible layouts for the main pages. Below is how the early paper wireframes looked.


The Media Lunch Break Paper Wireframes Round One Drafts

After we discussed the early wireframes and the purposes of each element, final selections were made. Below is how the finalized paper wireframes looked.


The Media Lunch Break Paper Wireframes Page One The Media Lunch Break Paper Wireframes Page Two


Initial UI Design and Wireframe

The Media Lunch Break Lofi Wireframes

The project is currently in user testing.

As this is a currently on-going project, please visit back to see further progress.



Let's Connect:

The Media Lunch Break Website Let’s Connect Image