Ada Lau is a Product Designer living and working in New York City

Audible Clips

 

Audible Clips

With a 40 million member base, 1 in every 5 Audible users create bookmarks everyday. On March 2016, an innovative feature called Clips was launched, allowing our users to save a snippet of their favorite audio and have the ability to share with their friends. 

Listeners love talking about books, authors, and narrators they are passionate about, and ‘Clips’ makes it easier for our customers to start meaningful conversations with their friends and family directly from their audiobook whenever inspiration strikes!
— Founder and CEO of Audible, Don Katz
 

My Role

As the lead visual experience designer, I designed and executed the overall visual and interaction design. I worked closely with a senior UX designer on the user journey and prototypes.  

SCOPE DEFINITION

I partnered with my product manager to identify user problems and prioritize business requirements for our initial and subsequent launch.

EXPERIENCE STRATEGY

I collaborated with my UX partner and developers in mapping out the user journey, case scenarios and making sure the experience is the same across different operating systems.

Design validations

I created prototypes on iOS, Android and Windows during different phases of the design to discover any pain points that need to be addressed before final deliverables.

 

Business goals

We want to increase trial sign-up rates by innovating on existing features to provide more values to our users.

We want to gain Audible brand awareness by enabling our audio content to be more sharable.

We want to increase ACX revenue by helping our authors and narrators to promote their audiobooks on Audible.com.

 

USER GOALS

I, the user, want to mark a specific piece of an audio as a reference.

I, the user, want to share a funny audio snippet to my best friend.

I, the user, want to leverage Audible members to promote my new audiobook.

 

PROBLEM STATEMENTS

I, the user, find that bookmarking doesn't encapsulate a specific part of the audio.

I, the user, am frustrated that I cannot share a specific part of my audiobook with my friends.

I, the author / narrator, don't know how to gain exposure of my audiobook on Audible.com.

It’s easily the highest-profile move yet to turn audio into something bite-sized and shareable, and comes as Audible continues to make moves to consume the entire listening industry.....
— Wired.com

CLIP & SHARE

Clips allows customers to easily save a 30-second of their favorite audio passage and share it with their friends. It also retain all the existing functionalities with bookmarks, such as saving a specific location, adding a note, and going back to that location. A maximum of 5 minutes per eligible title can be shared on Facebook, Twitter, WhatsApp, SMS, email and more. Recipients of these clips can stream them without having to sign in or download the app, and an option to get the audiobook for free with a 30-day membership trial. This innovative feature not only increases the awareness of the brand but also serves as a great tool for authors and narrators to promote their audiobooks on Audible.com.

TECHNICAL Constraint

The biggest constraint for this project was the visualization of audio waves. Our vision was to utilize the amplitude to easily locate the start and end point of a clip. The idea was presented to the developers - iOS, Android and Windows - to discuss any issues that might arise during development. In order to meet an aggressive product launch, two of the three operating systems were unable to create the audio waves within the time frame due to technical constraints. Hence, an alternate solution need to be made for consistency across all platforms. 

DESIGN CHALLENGE

During an early stage of user testing, we found that 4 out of 6 participates were unable to identify the starting point of the clip. The lack of visual affordance created confusion on where the starting point was in reference to when the user tapped on the +Clip icon. Participates also had a difficult time dragging the start and end points because the tappable area was too small.

DESIGN SOLUTION

Taking inspiration from video editing apps, a ruler-like visual was the most straightforward way to denote audio. The key components of editing a clip are the beginning and end points which we called them handles. The design of these handles were revised to address the visual affordance issue. The interactive elements within the editing area were optimized to distinguish between scrubbing on the handles vs. the timeline. Users can drag the timeline to move to a different section within the chapter while maintaining the duration of the clip.

Each section between the longer lines equals to 10 seconds of a clip. When users press play, the orange bar progresses until either they press stop or the clip has reaches its end.

A solution to referencing the current position within the audiobook, a pin was added on the timeline to orient the users once they land on the edit screen.