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. 



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



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.




Interaction type : Voice based Interaction



Support hands free interactions

Support multitasking

Support use case S1


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.




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.


Audioform representation

User goals

User Should be able to distinguish between sentences


Audiobook narrations will have standard pauses between sentences

Sample references


Design exploration of UI representation for audio source.



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


Information Architecture


Motion Prototype

Information Architecture



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

Social media


Connect with me

Apart from design I sing, capture and drive. Connect with me if any of these passion aligns with your.