Shahriar Sadi
UX / UI Designer

Redesign of
Schneps Podcast

Current Look of Schneps Podcast Website

Current Look of Schneps Podcast Website

Problem Statement

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 style guide for podcast uploaders to follow

Hypothesis: Creating a better navigation and setting style guides for podcasts uploads to the website. The website will be a more fluid experience for users and allow content to get more traffic.

Schneps Podcast

Research Plan

Target Audience:

The research was targeted at both the end-user and the podcast uploader. Because if the uploader does not follow the style guide it ruins the experience of the end-user. 


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 its primary focus is on podcasts. They expressed frustration with finding episodes. Podcast uploaders complained about not having a style guide making the uploads inconsistent. 

Schneps Podcast Persona

Schneps Podcast Persona

Personas

Example

Based on the interviews we set up this persona. We referred to it throughout the entire product development 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
  • The persona was reflected back on several points through the creation process

Schneps Podcast



Method of Feature Prioritization

The MoSCoW method was used for this project in order to highlight the needs of this project redesign in order of importance. 

Schneps Podcast
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
Sketch

Sketch

Sketch

Usually, I start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.

  • 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)

Wireframe

Wireframe

Wireframe

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. 

Desktop Interface Demonstration

Desktop UI 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

Mobile Interface Demonstration

Mobile UI Design

This is the mobile prototype demonstration of the final design for Schneps podcasts created using Figma

  • 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
  • Caters to mobile users by giving them an app-like experience

Prototype Created using Figma

Prototype 

This is an embedded view of the prototype created using Figma. You can zoom in and view all screens created for this project.