Personalized Audiobooks
Audiobooks and podcasting are the fastest-growing audio segments on mobile. Users who listen to audiobooks don’t enjoy the benefits of dog-earing pages, highlighting excerpts, or leaving notes on their favorite pages... they also lose the nostalgic aspects of owning a book and watching it age. This leaves a lot to be desired from the audio experience on mobile.
To design an Audiobook or Podcasting mobile app that is highly personal, highly interactive, and with the ability to bring even more utility to the user than a book ever could.
Highlight audio, analogous to highlighting text in a book. What else can the user do now that they’ve highlighted the content?
Take notes on parts of the audio book you find interesting.
What makes it easy to highlight in a textbook?
What are the pain points in audiobooks?
How to bring the textbook experience to audiobooks?
Identified various patterns users would follow while listening to highlight sentences. Sometimes they might complete a sentence and then highlight, sometimes they start highlighting from the middle, etc.
User goals
Flexible and Fast navigation across audio information
Enhanced visibility of audio information to support better navigation
Assumptions and Constraints
Common use cases are S1, S2, and S3
The platform is audio only, no text information available.
Keeping in mind the limited time and resources, the goal was to ideate fast and decide on a design work flow. Considering the voice output nature of audio books, I decided to consider voice also as a key interaction model for this use case. I brainstormed on both voice based and screen based interactions to decide which one can support a fast and flexible highlight interaction.
Apart from identifying the pros, in order to gauge the feasibility of this model, I quickly devised an Ideal voice-based task flow. This helped me to identify the complex areas in this flow which can be a potential roadblock.
The complexity increased as the use case changed from highlighting single sentences to multiple sentences which involved more micro-navigation.
Pros
Support hands free interactions
Support multitasking
Support use case S1
Cons
Complexity increases for use case S2 and S3
Slow Navigation : Multiple back and forth voice based dialogs
High Learning curve : User not familiar with dialog based interaction.
Designed an ideal task for screen-based interaction as well. This helped to identify how this modal caters to the problem identifed in the above scenarios.
Pros
Support use cases S1, S2, S3.
S2, S3 use cases can be improved with better interactions.
User familiar with the interaction model. Less learning curve
Easy navigation ( scroll, touch ). Affords flexibility
Visibility of audio information can be enhanced
It should be easy for the user to comprehend the audio content.
Navigation should be fast and flexible.
User goals
User Should be able to distinguish between sentences
Assumptions
Audiobook narrations will have standard pauses between sentences
Design exploration of UI representation for audio source.
Next step was to design the interaction patterns to perform a highlight interaction.
User can scroll horizontally on top of the audio form to navigate across the audio.
User can scroll horizontally on top of the audio form to navigate across the audio.
The user should be able to navigate across the audio by scrolling horizontally ( Highlighted in blue).
To highlight users can either tap on the seek bars or anywhere outside (Highlighted in green) the wave form to activate highlight mode and drag to change the scope.
Sample prototype to showcase the envisioned behaviour
UI design
Explorations
Information Architecture
Wireframe
Motion Prototype
I started with organizing the information based on the IA devised. The goal was to adhere with the hierarchy of the IA and to make sure that high frequency touch targets are placed at accessible position.
You can find all the respective designs for highlighting, taking notes, viewing notes, Live view, Live comment previews, etc. Some of these designs are concepts and might need a more detailed design walkthrough.
Contact me
+1 4109007256
rishinr29@gmail.com
Social media
Twitter
Linkedin
Instagram
Connect with me
Apart from design I sing, capture and drive. Connect with me if any of these passion aligns with your.