Design exercise
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.
The Goal
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.
Use cases
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.
Use case 1
"Highlight audio, analogous to highlighting text in a book."
key questions
What makes it easy to highlight in a textbook?
What are the pain points in audiobooks?
How to bring the textbook experience to audiobooks?
Problem Analysis
Highlighting in Textbook vs audiobook
Textbook interaction
- Users can actively highlight while reading.
- Navigation across sentences is faster as user can easily to skim through.
Audiobook interaction
- Actively highlighting while listening is not easy. Requires multiple steps.
- Less control and lack of visibility make it difficult to navigate across the sentences in audio format.
Identifying highlighting patterns
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.
Takeaways
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.
Selecting an interaction type
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.
Voice based interaction
Screen-based Interaction
Voice based Interaction
Pros
Task Flow
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.
Cons
Interaction type : Voice based Interaction
Takeways
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.
Screen based Interaction
Task Flow
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.
Takeways
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
Use case revisited
"Design a screen-based highlight interaction for audiobooks"
key experience goals
It should be easy for the user to comprehend the audio content.
Navigation should be fast and flexible.
Conceptualization
Audioform representation
User goals
User Should be able to distinguish between sentences
Assumptions
Audiobook narrations will have standard pauses between sentences
Sample references
Design exploration of UI representation for audio source.
Conceptualization
Highlight Interaction
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
- Auto playback on any change in highlight selection
- Auto playback end portion for endpoint change
- Fast Navigation and editing
UI design
Explorations
Information Architecture
Wireframe
Motion Prototype
Information Architecture
Wireframe
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.
Motion prototype
Concept screens
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.