Moodcast

Developed in 2017, Moodcast is a custom responsive website created to help users find and listen to new podcasting content via their current mood.

PROJECT CHALLENGE

Discovering new podcasts can be dependent on the listener’s personal taste and emotions. Yet no podcast application takes mood into account when it comes to podcast discovery. How might we use moods as a means for users to discover and listen to new podcasts?

PROJECT CONSIDERATIONS

  • PROJECT TIMELINE: 1.5 Weeks
  • ROLE: UX Designer, Front-End Web Developer
  • TEAM: José Padilla, Diego Mas González
  • TOOLSET: Pen, Paper, Visual Studio Code, GitHub, iTunes, Chrome, and Safari
  • DELIVERABLES:  A responsive website using at least 1x API integration

PROJECT SOLUTION

Moodcast is a fully responsive webpage that uses user moods to help discover and provide new podcasts to users – all based on their mood. Please click this link to launch the Moodcast prototype.

PHASE 1: DEVELOPING THE IDEA

Looking back, my interest in podcasting as a medium came through a college experience. In 2009, I had been fortunate to work as a summer intern at Connecticut’s Wesleyan University. I helped record and produce the show then called Lens on the Earth – a weekly podcast for the scientific community of the university. Operating with several other Wesleyan students, we would conduct interviews in the area, splice segments, and bring in music during transitions between interviews.

As I completed my education and entered the job market, I had continued to grow my podcast library with my interests – mainly podcasts in the technology, news, and fiction verticals. The medium for listening to podcasts seemed consistent for myself – and others – by using laptop computers, desktop computers, or our mobile devices in order to listen to content.

Working in the corporate world for several years prior to my experience with General Assembly, I had found some like-minded co-workers who also had similar interests in terms of podcasts. In discussing our favorite podcast shows, we seen came to commiserate over the shared problems that podcasts provided, including:

“I wish there was an easier way to find podcasts…it’s a lot of work for me to find something new.”

“I find podcasts based on what I’m feeling – if I want to hear a story, I’ll look for a story-driven show – like NPR’s ‘The Moth’.”

These are just a small subset of questions after considering the topic. After several weeks of my enrollment at GA, it dawned on me that I could attempt to build a solution that could help solve for for these shared problems.

PHASE 2: MARKET RESEARCH & THE PROBLEM SPACE

The problem users were reporting initially seemed to be in terms of content discovery. This rung true to me as well, as at the start of this project, my podcast library was minimal. I had several podcasts from Vox, such as “The Vergecast” and NPR’s “Wait, Wait! Don’t Tell Me!”, but my library had mostly gone unchanged over the years.

In beginning to examine the podcast application market in 2017, there were several options for users to consider when listening to podcasts. I needed to research how these methods were being used in the market, as well as what strategies these applications implemented to discover new podcasts.

Examining several podcasting services, I first looked to Apple’s iTunes podcast library, Spotify’s streaming service platform, Shifty Jelly’s Pocket Casts application, and Marco Arment’s Overcast application as well.

Popular podcasting services, including: Apple iTunes, Spotify, Pocket Casts, and Overcast.

In examining Apple iTunes, Spotify, Pocket Casts, and Overcast, all platforms offered methods to discover podcasts by rating (i.e. most popular), genre, or direct search. None of these services offered emotions as an input for podcast discovery. Considering this, I came to this problem-statement after realizing this missing feature could be implemented in my project design:

Discovering new podcasts can be dependent on a user’s mood. No podcast application takes moods into account when it comes to podcast discovery.

How might we use user moods to discover and listen to new podcasts?

PHASE 3: DRAFTING DESIGNS

Drafting what would eventually become Moodcast, I wanted to keep the square album artwork and grid-view, as this was already something that users were accustomed to seeing in each service’s UI; I didn’t want to surprise users by altering how podcasts should be showcased.

In sketching out a Lo-Fidelity wireframe of what I thought Moodcast should look like, this was what I came up with:

The original “Moodcast” sketch. The bottom of the page lists the coding frameworks considered.

PHASE 4: DEVELOPING MOODCAST

In choosing the coding languages for Moodcast to properly run, I needed to consult a friend and mentor. José Padilla, working out of Connecticut, is an excellent developer and family friend. Knowing of my interest in podcasts and enrollment in the program, he wanted to help in taking my newfound coding skills to the test by developing Moodcast.

Showing José the original design for Moodcast one Saturday afternoon, we got to work. First, we needed to determine the developer tools needed to build the webpage. We determined them to be as follows:

  1. GitHub – to commit the Moodcast repo and deploy the website
  2. Visual Studio Code – we preferred this over Sublime Text and Atom, aesthetically, as a coding tool
  3. Safari/Chrome – to test the launch of the website through its design stages
  4. Functions/Variables – to call and execute functions needed for our script to properly run
  5. iTunes – to reference the podcast meta-data for the specific code it is assigned in the iTunes Store Library, and also to use this number to assign a “Mood” to a selected podcast
  6. Javascript – we used jQuery to implement the click-actions on the three provided “moods” – this would then launch the Javascript player.
  7. Twitter – originally, we included an embed of Twitter’s “Share” button in the launch version of Moodcast (this is missing from the current design, likely due to a code change).
Window snippets showing some of the code we used to test and design Moodcast.

When designing the emotion selector “buttons” for users to click on, I had spoken to my course instructor for insight in terms of how many moods should be incorporated in a V1 product. He suggested tagging only a small number of podcasts, as the podcast directory did not have emotions applied to these podcast files. Otherwise, Moodcast development would have involved tagging thousands of audio files.

In the future, more emotions could be built into Moodcast but to limit the scope of this project to something more attainable, I decided on three emotions to include, with those being: “Happy”, “Curious” and “Bored”.

Now with moods decided on, I wanted a second opinion in terms of tagging. José and I both listened to our nine selected podcasts to reach an agreement on which podcast should belong to which category. We then tagged the applicable podcasts to these emotions in our code. Button colors were decided by user interviews – family, friends, colleagues – on what colors they thought each mood might insinuate – blue for “Happy”, yellow for “Curious”, and gray for “Bored”.

In keeping the design consistent with the podcast grid-style seen in prior podcasting applications, this was what the final button design looked like:

An example of the mood selectors in Moodcast. The button is opaque at first. When clicked, it transitions into a deeper shade of that color, letting the user know it has been selected, as well as activated.

When the user clicks a button, the click-action triggers the tagged podcast feed, it then launches a Javascript web-player, shown here:

An example of the Javascript web-player, when launched by the click-event.

The player updates dynamically with the podcast title, artwork, includes volume controls, and provides a direct download option to the user.

Here, you can see the finalized version of Moodcast running “The Vergecast”, via the “Curious” mood-selector click-action.

In the original version of Moodcast (launched last year), a successful “Tweet” button would appear after the reveal of the Javascript web-player. This is referenced by the “Share what you’re listening to…” text. However, this functionality was removed from Moodcast‘s current form, meaning that the tool script was likely updated or revised.

PHASE 5: NEXT STEPS & CONSIDERATIONS

Moodcast was the first example of my own work where I was able to build “something from nothing”; this application was the result of identifying a problem, ideating on a solution, and then applying course concepts to solve for that problem with a team. In many respects, the joys of building Moodcast and solving for an issue I knew users had experiences was what brought me to consider UX and User Research as a field of study through General Assembly.

Looking towards a second design sprint to implement a Version 2.0 of Moodcast, I would need to consider the following in refining this product:

  1. Adjust Feed URLs – Implementing the proper Feed URLs to reference any missing podcasts
  2. Re-Incorporate “Tweet” Functionality – Revising the “Tweet Button” code to allow the sharing of Moodcast to Twitter
  3. Include Additional Moods – I would need to determine additional moods to add onto the website, as well as additional podcasts to tag that would apply to those moods
  4. Consider Mobile Development – While Moodcast is mobile-responsive, I’d need to consider if it could be better served as a native application

Thank you for reading.