Online Reading Experience Redesigned

UX Design, Digital Accessibility, UX Research, 2019


When is the last time you went to a website to read something, and got bombarded by all the ads, pop-ups, and animations?

Now imagine, what’s online reading like for people with ADHD (Attention Deficit Hyperactivity Disorder)?

Primary Research

From initial research in online ADHD communities (particularly Reddit), I gained certain insights:

  • Maintaining focus in readings is particularly hard when the user is not interested in the content. Depending on engagement, users may hyperfocus
  • May get stuck rereading the same things over and over or skim through everything and not be immersed or absorb any content
  • Tend to get distracted or irritated by website elements like pop-ups, gifs and auto-play
  • Tend to leave a large number of browser tabs open, thinking they will get back to them

Target Users


What I also noticed in my primary online research is that many students, especially college students with ADHD have trouble finishing reading for classes. From APSARD, more than half of children with ADHD will attend a 2- or 4-year university, with prevalence rates of ADHD in college students estimated to be 5%.

Therefore, I defined the primary target users as university students with ADHD who constantly need to finish compulsory readings and do a lot of online research for different classes.

Question

How might we improve the online reading experience on desktop websites for college students with ADHD?

Interviews

I interviewed 5 current students (male/female mix,  age 21-26 ) studying in university who reported that they experience attention issues when reading.

Some questions I asked include:

  • Can you elaborate on how you experience attention issues?
  • What are some techniques you use to cope with attention issues?
  • What are some digital tools/settings you use to cope with attention issues? What do you like about them?
  • How do you organize your reading materials?
  • ...

Research Insights Synthesis

Combining interviews and online research insights, some questions are answered:

What are some pain points?
  • Difficult to read when the users are not interested in the content.
  • Rereading sentences over and over or mechanically continuing reading but do not absorb information.
  • Reading online can be difficult because “everything is one tab away”.

What are some existing techniques that help improve reading experience?
  • Allocate time for reading and take breaks regularly
  • Audio books, text-to-speech and podcast
  • Graphics novels and videos
  • Print things out.
  • Active engagement with the readings using highlights or note-taking
  • Gamification or incentive system for managing tasks
  • Use of reading immersion tools and organization tools and tab management plugin

What are some existing digital products?
  • Habitica (Incentive and reward system)
  • W3M (text-based web browser with less distractions)
  • Ad-blocker
  • Vivaldi browser (can toggle off UI for less distractions)
  • Fokus (emphasizes selected elements by covering the rest of the page with a semi-transparent black overlay)
  • Evernote (note-taking)
  • F.lux. (adjust screen color)
  • Beeline Reader (gradient text)
  • Anki (flashcard)
  • speakIt (text-to-speech)
  • Spreed (speed reading, displays few words at once)
  • Pocket & Save To Pocket

In this project, I will be redesigning the Save To Pocket Chrome extension.

Persona

  • Name: Drew Daniels
  • Age: 21
  • Male
  • College senior studying in a media art & design program at a major private research university in the city of New York
  • Multimedia performance artist
  • Diagnosed with ADHD

Problems & Pain Points
  • Feels bored and gets distracted easily when reading for mandatory assignments that he is not interested in.
  • Has a hard time organizing and keeping track of all the readings from multiple classes and different projects.

Goals
  • To do well in school
  • To create artwork and performances

Tasks
  • Complete mandatory readings (usually digitally) from school and write responses/reflections/discussions
  • Do online research for projects and inspirations

Facts About Drew:
  • Very familiar with web technologies and searching for desired information online
  • Tends to avoid text-based readings when possible and find sources that can substitute plain text readings, such as video tutorials, podcast or graphics
  • Finds actively engaging with text-based readings through notes and highlights helpful for absorbing and remembering key information
  • Newly started to use Pocket web app and Save to Pocket Chrome Extension

Current Save to Pocket Experience

Things We Like:
  • Save and access everything in one place
  • Tags to group online articles
  • Clean and easy-to-read interface with customizable font and theme
Things We Dislike:
  • No easy way to take notes while reading (Need to connect with external software)
  • Save to Pocket requires opening Pocket web app to read    

A quote from Drew: “I have to open a new page and go into Pocket to use their reading interface, and that’s really inconvenient.” 

Existing Pocket Experience:
Click extension icon
        ⬇                       
Page saved
        ⬇
Expand Options
        ⬇
Go to Pocket Web App
        ⬇
Find page and enter reading mode
Redesigning Pocket Experience:
Click extension icon
        ⬇  
Page saved
        ⬇
Toggle and enter reading mode


Feature Prioritization

Based on research insights, new features to be added to Save to Pocket NOW:

  • Reading Mode toggle -> a more streamlined “save and read” experience
  • Full screen immersive view -> technique to reduce onscreen distractions
  • Bookmark at specific reading location  -> reminder of where to restart
  • Content highlight & note-taking -> facilitate active engagement with the readings
  • Text-to-speech  -> multimedia way to absorb information



Sketches & Wireframes




In a page, when the browser extension icon is clicked.


In reading mode, when text is selected.

Prototype



Test the prototype in Figma.

User Testing

  • I would use text-to-speak when I want to do other things as well.
  • Text-to-Speak feature would help me focus, especially if the word being spoken is highlighted on screen.
  • I expect a pop-up that let me write my notes.
  • What if I want to use text-to-speech on certain paragraphs?
  • It may be helpful to have “Prev” and “Next” to skip sentences in text-to-speech.
  • What about PDF readings?

Future Implementation

  • (Text-to-speech) skipping/starts on selected location <- User testing
  • (Text-to-speech) adjustable speed <- Research (habit of fasten audio speed)
  • pre-set reading time and break time for a session <- Research (technique of taking breaks)
  • Gamified/Incentive system for completing readings <- Research/Competitive Product (Habitica)
  • Colored gradient text <- Competitive product (Beeline reader)
  • Import offline text formats <- Competitive product (Spreed) /User testing

Mark