This is a continuation of designing a new podcast application. You can read Part 1 here and Part 2 here. The previous posts go over the user research and icon design respectively where as this one focuses on designing a high fidelity interface mockups. Initial wireframes for the UI can be accessed here.
Splash & User Session Screens
The first section of this post focuses on the splash screen along with the sign in and sign up screens. The design of the screens is fairly simple and uses a lot of white space in order to avoid cluttering. Due to these screens being the user's first experience with the application, each screen prominently displays the application's logo along with the name. This is to promote brand recognition. The sign in screen is fairly simple and self explanatory. Initially, I wanted to have the user select a persona they identify with during the signup flow. This choice would in turn affect the functionality of the application. After consideration, I realized that this would require a lot of knowledge/training regarding the personas and also have to very clearly define the implications of the choice. Another potential issue would have been users who didn't seem themselves as one of the categories defined by me. Due to these issues, I decided to expose any customization in the settings screen and using the personas developed in Part 1 developing sane defaults for the initial experience.
Home Screen
Whenever the user launches the application, they are greeted by the home screen. This is the screen where the user can see all the recent episodes or any podcasts they are subscribed too. Based on user interviews and the conclusions from persona development, a strong theme came out to propose podcasts not necessarily as shows but focus on the episodes individually. This allows one to recommend certain episodes of a show that might interest a listener instead of expecting them to subscribe to the entire show and receive new episodes when they are not interesting. If the user decides to play an episode for the section, the application will continue playing episodes in the order they are displayed. The user can also choose to dive into a podcast show and play individual or multiple episodes from the same show. The podcasts section provides a way for users who consider themselves "completionist" to listen to every episode of a particular show.
An important addition to note here is the star symbol seen either on the album art of certain episodes or podcasts. These are meant to represent recommended podcasts. During user research I found out that most people find it hard to find new podcasts or episodes especially the ones that might not be popular in their social circles. Having the ability to recommend podcasts based on user's ratings of other episodes or podcasts allows us to propose either new shows or simply episodes that tackle a different side or view point of a topic the user has already listened to in another show. The now playing bar at the bottom is always present allowing the user access to the controls or the ability to move to the now playing screen by simply tapping it.
Now Playing Screen
Tapping on the now playing bar in the application launches the now playing screen The screen is fairly simple with a progress bar at the top, a large image for either the podcast or episode image. The bottom right of the image (podcast art) has a info button which when pressed gives more information about the episode and allows the user to rate the episode on a 5 star scale. The user can simply tap on the number of stars to rate the episode and this is stored and used when the application is recommending new shows and episodes to the user. On the right of the navigation bar the user can choose to either add a new podcast or share the current one they are listening to. The option to add a new podcast is available from anywhere in the application whereas sharing is only available through this screen. On the left of the navigation bar, the user can press the back button to simply dismiss this screen and return to either the home screen or where they launched this screen from.
Adding a Podcast
The flow for adding a podcast is split in two screens. The first one (left) lists all the podcasts (shows) available and the user can filter these through the use of search. Once the user finds a podcast they are interested in, clicking it leads them to a more detailed view of the show (right). The detailed view contains the episodes, a small description of the show and a subscribe button. The user can either subscribe to the entire show or simply listen or download a single episode. Any episode or podcasts recommended by the application are accompanied by the yellow star same as the home screen. Tapping on an episode will simply download the episode and the user can listen later. Tapping subscribe will download the latest episode and continually update the user's feed when a new episode is released.
The initial design for this screen focused more on filtering the available podcasts instead of using search but after discussing the project with other students and potential users, it made more sense to have search functionality that can also simply acting as a filter.
Creating and Listening to Playlists
Next set of screen being analyzed are the playlist screen and creating a new playlist. A user can access their list of playlists by simply selecting the appropriate tab on the tab bar at the bottom of the screen. When the user switches to the playlist screen they are greeted by the screen shown on the left. To play a existing playlist the user can simply click on the play button next to it. Clicking an existing playlist will lead them to an edit view which works exactly the same as creating a new playlist. In order to create a new playlist, the user needs to simply tap on the first cell on the list view which will transition them to the view on the right. Here the user can check off any episodes they want to include by simply tapping the respective cell and name the playlist by simply tapping the name cell at the top. Once the user is done editing or creating the playlist, simply pressing done will save the playlist which can be listened to later.
Settings Screen
The settings screen is meant for users to customize their experience with the application. It provides extra details regarding a user's account, allows them to turn on features like the recommended episodes, limit the episode length they like etc. The delete account button is for the user to entirely erase their account including which episodes they rated, which episodes they listened to etc. This is put into place because I believe that the user should have the ability to erase their entire account and no personal data should be left behind. The settings screen is fairly simplistic currently but can be expanded upon as more features are added to the application. The
Demo
A click through demo is available here.
