‘SENIORS, I CARE’

ELDERLY SUPPORT WEB APPLICATION

& PLUGIN TOOL

______________________

by

Jordan Cruz

______________________

California State University

Monterey Bay

CST 499 - Capstone

Advisor : Dr. Eric Tao

______________________

Fall B 2021
 2

EXECUTIVE SUMMARY

Clara’s Elderly Support Application

by
Jordan Cruz
Bachelor of Science in Computer Science
California State University Monterey Bay, 2021

The purpose of this project is to provide a streamlined tool to support the elderly

community with maintaining their independence. The elderly community consists of not only

senior citizens, but family members and caregivers too. The locating of help around diet,

physical fitness, transportation, and technology are hard to find. The main goal for this project is

to save time and empower family members, caregivers, and individuals to support an elderly

independent lifestyle. This will be achieved with the main objective-to build out a web based

application, providing microservices centered around technology, transportation, diet, and

fitness. This will empower those individuals of the elderly community and those caring for an

elder, mitigating the expense of senior homes and the lengthy process of locating help.

Only 3.6% of people over 65 years old are in nursing homes. That leaves a lucky few

who have family support, even fewer have the means to be provided a professional Caretaker,

and the rest are left to fend for themselves. So it is imperative to develop an inexpensive solution

that assists the elderly community in sustaining an independent lifestyle. This project has the

potential to support underprivileged senior citizens and families.

 3

TABLE OF CONTENTS
PAGE
PART
I. INTRODUCTION/FEASIBILITY......................................................................... 4
Introduction............................................................................................................ 4
Feasibility Discussion............................................................................................ 5
II. DESIGN REQUIREMENT/USABILITY TEST................................................... 8
Platform.................................................................................................................. 8
Major Functions...................................................................................................... 8
Usability Test Plan.................................................................................................. 9
Usability Testing/ Evaluation.................................................................................. 9
III. FINAL DISCUSSION/REFLECTION..................................................................10
Timeline & Budget.................................................................................................10
Final Implementation.............................................................................................11
Discussion..............................................................................................................23
REFERENCES..............................................................................................................................27
APPENDIX....................................................................................................................................28
A. ACCESSIBILITY AUDIT RESULTS..........................................................................28
B. USABILITY TEST POST-SURVEY............................................................................29
C. DESIGN PRESENTATION..........................................................................................31
 4

PART I

INTRODUCTION & FEASIBILITY

Introduction
‘Seniors, I Care’ will provide a portal to resources that are catered to the elderly

community. The web application will focus on implementing an accessibility friendly interface

to ensure all have equal access to the resources provided. There will also be an implementation

of a vitals tracker system, aimed at assisting in independent lifestyles among the elderly

community. The elderly population in America is often forgotten and left to fend for themselves.

Often living alone with the responsibility of maintaining a healthy and meaningful life. Whether

it is self care or caring for an elder requires more than one would assume. The provided

resources in this project will assist and provide the basic skills necessary for an independent

lifestyle or help an individual caring for someone of the elderly community. Resources will focus

on technology help and tutorials for simple tasks like setting up internet access, transportation

requests, diet recommendations based on personal restrictions, and vitals tracker to help diabetics

and others alike that require daily monitoring.

The main users of this web application will be individual adults around the age of 55 and

older, as this will not only facilitate current senior citizens but those who are new to the

community. This product will allow any user to access the provided resources, but will be able to

generate an account in order to track personal vitals. The product can be made available in

various ways, one would be to host the site on a personal server as the traffic should not require

the utilities provided by third party hosts. Future goals would also include mobile application

development to broaden the scope and usability of this product. The more platforms this product

can be made available too, the more lives it can positively impact.
 5

Feasibility Discussion

There are many websites that cater to the elderly population, but few exist with the focus

of streamlining elderly support for daily life. The only similar service provided online is through

a company called BrightHorizons. A service that is typically provided through employment at a

providing company, BrightHorizons aims to help with childcare and elderly care. This web

application allows you to book a caregiver and create a profile to track information along with

access to a resource library. It is unclear if they provide services to those who are not employed

or who cannot afford the service they provide. What will make CESA unique is the ability to

consolidate, and streamline all these services in one location regardless of employment status.

The importance is placed on making a place where the evolving internet and all its tools

available are not so daunting.

An interesting byproduct of this service is that this does not just have to serve the senior

population. This can be used as a tool to prepare those who are transitioning into the elderly

community, something I am sure all seniors wish they had prior to going about life with little to

no support. This also would help network and provide cross-connections to various support

groups/non- profits that have similar visions and goals. ‘Seniors, I Care’ could create a stronger

relationship with our elderly population, and provide a helping hand to a community that is too

often left behind.

The project is needed because it has the potential to dramatically impact an often

forgotten part of our society. Senior citizens need more support now more than ever, as

everything migrates to a more automated and technologically focused future. This project has the

hopes of supporting senior citizens and their independence. There are products aimed at assisting

the elderly community, but what good is it if the elderly community cannot use or access what is
 6

provided. This project will be a tool aimed at supporting elderly independence, but has the hopes

and aspirations for more. Providing the fundamentals for using technology and allocating

necessities where needed can save costs across the board, which is crucial to an already

underfunded community.

Developing any application involves careful consideration to the various lives it can have

an impact on. An application geared towards the elderly community would need to consider how

accessibility will be accounted for. This is a very broad ethical dilemma as accessibility can

apply in countless ways. This can apply to those who can and cannot access the internet, the

“digital divide” that is prevalent in all application development. Users of the elderly community

could have vision problems, hearing problems, dexterity issues, and many others. To account for

such a wide range of accessibility needs, the best way would be to implement and modify current

accessibility standards. Fonts can be increased in size to allow easier readability. Audible clicks

can be increased to an acceptable volume to ensure those hard of hearing users can still navigate

the application. This project has been designed to empower those who feel left out, and to

provide a more inclusive sense of community.

Another consideration to be taken when developing applications is the legal implications.

This is entirely dependent on the content one is providing and what the required information is

from the user. When dealing with the elderly community, there are no specific laws geared

towards them. A law to consider would be the California Privacy Rights Act (CPRA), where the

users are entitled to a ‘Right to restriction’. This means they can limit the use and disclosure of

personal information. This can easily be accommodated with a user agreement, asking the user if

they would like to share. Important note, this project will not require any personal information to

use the web application. Users who desire can create a profile to track their activity on the web
 7

application and any results provided to them. There will be a required username and password to

create accounts, which could lead to security issues. This is addressed by only providing

administrators access to the data. Hashing will be implemented to stretch passwords, with the

hopes of deterring security breachers with a computationally expensive crack.

Nothing is perfect, and application security can only withstand so much. A potential legal

concern would be the tracked data on personal accounts becoming compromised. To combat this,

the required information will only be used to determine the best recommended services. The

registration of an account will not require medical information or pre diagnosed conditions. By

not housing any sensitive information, this web application does not pose a security threat to any

users.

The long-term potential of this product looks to be a possible quarterly update, with

updates to provided resources and accessibility compliance. The end goal potential would be to

start a non-profit organization to provide this service to a much broader audience in the elderly

community. Future enhancements would include more personalized accounts provided A.I.

recommendations for self-care and diet. There is also hope of collaborating with other non-profit

organizations to set-up in home support. This would include a wide range of things from

transportation and meals to internet set-up and maintenance. There is also a vision of a mobile

application to get help into every hand that needs it. For a forgotten part of our community that is

not in the forefront when it comes to engineering and design, the possibilities for this web

application are endless.

 8

PART II

DESIGN REQUIREMENT & USABILITY TEST

Platform
In the original proposal it was decided to use the Drupal content management system, but

this was changed due to accessibility issues. The platform that was chosen to mitigate this issue

was the Wordpress content management system. Wordpress has built in accessibility features that

allow instant compliance, but as the website develops and becomes more complex there requires

more developer presence to remain compliant with the Web Content Accessibility Guidelines

(WCAG). This is important to ensure there are no legal implications when using ‘Seniors, I

Care’. By using Wordpress, this project was able to deliver a scalable tool to help senior citizens

in their quest to remain independent.

Major Functions

The major functions of this project help deliver a WCAG driven website, as displayed

from the results of an accessibility audit tool (Appendix A), that allows all potential users access

to an unbiased experience. Ensuring there are no legal ramifications by complying with

accessibility guidelines. The theme itself is WCAG compliant and the contents of the web tool

are all compatible with third-party screen readers. A Wordpress plugin was designed and

optimized to allow users an accessibility toolkit. Located to the right of each webpage, the

accessibility tool allows users to alter the webpage to assist those with impaired vision or color

blindness. A user can change the contrast of the webpage from high to negative, they can

increase and decrease the text size, alter the background to white for better readability, underline

the links on the webpage for quicker navigation, and change the fonts if the user finds the default
 9

difficult to read. Along with the toolkit, there has been placed a skip navigation link that allows

users navigating with a keyboard to get directly to the desired content. Lastly there is the user

registration, which allows users to leave comments and feedback. The major functions of this

project are aimed at accessibility and ensuring that any user that wants access has it.

Usability Test Plan

The usability test plan is to engage with a focus group composed of representatives from

various age groups, but all who are involved with senior citizens. This will ensure the content is

driven towards the senior citizen population. Each focus group member will be tested separately

due to time constraints and various schedules. For each test, the user will be provided a set of

tasks to complete while using the website. Help will be provided if they are unable to complete a

task. To get proper feedback a survey was developed using Google Forms (Appendix B), to

gauge where each user was in regards to completing tasks and navigating the website.

Usability Testing & Evaluation

Testing and evaluations were conducted according to the plan, each user was provided the

website on a local computer. The users were then provided with tasks to complete and were

encouraged to ask questions if need be. There were very few issues during testing, the only

questions were asked by the focus group members who were not as familiar with using the

internet. After completing the tasks, users in the focus group were emailed a survey (Appendix

B) to fill out and encouraged to provide any type of feedback. This survey was the tool used to

evaluate where the user was in terms of using this resource. Overall the testing went well,

resulting in great real world experience and positive feedback that will drive further development

of this project.
 10

PART III

FINAL DISCUSSION & REFLECTION

Timeline & Budget

The timeline and milestones proposed prior to the completion of the project are listed
below:
● Gathering requirements

○ Interview with the focus group

● Design and Develop Prototype

○ Flesh out web pages to use youtube api, google maps api

● Feedback from the focus group

○ Feedback on vital tracker, appearance, and accessibility

● Design and Develop Improved Prototype

○ Makes changes to resources and layout as need, develop custom

caregiver/admin portal, add functionality to add/delete vital tracker/users, and

refine accessibility

● Usability testing

○ Final testing and focus group feedback

The gathering of requirements was met, and initial requests and feedback were taken from the

focus group. For future purposes, a requirement to check the community support when deciding

on which platform to use. The design and development of the prototype went smoothly as it was

focused on providing a visual experience. Testing of whether or not the CSS, HTML, and the

content would meet the standards set by the web accessibility guidelines. An issue arose during

the feedback session with the platform I had chosen, there were accessibility issues discovered
 11

revolving around the website. Upon research and discussion, it was found there was little

community support in general for drupal and specifically around accessibility. Never having used

the platform before, this presented a major red flag as I began to look into implementing the

more complex functions of the project. Another issue was that after further research, Drupal

could become inaccessible to those with poor internet quality. This is an issue, as the overall goal

of the project is to provide a totally accessible web tool.

To mitigate these issues, the decision was made to switch the platform to Wordpress as it

was very similar to Drupal. The biggest difference being the community support was more

abundant for Wordpress. After this change, the outlook and scope of the project changed due to

time constraints. The other milestones that caused an issue was the vital tracker, as initial design

and implementation proved to be difficult to implement with Wordpress out of the box database.

So with the time left to implement and test it was decided to provide a better user experience by

allowing comments to registered users only. Wordpress, although powerful and popular, really

provided limited options in building a dynamic user experience. There was no budget issue, as

there was no proposed budget so nothing went over what was planned. The project had high

ambitions to start off with, but due to a lack in time and experience there is more to be desired.

Overall the milestones and budget definition were a great way of keeping the project streamlined

and ensuring that deadlines were met, this will be something I take away to come out better in

future projects.

Final Implementation

The projects’ final implementation was successful and yielded a highly accessible web

tool aimed at providing seniors with streamlined information and resources. The core of the

project will center around the design and development of the accessibility tool and its database
 12

for use now and further development beyond this implementation. The default database schema

for Wordpress was used to facilitate the development of the website and the accessibility tools. In

order to manipulate the database in Wordpress certain commands were leveraged to connect and

edit the database when the time came. The function (Figure 1) first secures a connection to the

database on the Wordpress server and then php is used to manipulate the database, something

that is typically done on the PHP admin screen. Within the function, querying is accomplished

through familiar SQL queries. This helped maximize the database and allowed freeing up of

space for unused data within the tables and creation of tables for future development.

Figure 1. Pseudo code to create connection to database on Wordpress servers and run SQL
queries on the database.

An admin would like to manage users, comments, feedback, and all content on the

website. The tables of the backend database (Figure 2) are important and help maintain an

organized environment for our input and collected data. The wp_users table tracks various

amounts of data, but for the project we focused on username, password, and email. The wp_posts

table keeps track of everything related to a blog post from author, title, date/time post was mate

or update, and the entire contents of the blog post. The wp_usermeta table leverages the

wp_users table to track additional information like users last name. The wp_comments table

leverages the wp_users table to verify whether a user can leave a comment or not. It also

contains both approved and non-approved comments along with data about the author, data/time,
 13

their email, and the type of comment. The wp_commentmeta takes account for extra information

around comments like where the comment was made. The wp_term_relationships uses the

wp_posts to maintain relationships, for instance between posts and their associated tages. The

wp_term_taxonomy table leverages the wp_term_relationships for descriptions of categories,

tags, and associated links. The wp_terms and wp_termsmets share a relationship ship with

wp_term_taxonomy and wp_term_relationships as it involves the storage of categories and

related links. The wp_links table is there by default as it is mainly for older versions of

Wordpress websites and the wp_options table stores all the settings of the site including any

plug-ins and themes, both of which do not possess a relation to other tables. The majority of PHP

files that comprise this project make use of this database to display and update all stored

information on the website.

 14

Figure 2. WP Database Schema.

The user can either register (Figure 3) and become a subscriber to the website or they can

login to a previously created account. If the user selects to register, the user will be asked to

provide a desired username and a working email address.

 15

Figure 3. Code to check and register a new user.

Upon registering the user will be provided an email with a link to set up a password and

complete the account registration. Only will authenticated users be able to make comments to

posts and replies, making this a more unique user experience (Figure 4).

Figure 4. User authentication

 16

The final functions of the project revolve around the accessibility design of the website

and tools to assist with different disabilities. A web page template was developed using PHP and

referenced to facilitate the compliance of each individual page and its contents. The template and

accessibility tool were designed to follow and be compliant as possible with the WCAG. The

WCAG, which are provided by the world wide web consortium

(http://www.w3.org/TR/200X/REC-WCAG20-20081211/, Latest version at

http://www.w3.org/TR/WCAG20/) , are based on four foundational principles, which are as

follows:

● Perceivable

○ Provide text alternatives for non-text content

○ Provide captions and other alternatives for multimedia content

○ Make it easier for users to see and hear content

 17

● Operable

○ Make all functionality available from a keyboard

○ Give users enough time to read and use the content

○ Do not use content that causes seizures or physical reaction

○ Help users navigate and find content

● Understandable

○ Make text readable and understandable

○ Make content appear and operate in predictable ways

● Robust

○ Maximize compatibility with current and future user tools

The website is perceivable, as each non-text element possesses an alt-text description to

assist screen readers. The accessibility tool assists users by making content more readable and

engaging . The user is provided the choice to alter the text (Figure 5), for example by resizing to

either larger or smaller than the default. By passing the actions to the function, it is determined

what to perform like whether to alter the text to a larger size or a smaller size.

Figure 5. Code snippet for toggling the actions of the accessibility tool for resizing the text

size to larger or smaller than the default as well as determine state of schema
 18

The user can also reset all changes made to the content, and all changes made by the user are

stored in the background on the user’s local storage (Figure 6). The reset function will set the

state of the page back to the stored key. The save and set local storage functions enable the

accessibility tool plug-in to temporarily store the altered state based on the user interaction. This

promotes better engagement as the user feels as if the page is being made just for them in real

time.
 19

Figure 6. Reset altered content to default state and store all actions on the local storage for
access to restore or reset.

The user can also alter the page to a high contrast or negative contrast, the user can alter the

background to make text easier to read, and lastly the user can place an underline on all links on

the current page (Figure 7). This is all done by reference to presets of CSS for each contrast and

cosmetic change, and all presets are compliant with the WCAG.

Figure 7. Code snippet for making the website content black and white (greyscale), high

contrast, negative contrast, or a light background to better see text.

 20

Ensuring the website is operable and understandable, accessibility audits were run

rountinly to ensure content was acceptable (Appendix A) and manual tests were performed to

ensure keyboard navigation was not overlooked and content flow was correct. Lastly, the

accessibility tool has been implemented as a plug-in and with further development it could

become available to all developers. The posts in the blog categories are also updated based on

the most recent update in each category (Figure 8).

Figure 8. Pseudo Code snippet for showing recent posts based on category
 21

The final piece of ensuring this project was operable was to test and ensure the developed plugin

would function in the Wordpress environment. This was done through careful implementation of

various Wordpress unit and end-to-end tests (Figure 9). The tests create an instance of the plugin

and run it against a simulated website and database to ensure everything would function as

expected when placed in a real world application.

 22

Figure 9. WP test and extended Plugin test

 23

Figure 9. Continued

Further testing was also carried out after installing the plugin into the Wordpress environment to

ensure full functionality. After appropriate testing results, all this was packaged together to

provide the user with a completely robust, understandable, operable, and perceivable web

application.

Discussion

The experience in completing a solo project was invaluable, but it did not come without

its many lessons. During the design and implementation phase there were no initial issues, as

everything was coming together for a user friendly tool. The initial proposal was to deliver a
 24

product that would be accessible to seniors and that could be used as a tool to enable ‘aging in

place’. The issues experienced during this project were unexpected and required quick

adaptation to ensure the final deadline was going to be met. One issue initially experienced was

feature creep, which was due to an over promise at goals and objectives. The project was initially

to be a simplified web tool that tracked users vitals such as blood pressure, glucose level, heart

rate, and other things of that nature.

This was one of the first milestones, and this was met with timely delivery and usable

prototype. The feedback received from the first focus group sessions quickly changed this, as an

AGILE approach was being practiced for real world experience. The feedback was there was

difficulty using the tool and that the feasibility of it being a web application would be short lived.

This was due to senior citizens having various devices that track such vitals and send them to the

doctor automatically. This caused delays because it was realized that the whole big picture for

this project was to provide something accessible and easy to use.

That is when the next issues arised, as it was discovered that the original platform being

used, Drupal content management system, provided little to no accessibility support within the

community. Being new to the technology, it was decided to change the platform to something

one with greater accessibility support. That was when Wordpress was selected to be this project

content management system. The final issues experienced during the design and implementation

phase was getting the accessibility tool and blog site into the hand of the focus group for testing.

This was initially being done by allowing each individual focus group member access to a

personal computer to tasks provided to them. This was clearly unreasonable and hindered the

AGILE process since each member of the focus group was available on different days. To

mitigate this issue it was discussed and decided to host the blog and accessibility plugin on
 25

Bluehost. This made it easier to enable access over the internet via everyone’s personal computer

or smartphone.

The design of this project weighed heavily on WCAG to ensure everything could either

be accessed through keyboard navigation and compatible with third-party screen readers. It also

required the content of each page be sensitive to the vision impaired, which was no easy task due

to the various vision disabilities like color blindness. This was all accomplished with the careful

design and implementation of HTML and CSS for the frontend content, as well as PHP and SQL

in the backend for content queries, and lastly javascript to create a plugin that could help

developers meet all WCAG (Appendix C).

Overall the experience in tackling a solo project is something to be truly valued. The

amount of work it takes to go from the design/implementation phase all the way to testing,

release, and maintaining is no small feat. The takeaways would be that during the design and

implementation phase is to gather as much information and resources as possible. This will

mitigate any possible issues, like finding out the lack of support for a topic or platform can

hinder further development overall. Also, take into consideration the skill level one may possess

to understand what is really deliverable and what is a reach. This goes hand-in-hand with over

promising, understanding the timeline provided so that when the deadline arrives there is a

usable product. Time management would be something often overlooked, but really

understanding the amount of time given can help mitigate any stress or unplanned events that

deter the development/implementation process. Although there were difficulties in delivering this

project, it provided many rewards and has features planned for future development. Features like

geolocation services that provide user specific recommendations from hospitals and medical

transportation based on location. A pill/medication tracker was also something recommended in

 26

the focus group, which would provide an engaging experience for registered users. There are also

plans to implement a mobile application to ensure this is in the hands of as many people as

possible. The overall goal will be to provide a full featured application, web and mobile, that

provides seniors with the necessities to ‘age in place’. The project was originally envisioned as to

provide a user specific experience in adding vitals to a web application, which was aimed at

aiding senior citizens age in place. This drastically changed as the project progressed and time

grew shorter, shaping into a blog based resource to provide a more personalized user experience

as well as developing and implementing an accessibility tool to aid in keeping an accessible

product.
 27

REFERENCES

Free online web accessibility checker (WCAG & Ada). Accessibility Checker. (2021, December

7). Retrieved December 13, 2021, from https://www.accessibilitychecker.org/.

Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation

XX Month Year, Level A & Level AA Success Criteria.

(http://www.w3.org/TR/200X/REC-WCAG20-20081211/)
 28

APPENDIX A

ACCESSIBILITY AUDIT RESULTS - https://www.accessibilitychecker.org/

 29

APPENDIX B

USABILITY TEST POST-SURVEY

30
 31

APPENDIX C

DESIGN PRESENTATION - seniorsicare.com (not active yet)

Home page

Resized text
 32

Greyscale

High Contrast
 33

Negative Contrast