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.
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.
I partnered with my product manager to identify user problems and prioritize business requirements for our initial and subsequent launch.
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.
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.
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.
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.
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.
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.
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.
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.
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.