Leo Reader - E-learning platform for
university students with dyslexia. [London]
My role —
Through extensive UX research and design, I collaborated closely with students, teachers, and experts to develop a browser-based e-reader tailored to neurodivergent students.
By conducting interviews, workshops, and user tests, I gained valuable insights into their challenges and transformed them into digital solutions. The outcome is a harmonious blend of user-centered design and user preferences, ensuring an optimal user experience.
- UX research and design.
- Prototyping
This story starts with someone studying for a career in the creative industry. She is a creative person of limitless potential who has her sights fixed on the communications industry.
She also has dyslexia.
When she was given a reading list by her university, she almost dropped out before she began. In her words, ‘it very much put me off. It felt like I was being punished for my dyslexia.’
This student isn’t alone. Proprietary research undertaken by Commercial Break shows that almost two-thirds of media/advertising students with dyslexia aren’t able to complete their reading lists. And a third of them are getting to the point where their problems with the list are almost putting them off or forcing them to choose courses that might be considered more dyslexia-friendly.
Our conclusion was clear: university reading lists in their current form are putting people with dyslexia at a disadvantage.
So how can we fix it?
If the problem is clear, the solution is anything but.
Even though the word ‘dyslexic’ groups people together as a single entity, it presents itself differently in each and every person.
At this point, it’s worth taking a moment to understand exactly what dyslexia is. Generally speaking, dyslexia is defined as a learning difficulty that affects people’s ability to read, write and spell.
- But it affects everyone differently — for some people just reading this article, for example, would be a huge challenge. For others, writing and spelling are more predominant issues.
Similarly, the steps we can take to help manage the challenges of dyslexia will vary from person to person.
Just as we all read, learn and comprehend information in our own way, people with dyslexia are no different.
After undertaking rounds of in-depth research with current and former students with dyslexia, it became clear that the only solution was one that took into account the unique circumstances of each individual.
We needed more than just a new e-reader. We needed advanced features like video, audio, and fully customizable text. We needed a truly bespoke solution for every single student.
Leo is a free-to-use eReader that allows students with dyslexia to access course material in a way that best suits their learning needs.
It’s our first pass at empowering students with the tools to make their learning environment comfortable and truly their own, all in one place.
The tool is built around the three key pillars our research showed to be the most important for a balanced learning experience: customizable reading, listening, and watching. Beyond this, we’ve also digitized some practical techniques that dyslexia specialists use for young students — like underlining text and a built-in dictionary function.
Reading
Reading is where it all starts. We wanted first of all that our readers would actually be able to read what is on the page without using the audio or video options. That is why we developed options for the user to change. Fonts, colors, spacings between letters, paragraphs, sentences. And much more.
Listening
Users can listen to someone reading the text while following along in the book. This reader had to be an actual person as Robo/AI would not do the trick and even worse, would be distracting.
Watching
Seeing someone read the book is an option many of our users really needed. So we made a video. This video is adaptable to anyone’s preferences and has the possibility to be positioned anywhere on the screen.
This way we wanted to create a similar impact as a teacher would be explaining the book to you in real life.
Turning techniques into technology
Growing up with Dyslexia myself, I spent a considerable amount of time working with my teachers and specialists to figure out ways to make learning easier for me. Over time, we figured out what worked best for me: using a ruler to separate the lines I was reading, for example, or having different color filters to put over the text.
Many of these little tips and tricks are similar yet different for us dyslexics. The challenge was how to incorporate these from a UX point of view in a way that maintained the commitment to complete customization.
Designing these was more difficult than you would think. As I said before, each individual is very different. As a UX designer, you mainly use ‘personas’ to build your tools and apps.
Simple things in a regular design process would simply not work here. We needed to go beyond that. We needed more.
Here’s a snapshot of what we added:
- Ruler function: giving users the ability to isolate specific lines of text on a page, adjusting the color and opacity to suit their preferences
- Dictionary: with a simple right-click, we’ve added a built-in dictionary with text speech to help contextualize words for users
- Focus mode: To remove distractions, we’ve added a function where users can enter ‘focus mode’ and set an optional timer of how long they want to keep their attention solely on the reading material
In my experience, most designers of digital products do not keep accessibility in mind when building products. And if they do, it is only on a basic level.
As UX designers, we know that complicated design can create stress for users. But in this case, we needed to find solutions not only to eliminate the stress of doing the task but also eliminate the stress of reading what is on the screen.
When you really think about it, you need to throw overboard every UX trickery you know, and start afresh. Start with nothing and really really listen to not only what our users actually need but also how they perceive what you have built.
Do they understand this icon? Does labeling a button actually work? And most of all, what could be distracting?
- If any distraction creates stress in our user’s minds, our design is wrong.
A few things we found during the design process for people with dyslexia.
Growing up with Dyslexia myself, I spent a considerable amount of time working with my teachers and specialists to figure out ways to make learning easier for me. Over time, we learned that you can’t only use ‘personas’ to build your tools and apps.
- Every single person is extremely different and requires a different approach when reading.
- The personalization of everything is key. And when I say everything I mean everything. Fonts, sizes, spacing, color, backgrounds, dictionaries, and so on.
- Adapt to real-world situations. Adapting to the real world is hard. One simple example of this is our use of the ruler. Could we adapt this to the digital realm? (Yes we could ;)
The future is flexible
For the first time, we have the technology and techniques at our disposal to completely overhaul how students read, understand, and learn. We need to embrace this to ensure that the new world of online learning is fairer and more accessible than the old paper-based world ever was.
But it is important to remember that this issue goes beyond just education — accessibility should be at the forefront of the digital environments we create.
- The age of ‘one size fits all is over, and as UX designers we play an important role in setting the standards of the future.
With Leo, we are going to continue to innovate and improve functionality to live up to our commitment to building a fully customizable learning experience.
We’re still at the start of the journey, but one thing is clear — there’s no going back to the inaccessible world of yesterday.
Three ways to make your design more dyslexia-friendly
Color:
White text on a black background or black text on a white background is very hard to read for people with dyslexia. Instead, opt for a more light background color at least give people the opportunity to have their own.
Font usage:
Fonts are a very important factor when it comes to reading. It makes you go over the pages of a book faster or grab your attention in advertising. Most fonts however are very difficult to read and are often too small for people with reading disabilities. Make sure you have readable fonts at all times. Some good fonts that we found greatly improve someone’s reading capabilities when used.
Text 2 Speech:
Allowing the user to have a text to speech option. If people still have difficulties understanding what you want to bring to them. Allow them to convert your written text to audio. This ideally (as said before) by using an actual human reading what is written. But there are some great AI’s available that just do that.
A final thought
Great leaders in the world have had or have dyslexia. Think about: Amanda Gorman famous for her poetry at the 2021 presidential inauguration. Whoopi Goldberg, Walt Disney, Albert Einstein, John F Kennedy, Picasso, Steven Spielberg, John Lennon, and Leonardo da Vinci.
It is often disregarded in the modern digital age. But think about the millions of people who suffer from learning disabilities and how you could be more inclusive in the products you create.
Previous Case
