Background:
Ether is a podcast app that allows users to easily share podcast episodes and channels with friends and other users. According to this study, 82% of podcast listeners use an iPhone and 72% of those listeners use Apple’s Podcasts. Therefore it can be inferred there is a place for other designs to enter the market. Many users are frustrated with their podcast app. Current Podcast apps offer many features users don’t use and many features users want to use but are frustrating and confusing to interact with. Ether focuses its functionality allowing an easier and more intuitive experience.
User Research:
To confirm how podcast listeners feel about their podcast listening experience, a research plan was created. The goals of the research were to answer the following questions:
- How do users currently find new podcasts to listen to?
- Where do users listen to podcasts most?
- What features of their current podcast app do they use?
To answer these questions, the methodology consisted of first sending out a survey and then conducting in-person interviews. The survey received over 50 responses and I conducted 6 in-person interviews.
Results from research:
From Survey:
- At least 78% of podcast listeners are multitasking: listening while doing other tasks (commuting, chores, etc)
- 89% of people talk about podcasts with others
- 85% of people find new podcasts to listen to by word of mouth
- The least used areas of Apple’s Podcasts is the “Featured” section
From Interviews:
- All 6 interview subjects loves the +/- 15 second button
- Podcast-listening drivers download episodes prior to starting their drive
- Avid podcast listeners enjoy talking about podcasts with their friends
- All interviewees said they had found at least one new podcast channel to subscribe to via word-of-mouth
This data shows users are typically doing other tasks while listening to podcasts. This means the player needs to be easy to access and use while on-the-go. Also, most listeners find new podcasts by talking with other people. Therefore, a social aspect might help users find new channels to subscribe to.
Competitive Analysis:
Along with conducting user research, I also did a competitive analysis of other apps and services. I included Apple’s Podcasts, which dominates the podcast market. I also included Podcast & Radio Addict, the top free podcast app available for Android. Lastly I included Spotify. Many users of Spotify listen on their phones/ while commuting. Also, Spotify features social sharing that helps their users to discover new music.
Personas and Empathy Maps:
After learning more about the user base and answering the research goals, I created personas and empathy maps. These artifacts made sure the users needs were always at the forefront of any design decisions.
User Stories:
With a greater understanding of the user base and what functionality they want in a podcast app, I defined what key features will be included in my MVP:
- Audio player (+/- 15 second button, pause, play)
- Search
- Subscribe
- Episodes lists shows what episodes have already been played
- Ability to download/ delete episodes
- Ability to share podcasts with friends
A few secondary features to be included in future releases:
- Ability to make comments directly from the player screen while listening
- Ability to share audio clips from an episode
- Curated podcast recommendations based on user listening habits
A few of the user stories created based on this functionality:
| User Stories | Conditions of Acceptance |
|---|---|
| As a user I want to search for a podcast channel so that I can find the shows I like to listen to |
|
| As a user I want to listen to a podcast episode so that I can learn more about a topic of interest |
|
| As a user I want to download an episode to my phone so that I don’t waste data when listening to it later |
|
| As a user I want to follow a friend so I can see what podcasts they are listening to |
|
The original document can be viewed here.
Card Sorting and Sitemap:
With the functionality and user stories defined, I conducted card sort testing to discover the most intuitive information architecture. Because of the limited functionality for the MVP there were 20 tasks for my testers to sort:
- Download an episode
- Delete an episode
- Follow a friend
- Share an episode with someone
- Subscribe to a podcast channel
- Find a new podcast
- Listen to a podcast episode
- Sign in
- Create an account
- Connect account to Facebook
- Auto-download episodes from a podcast channel
- Accept a friend request
- Stop following a friend
- Rewind an episode
- Fast forward an episode
- Skip to the previous episode
- Skip to the next episode
- View all downloaded episodes
- Comment on an episode
- Pause playing episode
- Change the volume
There were 4 participants for this study. Each user sorted the cards almost identically with the exception of 2 cards. Also, all groups were titled similarly:
- Login setup
- Podcast player
- Podcasts
- Social
“Connect account to Facebook” was one card that was placed in two different groups: “Login setup” and “Social”. This means users could become confused when looking for this feature once in the app. A solution would be to offer Facebook connection at account creation and also offering it as an added feature in the user’s profile if they do not connect immediately at signup.
“Share an episode with someone” was also placed in different groups: “Podcast player” and “Podcasts”. This is understandable as users would like to be able to share podcasts from both locations. The solution is to offer this functionality in multiple locations across the app.
Based on this card sorting data, I created the sitemap. This is the initial sitemap. As functionality is added and changed, the sitemap will be edited and updated to make sure navigation is always intuitive and easy to use.
After finalizing the sitemap, I digitized it using Draw.io to make it easier to share with other teammates.
Because this is an app with specific functionality, this sitemap mostly outlines the location of different functionalities users will want to access across the app.
Based on the initial user research and other data collected through the card sorting, I have decided not to require users to have an account in order to access all features of the app. At first opening the app, users will be able to search for podcast channels, subscribe to them, listen to episodes, and manage their podcasts. If users wish to access any of the social features, they will have to create an account. This allows for a softer on-boarding process. This also clears up any confusion card sorting participants had about “connecting to Facebook,” as this feature will only be offered if a user decides to create an account.
User Flows:
With the site structure created, I mapped out three key user flows to test the sitemap:
- User onboarding
- Subscribing to a podcast channel
- Following a friend
First, these flows were quickly sketched out to get the ideas flowing, while leaving room to add or remove anything I needed to.
Once these flows were finalized, I digitized them in Illustrator, formalizing the flows.
Wireframes:
With the functionality defined, the IA in place and tested with user flows, I began creating wireframes. To begin the process, I first started creating wireframes in my sketchbook. This allowed me to create multiple layouts quickly without feeling committed to any one design. This way I can test multiple structures without having to do more than get a new piece of paper. It also helped solidify the best layout for my navigation bar.
After receiving feedback for my sketch wireframes and deciding on which layouts were the best, I created digital wireframes. I created these wireframes out of gray blocks. This allowed me to focus on the overall structure and hierarchy without getting caught up on the small details.
At each stage of my wireframes I did informal user testing. Aka I asked other team members and close friends to click through the screens to make sure they understand the flow. This is not reliable data or testing. But it’s a good way to get super quick feedback at each stage of design.
Style Guide:
I originally started collecting my assets using Lingo. Then I made a more formal PDF as a shareable document for anyone doesn’t have access to my Lingo kit.
For my color palette I wanted a mainly neutral palette that didn’t distract from the content. The white background and black text offer nice contrast for legibility of copy. The gray is used to help emphasize hierarchy or text and icons. The gold and blue are my highlight colors. Gold, being the main highlight color, draws the eye to buttons. The blue, being the secondary highlight color, is used as a subtle indicator, eg. there is a new podcast episode available.
I chose to use Muli as my typeface. It’s a Google font, and therefore easy to access and use. Also, it offers an excellent variety of weights. I use the Light and Bold weights to help emphasize hierarchy. I chose a sans serif font for legibility.
User testing:
Once the final screens were created, it was time for more user testing feedback. I created a research plan and script to outline how the testing will be conducted. Next I needed a prototype for testing. The final screens were created using Adobe XD. This allowed for a quick prototype to be created. I used this prototype for my remote users. I also uploaded the screens to InVision, creating a second prototype. I used this prototype for my in-person interviews. It allowed me to load and save the app to my phone so I didn’t have to worry about internet access.
I conducted 6 in-person and remote interviews. The goals of this research was to have users complete three tasks within the app:
- Subscribe to a podcast channel
- Create an account
- Share a podcast episode
Results of Testing:
Thanks to this testing I learned about two crucial elements I forgot to include:
- A “subscribe” button on the podcast channel pages
- A “share” button on the podcast channel pages
One user was also confused about podcast search. He wants to be able to search by show title and by categories, not just the show title. To solve this issue, I added tabs across the top of the search page. They include Title (search by title), Tags (search by category), and Popular (search by popularity).
Because this is an image prototype instead of code, my users frequently tried to scroll and tap where they couldn’t which lead to some confusion for one user. However, all users responded positively to app, and in particular to the social pages.
Conclusion:
Thanks to user testing I have found a few areas of my app that need adjusting. But on the whole the app and the structure are good to go and ready to be handed to a developer team. As the app continues to be built and then used, there will still be a lot of work to be done. More user testing, more iterating and improving. Also, it’s important to remember this is the MVP. There is still more functionality I hope to include in future releases.