Catherine Bui

Case Study: Mark

Mark is a podcast listening app that allows you to annotate and “bookmark” audio you find interesting, and improves the podcast listening and discovery process.

The Challenge

Introduce novel ways and new terminology (“mark”) clearly to users to allow interactions with podcasts and audio content that are not established in common audio player interfaces.

The Outcome

An audio player with a simple interface that highlights audio content and any marks the user adds to the episode. Using well accepted iconography and design patterns to help facilitate users with novel actions.


Brainstorming and Exploratory Sketches


What are marks?

There are two kinds of marks. One allows the user to mark a timestamp they find interesting, and the other allows them to mark with a comment. For the final product, the app would also have an onboarding to walk the user through these concepts.


Audio Player Designed with Multi-taskers In Mind

According to The Podcast Consumer 2016 report by Edison Research approximately 21% of people listen to podcasts while in their cars and another 14% at work. This information further supported the need to have a simple audio player interface that would allow the user to easily mark content if they were multitasking and improve the listening experience with easy playback and fast forwarding options.

    Tasks that can be completed with one or two taps from player
  • Add a mark for the current timestamp or mark with comment.
  • View marks added for the current episode.
  • Skip back and forth in the track.
  • Adjust the playback and fast forward increments by long pressing the buttons to bring up other speed options.
  • View episode details (Synopsis, Show Notes, etc.).

Novel Interactions Guided by Familiar Iconography

Clarity is important especially when introducing new features that a user is not familiar with. Borrowing from recognized objects in our physical world or from widely used icons help to clarify novel ideas within the app. For example, using a clock icon to symbolize the marking of a timestamp within an episode or a thought bubble to symbolize a comment at a particular point in the episode.


Traditional Audio UI vs. Waveform

Compared to traditional audio player interfaces, Mark’s interface places emphasis on the audio and de-emphasizes the podcast album artwork to the background.

    Benefits of having the focal point on the waveform
  • The biggest thing on the screen, the waveform, is interactive - drag it left or right to skip along the episode. Allows for custom skipping increments that the user wants, not forced to skip in 10, 20 or 30 second increments.
  • The user can easily spot and tap/drag to jump to a mark they have added in the episode.
  • The focus is on the marked content and easy to spot current time within episode.

Audio in traditional UI

Audio in Mark


Swiping to Paginate Prototype

Swiping the page horizontally to paginate between categories is an interaction available throughout the app. Users are not limited to navigating in this manner and can also click directly on the category name. Although this interaction may be new to some, it has been adopted in major apps as Snapchat and Instagram and familiarity is on the rise.

Benefits of using this nav allows for quick and easy switching between categories and serves as a visual reminder that other filters exist to help users look for what to listen to next. A prototype of this interaction was implemented for the Subscribed section. This was built to test out the swiping interaction along with having an additional floating nav above the categories.

Mobile users: For a better experience, the Framer prototype has been hidden, please visit the prototype directly from the link below.

Try out this prototype.


Aiding Discovery with Social Connections and Recommendations

Through a few interviews it was clear users were also interested in different ways to discover new podcasts. “Top Charts” lists are generally stagnant where This American Life and other hits are always at the top. Including an activity feed populated with what a user's friends are listening to and a list of recommendations crafted for the user help to bring more unique and fresh results.


Podcast Artwork as Audio Player Background

Design Details

Embedded

Invisibilia

Reply All


Branding and Identity

Podcast apps are the tools through which users find and listen to content. They are text heavy by nature, filled with episode titles and synopses. Mark was designed to be as simple as possible to allow the content to speak directly to the user and to not intrude on the utilitarian nature of the app. Clean sans-serif fonts Gotham and Proxima Nova were used to communicate the practicality of the app with an unobtrusive color palette of greys and darker blues. The interface is stripped of any unnecessary color allowing color to come from podcast artwork and the content itself.

Logotype

Palette

Type

Display Type

Body Type


The impetus to design this app came out of a desire to solve a real need many podcast listeners have expressed through my research and interviews.

Concept work, September 2016
Design and prototypes