Current Look of Schneps Podcast Website
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.
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.
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.
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
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.
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.
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)
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 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 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
This is an embedded view of the prototype created using Figma. You can zoom in and view all screens created for this project.