Learning Product Management - 2 - Designing a Notion Podcast app

Akash Joshi -
Hosting a Clubhouse session on Startup Hiring: 11 AM Saturday  https://clubhouse.com/event/xjjwgNQX  

Building the Notion Podcast app in CSS + React live! 3 PM Saturday

Hey all! I've been going through a Product Management bootcamp with my wonderful partner Madhavi Swamy, and learning the various aspects of Product Management. Instead of creating personal notes, I'm doing a bit of #learninginpublic and sharing all that I have learned (with screenshots) in this doc.

In my previous post, I talked all about Idea Generation and User Research. In this one, we'll talk about Competitor Research, User Experience and my experience this week building stuff in Figma. Let's go!

Before getting started, let me talk about what the new idea I'm working on is. One of my newsletter readers pointed out that they find it easier to listen to articles rather than read them. I was running a daily news-like podcast for a few days (like 5) so I could reuse the existing feed that I had. All I needed was an easy way to convert my existing article into audio.

There a few solutions online which I tried out and used, but all of them want you to bring your data out of your CMS, paste it into them and then convert that text into audio. However, it should be possible to embed a podcast converter and listener into the page itself, which is what I'm going to try out. In this case, I'll be building it with Notion in mind first. Firstly, let's look at competitor analysis.

Competitor Analysis

Before I get into my part of the story about competitors, I'll list down a few facts about how to identify and get to know about competitors.

Competitors

  • Direct: solving same problem, similar solution, for same customer group
  • Indirect: solving same problem, different solution, overlapping customer group
  • Potential: solving different problem or having different solution, for same customer group
  • Substitute: completely different solution that could replace your solution

Ways to Find Competitors

  • Search by “problems” on Google - type the users pain points or problems/complaints - look for companies that claim to solve that problem
  • Search by “problems” on - Reddit, Quora, Twitter, Hacker News - usually people will respond with names of companies/services that solve that problem
  • Search by “solution” - type exact phrases of your one-line pitch. Try multiple variations.

What to know about Competitors

  • Features: Details of their features, pricing
  • Brand: Learn how users perceive their brand. What is the positioning of their brand compared to ours?
  • Design and User Experience: How well designed is their product? Do they use the user experience as a differentiator?
  • Speed: How fast they can build and ship?
  • The user base: A large user base has its advantages.
  • Funding/Acquisitions: Large amount of funding or new acquisitions means they can expand fast
  • New feature or product launches

In my case, a few of my competitors would be Blogcast, Listnr and Descript. I tried using them to get a feel of how they work. In short:

  • Blogcast: Used to be really good and have lots of active users. I used this one while building the podcast version of my previous blogpost. Now, several pages like the login page and the payments page have stopped working. I found out the payments page was down because I actually tried to pay for a paid plan but it just wouldn't load for me. To create a podcast, you add the text of your blogpost in the textarea and add other things like any pauses, voice changes or intonation changes, and click Generate.

    After you generate a podcast, you can download each generated audio from a list.

    After you generate a podcast, you can download each generated audio from a list.

  • Listnr: This service is similar to Blogcast, but actually being actively developed. This is the one I'm going to try out next to build a podcast version of this blogpost.

  • Descript: Descript is slightly more complex than the previous tools. It's a video/audio editing tool which is built upon being able to edit the media by editing its transcript. It has a pretty nifty feature called Overdub, which allows you to create a voice model of yourself and then add voice-over to your media just by writing text. This is truly magical so you have to check the demo to see how it works. (Starts at 02:42)

User Stories

Building upon User Personas, User Story is an informal and simple explanation of a feature written from the end-user’s perspective.

It goes in the format, "As a <User X>, I want <functionality Y> so that I <achieve goal Z>".

In my case, User Stories would be,

  • As a writer with limited free time, I want the ability to create podcasts instantly so I can save my time.
  • As a webmaster with 1000+ blogposts on my site, I want an automated way to convert all my blogposts into podcast episodes so I don't have to do the process manually.
  • As a maker who blogs on the side, I want a way to generate and manage a podcast in whatever tool I'm using without juggling multiple tools.

User Experience

People should start with prototyping. Either Low Fidelity, eg, simple sketches or using something like Excalidraw or Invision, or High Fidelity using something like Figma.

To learn more about UX, you can check out this blogpost by Prototypr on 10 Usability Heuristics with Examples.

Now let me talk about how I used Figma to build the basic ideas.

  1. I want the complete experience to happen from the embed itself. I don't want the user to visit a different website.
  2. Since ease-of-creation is the focus, it should be as automated as possible and only ask user input in the most important actions.

With these 2 guiding principles, I set out to make my basic design. To start, I set out to think of how the podcast player would look on a Notion page.

For the podcast player, I took motivation from the Anchor embedded podcast player.

This is the design I came up with, which kind of ends up looking exactly the same 😅.

Here's a screenshot of the complete flow a user will follow:

  1. A user logs in if he already isn't logged in.
  2. On next step, the player tries to detect the Notion page it's embedded in.
  3. If it fails or is incorrect, user can manually add URL
  4. Loading state.
  5. Display error and reason for failure, allow user to edit URL and publish again.
  6. And done!

So that was my way of building a Figma prototype 😅. I know it didn't follow the exact steps for good UX, but I decided to feel it out and iterate as I get feedback/new ideas.

You can check out the complete Figma file here (which will be kept updated).

Thanks for reading this summary! I'll catch you next week with the next set of notes for the sessions and with my progress on my app. You can subscribe to this newsletter or follow me on Twitter @thewritingdev.

Subscribe now