ReactJS Calendar App for Adults with Disabilities

User Testing & UI Design | Accessibility | Ethical Considerations | Start to Finish Project

HTML / CSS / ReactJS • AI ChatGPT

Project Report >

Project Concept

I work assisting adults with intellectual and developmental disabilities with daily tasks and care. In my 6 years doing so, I have seen how limitations in sight, hearing, motor function, and learning disabilities impact how individuals interact with a device or program. Because needs differ between each individual, it is hard to create technology so targeted and specific to one person’s needs. I wanted to create a project to help both the individual, and their assisting staff/family/friends keep track of upcoming events.

Highlights from the Project Report

Technologies in the Field Now & Existing Problems

In my previous experience taking care of adults with disabilities, technology options are very limited in the field. Although there is access to devices, software becomes too complicated to figure out and put into practice. The individuals I work with have poor motor function (shaky hands, limited neck movement, only one moveable finger…), limited eyesight, a range of reading comprehension skills, and operate at a different mental age than their physical age. Developing technology that serves this population is difficult. Important priorities for any assistive technology for this demographic include:

  • Preserve dignity by ensuring the app isn’t too childlike or too sophisticated that it detracts from the user experience; the app should ensure that users do not feel like they are not smart enough or like they are being patronized.

  • Increased readability options (font size, colors, etc.)

  • Larger content is better suited for those with poor hand-eye coordination.

  • Simple content that is self-explanatory, not overwhelming, and easy to look at.

Apps currently used in tis field are either too simple or too complex and are unable to meet these specific needs.

User Testing

I was not able to test this product with users in my target audience, however, I have worked with my users in my target audience for over 6 years and have a good sense of their motor function and sight limitations. While performing personal user testing on this product in the mindset/body of my users, I found a few things that needed fixing:

  • Buttons were too close together

  • Some people don’t know how to read the number dates 

  • Visual icons are needed in addition to text for buttons options

  • Edit and Save buttons need to be bigger

I additionally tested this product with someone serving as my secondary user (staff, family, friends, etc.). This person has limited technology skills, and a short attention span, and becomes extremely frustrated when there is confusion or difficulty navigating an app. The purpose of testing with this person was to ensure that app navigation was self-explanatory for someone given no instruction. This user test happened towards the end of my project timeline–these corrections have not yet been implemented:

  • Upon first loading the screen, there was some confusion about why the name was not their name.

  • There was some confusion about “now what” once they were done with their task.

To see further details on each of these areas, please see full project report.

Reflection

My general learning objectives for this project are in correspondence with my undergraduate program and university-wide learning goals:

  • Critical Thinking

  • Global Responsibility

  • Creativity

  • Problem Solving

These learning goals were met throughout the process of building this app. I used critical thinking to make decisions to cut out features, reorganize tasks so that I could meet deadlines, and reflect throughout this project on my process and vision. I also critically assessed my global responsibility by asking myself how my technical skills could meet the needs of another person. I expressed my creativity when coming up with the app idea, styling it, and creatively coming up with solutions to problem-solving. I utilized my problem-solving skills daily by building and debugging code.

My personal and more specific project and learning goals for this project were to:

  • Create a project idea that serves the needs of diverse groups of people in a way that other technologies fail to meet

  • Learn ReactJS, a programming language I was unfamiliar with

  • Critically assess user experience and implement changes when needed

  • Utilize AI to help debug, something that I am still getting familiar with

  • Increase the rate at which I am learning and developing

  • Complete a project from start to finish

  • Create and meet project deadlines, increase self-discipline to prepare for future teamwork

Future Improvements

Here are a few examples of features I have and how I would improve them moving forward:

I included both the month and day in word form and in number form. 

With further modification, I would create “views.” Views would be selectable based on the individual’s capabilities. I would create a view for number dates, word dates, and both. Including these options would be a great way to be as inclusive as possible. Having a combined view with both words and numbers would be a great educational asset; the brain would begin to form month/day associations over time. 

I added a custom greeting at the top that displays a message “good…” morning, afternoon or evening. 

With further modification, I would create a view that uses images rather than words for those who have a hard time reading. For example, if it is morning, my program would display a clipart of a full sun. If it is afternoon, it would display a clipart of a sun setting. If it is evening, it will display a moon and stars. This would be a great addition because it correlates with what they are already familiar with from sun patterns outside. These images are also most likely used in other communication tools–it is likely the person would recognize them. 

Another method for improving this specific feature is to add background color changes. If it is morning, the background will be sky blue, if it is afternoon it will be bold blue, and if it is evening it will be dark blue. Something like this would also help the individual differentiate the time of day without having to read words or numbers. It would help them develop a sense of time. A feature like this would need to be user-tested over a large amount of time. It is hard to see improvements in brain associations over a short period. 

I included a list view calendar, starting with today’s date.

With further modification, I would include month, week, and year views. Some of the individuals I support are highly intelligent with technology and can interact with these more advanced tools. I would ideally like to make this app tailorable to all skill levels.

I set up the calendar so that there are no events when they first use the app and all event data is stored on local storage.

I chose to use local storage because many of our residents do not have online accounts (such as Google Drive, emails, logins, etc.). Staff are not permitted to set these up but their legal guardian is. Some of our residents do have Google accounts. With further modification, I would include a Google calendar integration that would pull event data from Google into their app. 

I am looking to develop these improvements and many others alongside behavioral specialists, assisting staff, and the individuals they support.