Cover-1

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. 

Screen-Shot-2022-05-31-at-5.55.25-PM

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
Screen-Shot-2022-05-31-at-6.37.18-PM
  • Users can actively highlight while reading. 
  • Navigation across sentences is faster as user can easily to skim through.
Audiobook interaction
Screen-Shot-2022-06-02-at-12.35.15-AM
  • 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. 

scenarios-with-no-text

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-search
Voice based interaction
touch-screen
Screen-based Interaction

Voice based Interaction

Pros

Screen-Shot-2022-05-31-at-7.32.47-PM

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.

task-flow-voice

The complexity increased as the use case changed from highlighting single sentences to multiple sentences which involved more micro-navigation.

task-flow-voice-2

Cons

Screen-Shot-2022-05-31-at-7.39.19-PM

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.

task-flow-text

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

Screen-Shot-2022-05-31-at-8.40.09-PM

Design exploration of UI representation for audio source.

Screen-Shot-2022-05-31-at-8.42.43-PM
Screen-Shot-2022-05-31-at-8.44.15-PM

Conceptualization

Highlight Interaction

Next step was to design the interaction patterns to perform a highlight interaction. 

scroll

User can scroll horizontally on top of the audio form to navigate across the audio.

drag

User can scroll horizontally on top of the audio form to navigate across the audio.

Screen-Shot-2022-05-31-at-9.26.00-PM

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

Screen-Shot-2022-05-31-at-10.23.17-PM

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.

Screen-Shot-2022-05-31-at-10.25.12-PM
Screen-Shot-2022-05-31-at-10.29.03-PM

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.

Screen-Shot-2022-05-31-at-10.51.19-PM
Screen-Shot-2022-05-31-at-10.51.57-PM
Screen-Shot-2022-05-31-at-10.53.25-PM
Screen-Shot-2022-05-31-at-10.53.54-PM
Screen-Shot-2022-05-31-at-10.54.14-PM

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.