Reading capabilities
Reading that's comfortable!
01 | Project overview
What is Reading capabilities?
overview
This was a project within the Google Accessibility team to optimize reading for users with cognitive and visual impairments, such as low vision, autism, dyslexia by highlighting their position and the words being read.
I led the design strategy for mobile highlight features, crucially scoping and prototyping innovative solutions. This project significantly improved the accessibility of Google's products, aligning with best practices.
The solution received positive feedback from key stakeholders and influenced future projects, such as 'Lookout' and other reading capabilities for desktop apps.
my role
Lead Designer — Feature Scoping, Research, Interaction Design, Visual Design, Prototyping
team
x2 UX Designers
x1 UX Researcher
My deliverables
Sketches,Low-fi mockup, High-fi mockup, Prototypes
Video Demos
Timeline
5 months
"Typing Tiger" is an immersive game where children complete word spellings to progress through a captivating story. The app's main mission is to boost children's vocabulary.
PROBLEM
People with Autism, Dyslexia, ADHD, and Low Vision often find current mobile reading tools frustrating and ineffective, causing headaches and hindering task completion. They need a tool that improves comprehension and comfort while adapting to their specific needs.
01
Lack of comfort
02
Difficulty with comprehension
03
Tools don't adust to their needs
Current obstacles
4
Playable characters
10
Difficulty reading levels
20
Options for customization
"Typing Tiger" is an immersive game where children complete word spellings to progress through a captivating story. The app's main mission is to boost children's vocabulary.
4
Playable characters
10
Difficulty reading levels
20
Options for customization
SOLUTION
A method that combines diverse highlight styles with advanced text-to-speech technology, tailored to accommodate disabilities through comprehensive accessibility research, while offering customization options for a personalized reading experience.
02 | THE PROCESS
Unveiling the origin, we can do better!
THE problem
Addressing the Ineffectiveness of Current Mobile Reading Tools
People with Autism, Dyslexia, ADHD, and Low Vision often find current mobile reading tools frustrating, causing headaches and hindering task completion. They need a tool that improves comprehension and comfort.
+
Tools don't adust to their needs
current obstacles
+
Lack of comfort
+
Difficulty with comprehension
PROBLEM
People with Autism, Dyslexia, ADHD, and Low Vision often find current mobile reading tools frustrating and ineffective, causing headaches and hindering task completion. They need a tool that improves comprehension and comfort while adapting to their specific needs.
Current obstacles
+
Lack of comfort
+
Difficulty with comprehension
+
Tools don't adust to their needs
solution
A method that combines diverse highlight styles with advanced text-to-speech technology, tailored to accommodate disabilities.
Essentials
+
Multiple highlight styles
+
Customization options
+
Ideas Supported by Comprehensive Accessibility Research
SOLUTION
A method that combines diverse highlight styles with advanced text-to-speech technology, tailored to accommodate disabilities through comprehensive accessibility research, while offering customization options for a personalized reading experience.
02 | THE PROCESS
Context
02 | THE PROCESS
Unveiling the origin, we can do better!
While participating in user studies for a Chrome browser reading feature, our competitive audit discovered a lack of mobile reading tools for people with Autism, Dyslexia, ADHD, Low Vision.
We couldn't afford to overlook this any longer!
Together with our cross-functional partners, we established a project with these primary goals.
CHALLENGES
Various disabilities can affect comfort and understanding, impacting efficiency
I utilized research reports and WCAG articles to understand how individuals with dyslexia, epilepsy, low vision, autism, and other conditions face challenges when reading on electronic devices. This knowledge helped me created proto-personas to better undertand my audience. Here is one:
Meet jordan!
Jordan is a meticulous data analyst with High-Functioning Autism (Asperger's Syndrome).
She works at a mid-sized financial services firm. Jordan's role involves analyzing complex datasets, preparing reports, and providing insights to support decision-making.
Reading challenges!
Sensory overload from bright screens
Struggle with understanding idiomatic expressions
Difficulty navigating through complex text
Increased stress and anxiety from reading tasks
I utilized research reports and WCAG articles to understand how individuals with dyslexia, epilepsy, low vision, autism, and other disabilities face challenges when reading on electronic devices.
Meet Alex!
A dynamic project manager with Low vision / Severe Myopia and Astigmatism.
He works at a tech startup, using his leadership skills to oversee projects, ensure timely delivery, and manage cross-functional teams.
Reading challenges!
Difficulty reading small text
Experiences eye strain
Frequent headaches
Takes breaks to relieve discomfort
Meet jordan!
Jordan is a meticulous data analyst with High-Functioning Autism (Asperger's Syndrome).
She works at a mid-sized financial services firm. Jordan's role involves analyzing complex datasets, preparing reports, and providing insights to support decision-making.
Reading challenges!
Sensory overload from bright screens
Struggle with understanding idiomatic expressions
Difficulty navigating through complex text
Increased stress and anxiety from reading tasks
Accessibility Check
Assessing accessibility in existing projects
Building on this context, I evaluated previous work against accessibility standards by developing a 45-question report to review reading highlights from earlier projects. This assessment informed and inspired the overall design process for the current project.
Selected report questions
01
Could a smaller highlight with movement trigger a strobe effect in some users?
02
With two consecutive highlights, how distracting might this be for individuals with ADHD?
Early on, I decided to expedite the process for my initial mockup designs, and solutions. I leveraged "Lookout," an Android app with text scanning and read-aloud features.
My goal was to find highlight variations that solve issues. Creating an interface from scratch would require additional resources. I made about 16 mock-ups inspired by the report and previous team work. Here's two.
REASONING
How does integrating a reading highlight with read-aloud benefit users?
Common patterns
A visual feature mirrors tools used by disability communities.
Reduce cognitive load
Highlighting text while reading aids users in focusing on words and phrases rather than tracking their position in the text,
Visual aid benefits
Visually focusing on spoken text improves reading comprehension and literacy skills .
03 | DESIGN Approach
Initial designs and project acceleration
Crafting innovative concepts from scratch
As a component of this project, I also had the responsibility of creating new highlight styles. I've crafted 5 unique design ideas.
Explorations
C
A smaller focus area may aid Low vision users, utilized in VR for discomfort relief.
A
A tapping feature for word definitions could assist individuals with comprehension difficulties
B
Reduce highlight motion to minimize the strobe effect for individuals with epilepsy.
C
A smaller focus area may aid Low vision users, utilized in VR for discomfort relief.
Reduce highlight motion to minimize the strobe effect for individuals with epilepsy.
A smaller focus area may aid Low vision users, utilized in VR for discomfort relief.
04 | User reactions
How the prototypes tackled the test phase!
To initiate testing, I presented to stakeholders, integrated their feedback, and incorporated four styles along with a new design. Some previously presented concepts were chosen for future exploration. Here are the focus group research results:
Phrases Highlight
-
Users on the Autistic spectrum favored highlighted phrases.
-
Some feared seizures from constant highlight movement.
Word Highlight
-
Users favored this for learning, but some with epilepsy feared seizures.
-
Many desired the option to click words for meanings.
Lightbox Highlight
-
People with epilepsy liked the highlight.
-
Others faced challenges with the original text location disappearing.
Fade Effect
-
Many preferred grayed-out text for focus.
-
Yet some with low vision wanted to select the faded color for more comfort.
Double Highlight
-
This proved distracting for users.
-
Difficult to discern whether a paragraph or sentence was selected.
After extensive testing, the solution incorporates multiple highlights to accommodate various users. Here are the final combinations of highlight styles to best support this diverse target audience.
WHo it benefits?
A data analyst with High-Functioning Autism (Asperger's Syndrome).
+
Fade effect reduces Sensory overload
+
Structured reading experience reduces anxiety
Word highlight:
This feature uses word-by-word highlighting to enhance focus and engagement. Fading out read text reduces visual clutter.
These features boost comprehension and productivity for people with autism, ADHD, dyslexia, low vision, cognitive impairments, and learning disabilities.
word Highlight
Final Designs
No single universal solution, but rather a combination of highlights
WHo it benefits?
Meet Sarah!
A customer support specialist with a traumatic brain injury (TBI) finds it challenging to retain information.
+
Reduces cognitive load, increasing information retention
+
Helps maintain focus, and clarity
Single line Highlight
This highlights entire lines of text to reduce motion and distractions. This makes it easier to follow along text.
By providing a steady visual guide, it aids comprehension for people with dyslexia, autism, ADHD, low vision, cognitive impairments, and learning disabilities.
word Highlight
WHo it benefits?
Meet Jason!
A dedicated accountant with Epilepsy who manages financial records for clients.
+
Reduced strobe effect
+
Epilepsy-Friendly Design
Lightbox Highlight
This works by scrolling text upward while keeping the current line static. The lighter color provides a stable reference point, reducing visual distraction.
This offers a gentle location guidance experience that minimizes motion and reduces the strobe effect, which is beneficial for users with epilepsy.
word Highlight
WHo it benefits?
Remember Alex?
A dynamic project manager with Low vision / Severe Myopia and Astigmatism.
+
Reduces eye strain
+
Process information more quickly and effectively
phrases highlight:
The phrase highlight enhances focus and comprehension by recognizing and highlighting entire phrases. Phrase recognition technology ensures phrases aren't broken across lines, by rearranging text format.
Grouping words together helps people, especially those with Autism, understand the meaning. This also helps people with ADHD, dyslexia, low vision, and more.
word Highlight
Analysis
What steps should we consider based on these findings?
Customization
Are we done? Not quite we still need settings
After finalizing the highlights, I developed a user control settings section focused on three key areas.
Highlight preview window
View changes without returning to the main interface
Incorporate extra options
Prevent overwhelming, work on Information Architecture
Visual clarity
Icons and text combine for audience benefit.
These settings underwent extensive research and iterations; however, I will provide only a brief overview of the outcome here for the sake of brevity.
New read aloud settings
A. Voice speed, Highlight style, Fade read text
New highlight menu
B. Off, Words, Phrases, Line, Lightbox
The fade effect
C. Users can add a fade effect to all highlights; previously read words become gray
A
C
B
Some groups desired full-color control, but it overwhelmed the settings, possibly impacting users with autism. Following thorough stakeholder talks, we agreed on four color schemes. When users activate the highlight, its color will be determined by the background and text colors.
Simplifying color control for enhanced accessibility
Let's Work
Together
info@mysite.com
123-456-7890
500 Terry Francois Street,
San Francisco, CA 94158
Home
About
Contact
© 2035 by Business Name. Made with Wix Studio™
Last minute discovery
One final task: Exploring the impact of 'Reduced' Motion
accessibility android options
In a last minute discussion with engineers, I learned about Android's accessibility settings, like reduced motion, which disables animations and features to reduce the strobe effect for users with epilepsy.
If reduced motion is active, word and phrase highlighting is disabled.
Line highlighting becomes default, with lightbox as an option.
Outcomes
Ending
Next steps
Testing
Finish testing settings section.
Moderated testing of highlights with interactive prototypes.
Design
Iterate based on findings from testing.
Explore and design smoother movement highlight motions.
Translate highlight designs to desktop experience.
Explore the word-tapping feature.
Feature planned to launch Q3 of 2024.
Launch
Project learnings
Familiarizing yourself with the format
As a designer, rushing sometimes leads me to miss important details. Transitioning from iPhone to Android posed challenges, like accommodating features such as "smooth motion," which could affect users with epilepsy.
Working with a diverse target audience
I wanted to give everything my users asked for, yet I realized that less is more. In this case, what worked for some could push away others. In conversations with cross-functional partners, I understood the importance of sticking to the design scope.
Explain your process better when innovating
During this project, my communication and presentation skills improved significantly. Articulating design rationale bettered feedback from partners, resulting in a well-received new feature introduction.
Featured in..
Discoveries and variations from this project influenced Lookout's upcoming update, an accessibility mobile app for blind and low-vision users with 100, 000 downloads. While also influencing Google's Reading Capabilities!
Learn more at the link below.
Lookout - Assisted vision
Googel LLC
I utilized research reports and WCAG articles to understand how individuals with dyslexia, epilepsy, low vision, autism, and other disabilities face challenges when reading on electronic devices.
Meet Alex!
A dynamic project manager with Low vision / Severe Myopia and Astigmatism.
He works at a tech startup, using his leadership skills to oversee projects, ensure timely delivery, and manage cross-functional teams.
Reading challenges!
Difficulty reading small text
Experiences eye strain
Frequent headaches
Takes breaks to relieve discomfort
Meet jordan!
Jordan is a meticulous data analyst with High-Functioning Autism (Asperger's Syndrome).
She works at a mid-sized financial services firm. Jordan's role involves analyzing complex datasets, preparing reports, and providing insights to support decision-making.
Reading challenges!
Sensory overload from bright screens
Struggle with understanding idiomatic expressions
Difficulty navigating through complex text
Increased stress and anxiety from reading tasks