Accessibiity
User Research
UX/UI

eBook App Redesign for Users with ADHD

Designing features that improve the experience of using the Everand eBook app, making it more accessible to users with ADHD.


Solo

13 Weeks

Background

Everand is a digital library app that provides eBooks, audiobooks, and more. At the time of this project, Everand lacked accessibility features, potentially alienating users from productivity. Within this case study, I look at Attention Deficit Hyperactivity Disorder (ADHD) specifically.


Why did I choose to focus on ADHD?

Microsoft's Inclusive Design methodology believes in the notion of "Solve for One, extend to many." Invisible disabilities are especially often overlooked when it comes to designing for accessibility. By designing for ADHD which affects 2.6% of adults worldwide, I hope to open up accessibility to a wide range of users.

PROBLEM STATEMENT

“How might we make the Everand reading experience more accessible to people with poor attention, improving productivity?"

ADDED FEATURES

Final Prototype

Graduation/school cap

Tutorial

Users are informed of all helpful reading features.

Book with an audio speaker icon

Read-Aloud

The audio-visual pairing improves sustained attention.

Lines representing text with a hand tapping on them

Completion Highlighting

Keeps user engaged though increased interaction with the app.

Percentage symbol

Progress Tracking

Improves motivation and encourages the user to continue their task as they feel rewarded.

PROCESS

The Journey

The project was broken down into phases following the Double Diamond (colour-coded for convenience!):

Discover

  • Constraint Mapping
  • User Research
  • Secondary Research

Define

  • Research Triangulation
  • Personas
  • Proposed Solution

Develop

  • Wireframing
  • UI Style Guide
  • User Testing

Deliver

  • Final Design
  • Reflection

DISCOVER

Constraint Mapping

I began the Discover stage by doing a Constraint Mapping activity where I brainstormed permanent, situational, and temporary constraints that users of the app with ADHD may have. These were also adopted from Microsoft's Inclusive Design principles and would later help with persona development.

Chart showing users with varing degrees of attention deficit: Permanent (user with ADHD), Situational (user distracted by grief), Temporary (user who is sleep deprived)

DISCOVER

Research

Research consisted of User Research (semi-structured interview and observation) and a Literature Review.




User Research

The interview and observation took place virtually with a webcam facing the user so I could see their facial expressions and behaviour as they used Everand. Interview questions were asked before and after the observation for which the user was tasked to read a book of their choice for 10 minutes.

Virtual interview with the interviewee visible through a monitor holding a phone

INTERVIEW SUMMARY

Frustrated emoji head

ADHD Experience

User struggles with extended tasks and non-immediate rewards.

Checklist icon

Managing ADHD

User manages ADHD using planners, checklists, routines, and time pressures.

Everand logo

Everand Impressions

Easy navigation due to experience with similar apps. Mentions lack of tutorial. Some difficulty with reading task—prefers physical books due to less distractions.

Two twinkling stars

Desired Features

Rewards for reading progress, highlighting parts of the page that have already been read which acts as a checklist to increase feelings of accomplishment.

Secondary Research

Scholarly articles related to ADHD, reading, and acessibility were read. Literature reviews of these articles were made and my key findings are as follows:

DEFINE

Personas

Using data from all research sources about ADHD, I developed three personas to capture each type of contstraint (permanent, temporary, and situational) centered around attention deficit. Select the cards below to show/hide more details.

Permanent

Image of a young man in a hoodie wearing a hat

Sean Nicols, 22

Full-time gas station attendant, has ADHD

Situational

Young woman smiling

Fiona Hlavach, 26

Full-time bank teller, experiencing grief

Temporary

Young man with curly hair and glasses sitting in a lecture hall

Bradley El-Sawy, 20

3rd year Civil Engineering student, sleep deprived

DEFINE

Proposed Solution

Analyzing research and creating personas allowed me to develop a possible solution to solve the users’ mismatched interaction.

A venn diagram including all of the possible solutions gathered from each source of research was created. Here, I can hone in on which features are more necessary. Although the tutorial was only mentioned on one side, I felt that it should be considered since it increases user-friendliness. According to an NNGroup article, icons weren't sufficient in letting users know what features were available and therefore a tutorial may be a good idea to implement.

Venn diagram of solutions resulting from the Research phase (Interviews on the left, Literature reviews on the right)

DEVELOP

UI Style Guide

I analyzed the branding and style of the Everand app in order to adapt my features. Below is a summarized style guide.

Style guide showing brand colours, buttons, icons and assets, and fonts

DEVELOP

Wireframes

Wireframes were created utilizing the style guide. Low-fidelity wireframes were made first and then later shown to the same participant for feedback. High-fidelity wireframes were optimized based on feedback. In the end, a total of 36 screens were created in order to get the final prototype working.


Low-fidelity

Four examples of low-fidelity screen wireframes of the redesign

High-fidelity

Mid-fidelity versions of the low-fidelity wireframes

DEVELOP

User Testing

The same interviewee during the Discover phase was contacted again for feedback. A Qualitative Preference Test of the wireframes and a remote Wizard of Oz of a mid-fidelity prototype was conducted.


Image showcasing the preference testing on the left (Two designs with a speech bubble showing the user's opinion) and Wizard of Oz testing on the right (Interviewer moving through the prototype based on what the user is saying)

OUTCOMES OF TESTING

  • Changed copy and UI elements based on both tests
  • Different positioning of elements based on Preference Testing
  • Modification of new functionality (e.g., adding pitch as an option for the Read-Aloud feature)

DELIVER

Final Design

The culmination of research and user testing! The final Everand redesign includes four new features intended to improve productivity of ADHD users but applies to everyone:
Tutorials, Read-Aloud, Completion Highlighting, and Progress Tracking.

A video demo is available below.

DELIVER

Reflection: Designing with, not just for users

Invisible disabilities shouldn't be considered less important just because we can't see them. This project reinforced the importance of preliminary research and working with users to reach a solution. As designers, we must consider all possible usability challenges our users face. I was fortunately able to gain a better understanding of users with ADHD by working closely with one which gave me insights that I would have never considered on my own. Each user's experiences are unique and each interaction gives us a new perspective to consider when designing.