Reading is a meaningful hobby for many of us. This is no different for patients who experienced a stroke. Clinical research states that a single line of text needs to move from right to left at varying speeds to help stroke patients regain reading skills. I programmed Adaptability with Visual Studios using C# and designed its interface with Unity. The app was provided to London Health Sciences Center's stroke program.
Adaptability was created before my UX education via Google's UX design certificate course. Therefore, unlike Forte and Thrive, I did not create Adaptability with a UX Design Thinking Framework consisting of the Discovery, Define, Ideate, Prototype, and Test stages. However, in reflection, the steps my colleague and I took to build Adaptability parallel with the UX Design Thinking Framework. For this reason, I will guide you through my thinking process with this framework.
The journey of developing the Adaptability app started with my colleague from my masters’ doing his placement at LHSC working with stroke patients. My colleague and his preceptors identified that vision was a key piece they hadn’t really worked on for stroke patients with the hemianopia condition and recognized that reading was a meaningful activity to many.
In layperson's terms, Hemianopia is not being able to see half of your visual field.
%20-%20hemianopia-678x446.jpeg)
“We need to move a single line of text from right to left varying from 85 to 275 words on screen per minute.” - Colleague
When someone experiences homonymous hemianopia as a result of an injury to the brain, this can impact day-to-day function. In particular, reading can be very difficult. Recently, research has shown that practicing reading moving text (known as optokinetic’s) can help someone learn to direct their eyesight to the oncoming words (Schuett, 2009; Spitzyna et al, 2007). Research has shown an 18% increase in reading speed without an increase in errors using this type of reading training program (Spitzyna et al, 2007). One review of rehabilitation for hemianopic dyslexia found that the repetitive and systematic practice of eye movements that occur during reading result in clinically relevant long term benefits of improving reading abilities. This type of reading system can help users establish a more efficient eye-movement strategy when reading (Schuett, 2009). Studies have also shown that over-learning leads to automatization of compensatory eye movements (Schuett, 2009). Therefore, training should be carried out at high rates of repetition, approximately 30 minutes every day, or every other day for 2-3 weeks (Schuett, 2009; Spitzyna et al, 2007).
The primary clinical literature (moving a single line of text from right to left at 85 to 275 words on screen per minute for reading rehab) that my colleague cited used Computer Image Technology to conduct their tests. When my colleague tried to access this website, it was not functional, unclear how it would conduct their tests, and outdated. After scouring the internet, it was clear that no product in the market could do what the clinical literature stated.
My colleague and his preceptor recognized the importance of creating an app that can move a single line of text from right to left, varying from 85 to 275 words on screen per minute. Knowing that there was no product in the market and that I had experience programming and designing, my colleague approached me to form a partnership. I accepted, and we decided to be innovative and fill a gap in the market because there is a strong need to help stroke patients regain reading skills.
Because there was no similar product in the market, I didn't know where to start at first. Thus, I brainstormed any ideas that came to my mind. Out of these, I felt that creating an app with a library of online books was logical because I was trying to help stroke patients regain reading skills. I performed an unofficial competitive analysis on media-playing apps (e.g., Books, Movies) like Kindle and Netflix to understand their strengths and weaknesses to form intelligent design decisions.
Some of the strengths I wanted to maintain were:
1) Netflix's organized assortment of content based on categories
2) Kindle's easy to understand UX for chapters
3) Kindle's flexible settings
Some of the weaknesses I wanted to address were:
1) Kindle's bland UI to become more vibrant like Netflix
Then, to avoid copyright issues, I put public domain books like Alice in Wonderland and The Great Gatsby in my library.
Next, I decided that each chapter of each book should be its own separate page. As the app grows more extensive with more books and chapters, I needed to create an automated system to minimize manual work. Thus, I planned the following steps:
1) Find public domain book's PDF.
2) Copy each chapter into a word document.
3) Find the character count for each chapter.
4) Create a mathematical expression. When the character count is plugged into the expression, it should spread the Textbox holding the chapter content so that a paragraph becomes 1 line.
While my colleague worked on his clinical research hypothesis, I took on the role of researching ways to make Adaptability more accessible. For further details, check out the Accessibility section.
My programming goals were to:
1) Create a library that can easily add and edit books.
2) Create the ability to easily select different chapters.
3) Play, pause, fast-forward, rewind, and restart the moving line of text.
4) Create settings to change text moving speed.
I learned how to program with C# from free or inexpensive online courses (e.g., Udemy, Freecodecamp, and YouTube tutorials). Furthermore, before Adaptability, I had already programmed two small video games - Cannonball and Odyssey. Thus, I was able to program these goals based on what I learned from my experience and from Stackoverflow and various programming forums.
For a detailed look at my code, please visit my GitHub!
As mentioned before, I created Adaptability before my UX education. Thus, I did not make wireframes and prototypes but went straight into engineering the app. With that said, the designing job was iterative and informed by my experience creating two video games and from my unofficial competitive analysis of Kindle and Netflix.
The iterations from the early days to the final product can be seen below.
As mentioned before, I created Adaptability before my UX education. Thus, my colleague and I did not conduct an official usability study. With that said, we tested the app with the LHSC therapists, which included my colleague's former preceptor. The therapists tried the app for a week, and they provided the following feedback.
1) Improve legibility
The default body text size was 20. However, the therapists stated that the texts are harder to read, especially because the text moves. They advised me to increase the font size by at least 2-fold. Thus, the default body text size was changed from 20 to 42.
2) Add more content
When the app was first released for testing, I only included 1 book because I wanted to focus on the core functionality first. The therapists reassured me that the core functionality works well and that I should add at least 5 books to give their patients enough content. Thus, I went from having 1 book to 5 books.
While going through my process, implementing accessible design was a strong priority to ensure that Adaptability was inclusive. The following are what I implemented for Adaptability.
1) Reduce Visual Strain & Colour Contrast
To reduce visual strain, I used a sepia background with not-fully black text colour (Sheppard & Wolffsohn, 2018; Anthony, 2018). Also, the minimum contrast ratio between the foreground and the background colour is 4.5:1 to ensure that the colour use is accessible (WebAIM, 2022; World Wide Web Consortium, 2016). Therefore, I checked the ratio for each combination of foreground and background colours used in Adaptability via WebAIM. These colour combinations were equal to or greater than the minimum 4.5:1 ratio.
2) Legibility
The typical accessible typography size is between 16 pixels to 18 pixels across various reputable sources (Penn State, 2021; W3 Lab, 2019; World Wide Web Consortium, 2016). Thus, all headers and paragraphs in Adaptability are bigger than 18 pixels.
3) User Control and Freedom
I incorporated a smooth way to transition back and forth between pages. Providing users with control and freedom improves usability (Wong, 2022).
After many hours of researching, programming and designing, my colleague and I developed the final app that we are proud to share with you.
I, along with my colleague, created this app because there is a strong need to help stroke patients regain reading skills. Because no product in the market can do what Adaptability does, we divided up our roles and took the initiative to develop this app from start to finish. I am incredibly proud to share this project with the world, and I had so much fun both programming and designing it. As mentioned few times throughout this page, I developed this app before my UX education. Thus, as I learn more about UX theories and practices, these are the following areas I would change if I were to go back.
1) Create a real-time play slider to skip to various areas of the chapter
In many media-playing apps like Netflix, Disney +, and YouTube, a slider moves real-time from left to right, indicating its position from start to finish. I wanted to create this too, but I couldn't figure this out from a programming standpoint. Whether I partner with an engineer or figure it out myself, I would love to add this feature for users' convenience of navigating content.
2) Conduct Usability Tests with patients
My colleague and I received feedback from the LHSC therapists during the Test Stage. Unfortunately, at the time of developing Adaptability, I didn't learn about usability testing. If I were to go back in time, I would love to test the app with the patients because they are the end-users.
For the time being, I'm proud that I was able to leverage my health experience and my tech skills to develop an unprecedented app. Ultimately, I feel honoured that I get to help stroke patients regain their meaningful hobby of reading.
Schuett, S. (2009). The rehabilitation of hemianopic dyslexia. Nature Reviews Neurology, 5(8), 427-437. doi:10.1038/nrneurol.2009.97
Spitzyna, G. A., Wise, R., Mcdonald, S. A., Plant, G. T., Kidd, D., Crewes, H., & Leff, A. P. (2007). Optokinetic therapy improves text reading in patients with hemianopic alexia: A controlled trial. Neurology, 68(22), 1922-1930. doi:10.1212/01.wnl.0000264002.30134.2a
Anthony. (2018, May 8). Why you should never use pure black for text or backgrounds. Why You Should Never Use Pure Black for Text or Backgrounds. Retrieved June 6, 2022, from https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/
Penn State. (2021). Font size on the web. Font Size on the Web. Retrieved June 3, 2022, from https://accessibility.psu.edu/fontsizehtml/
Sheppard, A. L., & Wolffsohn, J. S. (2018). Digital Eye Strain: Prevalence, measurement and Amelioration. BMJ Open Ophthalmology, 3(1), 1–10. https://doi.org/10.1136/bmjophth-2018-000146
W3 Lab. (2019, November 21). How. big. should. A. font. be: Typography. rules. How Big Should A Font Be On A Site? - Rules of Typography. Retrieved June 3, 2022, from https://w3-lab.com/website-font-size-guidelines/
WebAIM. (2022). Contrast checker. Contrast Checker. Retrieved June 3, 2022, from https://webaim.org/resources/contrastchecker/
Wong, E. (2022). Heuristic evaluation: How to conduct a heuristic evaluation. The Interaction Design Foundation. Retrieved July 20, 2022, from https://www.interaction-design.org/literature/article/heuristic-evaluation-how-to-conduct-a-heuristic-evaluation
World Wide Web Consortium. (2016). G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text | Techniques for WCAG 2.0. Retrieved June 3, 2022, from https://www.w3.org/TR/WCAG20-TECHS/G18.html
