Shahriar Sadi
Senior User Experience Designer

Redesign of Podcast Website

For Schneps Media

Image alt tag

Client

Schneps Media owns and operate more than 50 print and online news services.

Tools

  • Figma

  • Wordpress

  • Powerpoint

My Role

UX Designer - User Research, Persona Building, Mockup, Prototyping, UI Design, Interaction Design & Branding. Completed this project by myself.

Project Time

3 Months

Background

Schneps Media owns and operate more than 50 print and online news services. They are breaking ground on the lucrative podcast space. They have created a website to host all their various podcasts in one space.

Problem

The problem with the current podcast website 

  • follows the same format as the article websites 

  • Navigation can be difficult 

  • Overuse of stock images 

  • The design does not invoke emotion

  • Lack of a format for podcast uploaders to follow

  • Does not have a dedicated mobile interface

Schneps Podcast

Research Plan

The research was targeted at both the end-user and the podcast uploader.

Schneps Podcast

User Feedback

From the interviews, several key areas of improvement were spotted. Many users complained about the design and how it does not seem the primary focus is on podcasts. They expressed frustration with finding episodes. Podcast uploaders complained about not having a upload guide making the uploads inconsistent. 

Schneps Podcast

Research Synthesis

Paint Points

  • Lack of unifying platform

  • Information can be hard to find

Motivations

  • Streamline platform means more user retention

  • Article style is outdated

Positive Points

  • Better user experience for user will lead to long term users and recommendations for platform use

Schneps Podcast

Persona

Based on the interviews we set up this persona. We referred to it throughout the redesign process.

  • This persona was designed to capture the podcast platforms key demographic

  • Google Analytics data, as well as user interviews, were used to create the persona

  • The persona affected the design by giving insight into what features the user of our website would want the most

Schneps Podcast

Competitive Analysis

These companies were chosen to analyze. To get a better understanding of what is already out there in the market. These particular companies were chosen for their different methods of showcasing podcasts.  

Schneps Podcast

Hypothesis

By Creating better navigation, user interface, interaction and setting style guides for podcasts uploads to the website. The website will become a more fluid experience for users and allow content to get more traffic.

Schneps Podcast

Feature Prioritization

Once the research was complete a prioritization of features was completed to come up with possible solutions.

Schneps Podcast

Solution

  • Create new platform on wordpress

  • Create new fresh UI elements on existing website

  • Create a user flow that is easy and intuitive

Schneps Podcast

Feature Comparison

I created a comparison chart to compare my solution to other competitors out their in the market and how they compare in terms of features from a feature and user flow perspective.

Schneps Podcast

Sketch

  • Main purpose of the sketch is to get my ideas out before prototyping

  • User interviews helped with the thought process of the overall layout of the project

  • There were ten different sketches before landing on this final sketch

  • The sketch embodies a three-page layout of (home screen, series screen, episode screen)

Schneps Podcast

Mockup

This was a more evolved version of the sketch, a high fidelity mockup.  

  • The layout follows the look of the sketch

  • Colors correspond with the company colors

  • The wireframe now looks focused on audio unlike its predecessor 

  • A big banner on top allows for a gallery of the newest content to be presented to the user first. 


Final Desktop UI Interaction & Design

Once I tested out all usability mistakes, I started designing the final screens in Figma for the desktop interface.

  • The visual styling using company colors

  • Follows the design of a traditional audio player

  • Uses components of material design to allow the user to feel their usage has meaning

  • The final design caters to the user with an episode numbering system that is easy to follow and navigate

Final Mobile UI Interaction & Design

After the Desktop interaction was complete. I started designing the final screens in Figma for the mobile interface.

  • Caters to mobile users by giving them an app-like experience, while retaining the same features

What have I learned from this project?

This project was heavily design focused post research but the user research was essential in creating a podcast experience that is fluid and has a great information architecture. Looks are great but a user cares most about receiving what they ask for in a digestible format.

  • What I gained most from this project is exploring a new space of audio media and how visuals and reading material play a crucial role in that space