Redesigning Audible for Users with Visual Atypicalities

Aashrita Indurti
12 min readMay 18, 2021

Accessibility Spring 21 | Carnegie Mellon University

Plan
- Introduction
- Audible by Amazon
- Auditing Audible
- Rose, Bud, Thorn Method
- Affinity Mapping and VIMM’s Methodology
- Secondary Research
- User Personas
- Insights, Emergent Themes and Opportunities for Design
- Ability Based Design
- Reflections

Introduction

“Designing for people with permanent disabilities can seem like a significant constraint, but the resulting designs can actually benefit a much larger number of people.”
- Microsoft Inclusive Toolkit

The aim of this project is to redesign the application for users with visual atypicalities. The approach that the platform integrates follows a text to speech system, narrating snippets of text in any book that the reader chooses to read. The task of redesigning the application caters mostly to users with visual disabilities, including those with permanent blindness to avid readers who are perfectly sighted, yet are caught in scenarios that can be rendered as challenges that are situational and temporary and reduce their chances of reading a piece.

While the primary task at hand for most users would be to listen intently to their audiobooks, the big challenge for me as a designer was to enhance the act of listening-reading and make it enjoyable while preserving the essence of visual cognition, typical to the process of seeing, perceiving, assimilating and turning pages to browse through chapters of a book.

Hence the objective is to redesign the application such that it serves its purpose of narrating text, translating the physical experience of reading and making the process an enjoyable and worthwhile one for users with different capabilities.

Audible by Amazon

The App Audible by Amazon, source — audible.in

The Application Audible is an audiobook and podcast service that allows users to purchase and stream audiobooks and other forms of spoken word content. The product is one among the many products and services offered by Amazon, it was integrated into the umbrella of services after Amazon acquired Audible.

Auditing Audible

As the first step of the design process, I began auditing the features of the application. Some salient features include -

Home Screen

Home Screen of the Application showing Suggestions

The home screen shows the audiobooks that the user is currently listening to, some recommendations, best sellers, new releases and top categories.

The Audio Player

The Audio Player Screens

This screen shows a detailed view of the audio player with features such as speed settings, chapters of the book which includes a PDF document of the book, sleep timer and bookmark apart from the essential features of fast forward/rewind and quick access to previous and next audiobooks. An interesting feature in this screen is the button-free aspect where the user can just click any part of the screen to play and stop, swipe right and left to rewind and fast forward. I particularly like this feature as part of the brand’s intent to make it accessible to people with motor disabilities.

Hamburger Menu

The Stats Screen (left) and the Expanded Hamburger Menu (right)

The hamburger menu houses a list of items consisting of library, news, Stats, Discover which lets users browse through different categories, best sellers, new releases and trending audiobooks. As I traversed the home screen to hop on to the news section, I expected to see news from around the world. I was taken aback by the social media handles of audible showcasing trending happenings in the organisation. The statistics is a segment worth mentioning, it analyzes and crafts the user’s listening level, time, titles, genres and plays a key role in customizing titles and recommendations for the user. An onlooker would love to see the progress they make, not just to fill them with a sense of achievement but also to make note of the various books they have read. This feature of the app is lost as most users do not notice this menu link listed under the hamburger menu.

Having audited the features of the app, I realised that there were some great features the app brandishes, some features that could leverage transition from an accessibility standpoint and a whole set of aspects that have been overlooked. I inspected and classified these features using the Rose, Bud and Thorn Method.

Rose, Bud and Thorn

The Rose Bud and Thorn Method is a technique that spins its tale around the carefully crafted metaphors of rose that denotes the positives or the effective and indisputable characteristics, the bud or actionable areas of opportunities that can be translated into better features and the thorn that stands for the obstructive attributes.

Red symbolises the Rose, deriving its connotation from the visual appearance of a rose, yellow is designated for the Bud while the Thorn takes a green form.

The Rose, Bud, Thorn Classification

The takeaway from this technique was the clear assortment of the constructive aspects that should be retained, the areas of opportunity and the features that clearly need a change. Some beneficial features of this platform are the home screen suggestions, the basic customizable features of the audio player screen and the button free feature.

The characteristics that could be used as gateways to transition are the denotations of some icons, especially a feature symbolised by a car which stands for quick access, the incorporation of the PDF in a more literal sense rather than as an individual entity that is hidden behind the chapters button, integration of subtitles to the audio and placing significant emphasis on the analytics section. Another interesting point of intervention is the inclusion of the aspect of visual cognition. How may we imbibe the tangible quality such as making specific notes or even marking the page numbers? This is an insight that helps users relate to a piece of prose with the help of spatial or visual cognition. People often recall a context or scenario, a place, time or setting when they first encountered a particular book, where they began reading it and at which page they had placed their bookmark with the intent of returning to it. The scope of translating this physicality into the digital realm boosts the experience of reading.

The last group of classifications stem from those areas that need a change and these features include lack of customization of typeface and fonts, navigation and selection that is a challenge for users with disabilities, dark UI themes which can be hard on the eyes for people with atypical vision and acute motor load to navigate and define settings.

The next step as part of the design process was to do an affinity mapping and map the insights based on certain metrics. The VIMM’s methodology was a handy technique that helped classify and synthesize these findings.

Affinity Mapping and VIMM’s Methodology

Affinity Maps are usually used to bunch groups of similar pieces and insights together under a common theme. The VIMM’s methodology is a usability analysis tool that focuses on segregating these insights into four major categories i.e, Visual load, Intellectual Load, Motor Load and Memory Load.

Analysis of the Visual load comprises of determining those aspects of the interface that are visually inconsistent, hence disturbing the visual equilibrium and giving rise to flaws that hamper accessibility. Intellectual load and Memory load are forms of cognitive overload where the former encompasses issues that confuse the user or require comprehension of a screen that can be misleading based on either their ease of access or visual appearance while the issues belonging to the latter require high levels of attention to understand the context and scenario of use.

As the name suggests, motor load owes to its multi-level hierarchy of navigation and can be difficult for users with disabilities.

Based on the mapping exercise, I spotted most issues forming clusters under the brackets of Visual and Motor Load, while categories of Memory and Intellectual Load consisted of areas of opportunity.

Affinity Mapping using VIMM’s Methodology

Secondary Research

Another key milestone that helped me gain some understanding of this space, pertaining to text to speech applications for users with visual challenges was secondary research and literature review.

I browsed through case studies, research papers and examples of applications that revolved around accessibility and visual assistive technologies.

The subject matter for journals and case studies involved designing for visual impairments and Visual Assistive Technology while some of the platforms that were specifically designed for blind users are Voice Dream Reader, Sero, BARD Mobile, etc.

The key highlight of this research is the integration of aspects such as ease of access during narration, customization and modularity to help users with visual impairments, reiteration on high settings such as the zoom-in feature and magnification.

Principles of Accessibility from the Microsoft Inclusive Toolkit

The Microsoft Inclusive Toolkit helped me gain in-depth knowledge of different scenarios associated with disability. Disability occurs in the form of Permanent, Temporary and Situational and this forms the basis of the user personas in this project.

User Personas

I took to drafting user personas by curating stories of three different individuals to bring out the nuances of the types of disabilities as specified in the Microsoft Inclusive Toolkit. While all of us come with the basic understanding of disability as a permanent mode of ability, the examples cover corner cases of perfectly able individuals trapped in scenarios that render them as people with disabilities in atypical contexts.

User Personas — Cases of Temporary, Situational and Permanent Disability

A Case of Temporary Disability

John is a 35-year-old who has just undergone LASIK surgery. As part of the recovery phase, rest and minimum strain to the eyes has been recommended for a duration of four weeks. John’s work as a researcher requires him to read several books and journals. He can steal a glance once in a while but finds that screens that are dark with small typefaces are difficult to browse. In this case, he has the privilege of making use of his vision for minor activities but largely would prefer to avoid excessive load that can hamper his recovery.

A Case of Situational Disability

Rob is an undergraduate student and is running late for their class on a certain day. This semester has particularly been an intense one and they find themselves running late for class every now and then, barely finishing up the prerequisite readings specified for the class. Rob stumbles upon the idea of using the application to activate a text to speech mode of reading while driving down to university. The biggest challenge they face is making notes for future reference and looking up hard phrases and jargons. This is a case that demands multimodal interaction, given that Rob is engrossed in an activity that requires total concentration while driving. There is no possibility of them channelising their attention towards the device and would require a hands-free mode of listening — reading.

A Case of Permanent Disability

Maria is a 70-year-old woman who has lost her vision recently. Subjected to acute Glaucoma, years of neglect have resulted in permanent blindness. A voracious reader back in the day, she looked forward to spending her days of retirement in the company of books. Her newfound loss of vision has been frustrating and she often finds herself dependent on others to fulfil her basic needs. Her lack of activity and reading has been a disappointing blow for her. She has been asking around for technological aids that can read out a book aloud for her. She has a basic understanding of technology and has used a computer for work during her heydays. Her situation demands a total hands-free solution where she can ask for recommendations of a certain genre and have it narrated for her entertainment.

Based on these three personas, the need for a hands-free solution stands out as a key requirement with other modular features adding benefit to these user profiles.

Emergent Themes and Opportunities for Design

The process of affinity mapping, persona study and secondary research helped me define some emergent themes. The themes are as follows -

Visual Palette of the Application

Proposed Home Screen with Light UI a Voice Assistant

Dark UI can be difficult to access and read as it adds a strain on the eye for users who are old or have a weak vision. The design solution aims to solve this problem by integrating light UI as part of the visual customization process. A user can typically select and personalise the colour palette of the screen based on his/her/their comfort and requirement.

Subtitles

Incorporating Subtitles and Highlighting Words as Narration Continues in the Background

Subtitles and text for the narration is an essential feature for those with auditory disabilities and conforms to the WCAG guidelines. The redesign solution addresses this by incorporating snippets and highlighting text as the narration continues in the background.

Ease of Access and Customization

Font Customization and Quick Access Pane (Search, Paragraph Navigation & Chapters)

This theme intends to promote ease of access and reduce the navigational strain by creating a spectrum of related features such as chapter/paragraph and search, upfront such that they are accessible at glance. The chapters, paragraph and page numbers also play a tiny role in bringing the idea of visual cognition to the forefront. Personalization of typeface and font is another important aspect that the redesign addresses.

Voice Assistant

Asking the Voice Assistant to Perform a Task and the Voice Assistant Highlighting Text and Taking Notes

The redesign endeavour proposes the adoption of a personal voice assistant to help users dictate notes, lookup phrases and words and share snippets with fellow collaborators. The voice assistant navigates through various sections and helps the user through their journey of reading. The home screen in the proposed design houses a voice assistant in the form of a floating button and is also present on the navigation pane on the audio player screen for ease of access.

Redesign Approach — Ability Based Design

The redesign process revolves around an Ability Based Design approach where the solution is responsive to a user’s unique interaction ability and capability. The points of intervention were translated into tangible design solutions.

My focus for this project was integrating the four major actionable insights described above and propose an intervention that is solely focused on users with visual impairments with accessibility as the central perspective. The solution also intends to retain all the essential features of the app, specified in the Rose category of the Rose, Bud, Thorn section.

Leveraging the Voice and Playback Feature in Adobe XD

I used a combination of Figma and Adobe XD for the redesign of the screens along with Adobe After effects to refine and hone in on the voice aspect.

The design solution aims to enhance the reading experience for users of different capabilities, offering a hands-free mode of listening-reading that enables note-making and referencing parts of snippets apart from mainstream reading. Hopefully, the technology of text to speech in its repackaged form along with the marriage of artificial intelligence will be able to leverage natural language processing in order to make the experience seamless and enjoyable for users. Users of all abilities can now summon the voice assistant, look for recommendations and genres and read-listen to audiobooks of their choice.

Reflection

The goal of this design endeavour to study and propose interventions based on secondary research, however, the design process lacks direct exposure to user interviews and user testing sessions and the solutions have to be evaluated and iterated by rounds of testing. The challenge was to use research findings based on case studies and translate them into tangible solutions.

The next steps for this project is to assemble these solutions together with the existing application features, along with modular attributes for those with motor disabilities.

The role and persona of the voice assistant can be further honed in, by adding a voice of its own and shaping up the visual and emotional appeal of the assistant using motion.

Another insight that is an opportunity for future work is the statistics feature which remains untouched in this design challenge.

Overall, finding a way to tie these proposed possibilities with the brand language of the application and integrate it as part of the bigger picture and the business model would be interesting research to pursue.

As designers, we are in the pursuit of crafting products, services and systems that are customer-centric with enhanced experiences but seldom do we focus on cases that are anomalies. In my opinion, accessibility is not an added feature but a design principle, a strong foundation on which the entire solution rests.

“The one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?”
― Steve Krug

References

  1. https://www.lighthouseguild.org/wpcontent/uploads/AYWTK_English.pdf
  2. https://visionaware.org/blog/visually-impaired-now-what/five-great-reading-apps-for-booklovers-who-are-blind-or-visually-impaired/
  3. https://webdesign.tutsplus.com/articles/accessibility-basics-designing-for-visual-impairment--cms-27634
  4. https://www.divaportal.org/smash/get/diva2:1179505/FULLTEXT01.pdf
  5. https://www.microsoft.com/design/inclusive/

--

--

Aashrita Indurti

Interaction and Service Designer | Graduate Student at the School of Design, Carnegie Mellon University