Embedded Files
Project overview
Figure 1. A silver computer monitor on white desk. The screen shows a landing web page for the Slooth AI chatbot that is an accessible chat that creates a better digital world. There's a large Get started button being held by three happy sloths, one with prosthetic legs, one in a wheelchair, and one with sunglasses and a white cane. On the left there is the text, "Slooth Artificial Intelligence (AI) is intentionally designed and engineered to be an accessible conversational chat that creates code for web content and apps for a better digital world for all."
Summary: I designed and engineered an accessible AI model that gives accessible data solutions using Google Colab AI, Python code programming, and conformance to Web Content Accessibility Guidelines 2.1 Level AA or higher.
Standards
Web Content Accessibility Guidelines (WCAG) 2.1 Level AA or higher for accessibility
Linear regression and artificial neural network pathways
Goals
The goal is to design and engineer an AI model that gives more accessible data solutions
Target audience
The target audience is anyone interested in making a better, accessible digital world with AI and data sets!
Tools
Google Cloud: Colab Research tool
Python 3 programming language
Interactive Jupyter Notebook (.ipynb)
Google Gemini suggestions as needed
Student Performance Metrics Dataset by Hasan et al. 2024
Packages: pandas, keras, scikit-learn, numpy, matplotlib
TenslorFlow framework
Google Cloud Platform Data Pipelines
Data Extract, Transform, Loud (ETL)
The problem
The problem is that accessible data is often not at the forefront of AI models, often leaving out users with accessibility needs.
The solution
The solution is to design a more accessible AI model that gives more accessible data solutions for positive outcomes.
My design process
Step 1. Empathize
Step 2. Define
Step 3. Ideate
Step 4. Prototype
Step 5. Test
For my design process, I followed these steps: empathize, define, ideate, prototype, and test (Figure 2 below).
Figure 2. A visual of a design thinking model with the following steps: Empathize, Define, Ideate, Prototype, and Test where each word is in a different color hexagon. Hexagons are connected from left to right almost like a rainbow. This model is from the Hasso Plattner Institute of Design (d.school) at Standford University.
Step 1. Empathize
Interview users in digital disability advocacy groups
Maintain a respectful, friendly, professional and non-judgmental approach
In the first step, Empathize, I decided to interview people with lived experiences of various abilities in disability rights advocacy groups to empathize on common digital accessibility barriers for AI chat bots.
Some key findings included:
There is a high need of seamless keyboard-only navigation and no keyboard traps for users that may use screen readers for digital spaces
There is a need for high contrast between text and backgrounds while asking and receiving AI-generated responses
There is a need for alternative text for meaningful images generated by AI
There is a need for focus and hover states for buttons
There is a need for using more than color alone to show information
Step 2. Define
Objectives
Personas
Pain points
Decisions and challenges
In the second step "Define" of this project, I decided to develop clear, actionable objectives from the feedback received from Step 1. Empathize.
These are the objectives:
Design an accessible user interface (UI) that is keyboard navigable
Develop an AI chatbot with Google Colab, Python code, and Gemini
In the next phase of the Define step, I decided it was important to craft a user persona based on the interview feedback from the Empathize step. Personas will help identify and alleviate customer pain points to guide my design decisions. Below is a anonymous persona based on the interviews.
This is Persona 1:
Persona 1 is a 22 year-old college student that is ambitious and interested in engineering AI Chatbots for a science competition. This student identifies as being blind, so she relies on screen reader assistive technology. She constantly feels frustrated on the barriers of robotics engineering, but feels hopeful for change.
These are the 3 common pain points:
Keyboard navigation issues, such as keyboard traps
Color contrast issues, such as low contrast between background and text
Lack of alternative text and/or visual descriptions for images
For this project, it will be important to document each design step to address the common pain points. This means that I'll have to conduct thorough research to use the most accessible 3rd-party tools available. The main challenge for me will be attempting to make a design and development project accessible in addition to how I present the project on this website.
By completing the Define step, I set the stage for a human-centered and purpose-driven design approach, ensuring that my design and software programming decisions and solutions effectively cater to the identified user needs while aligning with project goal.
Step 3. Ideate
Brain storming
All ideas are valuable
Collaborate for new perspectives
Prioritize within time and budget
In the third step, Ideate, I used brainstorming to bring out all my innovative ideas and design concepts to develop this project. I reached out to my network to collaborate and gain valuable insights. I encouraged each "team member" to contribute their unique perspectives by listening to understand. The project timeline was 6 months and there is no budget, so all open-source tools were prioritized. Again, it was important to make sure the tools used are the most accessible ones possible that are available.
Step 4. Prototype
Code structure and data pipelines
Low fidelity wireframes
High Fidelity designs
Mockups
Part A. Moving into Step 4, Prototype, I will show the basic code structure using Python on Google Cloud's Colab Research tool since this project is aimed to be beginner-friendly and small-scale. For this larger data set, I chose TensorFlow as a framework tool for its scalability.
Here are the suggested Google Cloud Platform (GCP) Data Pipeline steps by Adam Eubanks 2021 with modifications by me and Gemini:
Step 1. Import pandas package tool for data analyses
Step 2. Import Student Performance Metrics Dataset CSV file from Hasan et al. 2024
Step 3. Select the X and Y attributes (also known as "Variables) of interest from the data set
Step 4. Use sktlearn, an open-source machine learning library for the Python programming language in data analyses, to give the AI model a piece of the data set now and leave a piece hidden for testing the AI on how well it can predict outcomes
Process the data and clean up any entries
Step 5. Import following packages for machine learning and artificial intelligence training of AI neural networks: TensorFlow, Keras
Step 6. Build the AI model's neural network units or "neurons"
Step 7. Add optimizer to model's neural algorithm to fine tune data
Step 8. Fit data to AI model (X and Y) and choose number of iterations ("epochs") to ensure accuracy of 95% or higher in AI responses
Step 9. Evaluate how well the AI model predicts an outcome (Y) based on X if given new data
Step 10. Visualize data
Part B. Next, we'll get into some low-fidelity prototype designs for the landing website page of the AI model and the chatbot messaging user interface using Figma.
Figure 4. Low-fidelity designs of the Slooth AI landing website page using the web-based Figma design tool. On the left, there is a basic homepage website with filler lorem ipsum text and squares with crosses in them to show where images will be placed later. Slooth AI in large text on the left and a smiling and funny full-body sloth outline character, posing a left-dab on the right. The left low-fidelity design is also a mock-up, showing how the design would look on an open silver laptop. The background is white (HEX: #FFFFFF) and the text and character outline is black (HEX: #000000). It requires scrolling to access the rest of the webpage.On the middle, there is a longer low-fidelity design of the Slooth AI landing webpage shown in it's entirety for a desktop site from top to get started with the tool to bottom where there's contact and information links. The background is a beige color (HEX: #E6E3DF), black regular text (HEX: #000000), and some yellow color (HEX: #FFCD29) on Get started button, arrows, and logo. This is a more developed design with three sloth diversly-abled or disabled characters on the right holding up the Get started button together. The Slooth AI text has a wheel chair icon on one of the "o" letters. The logo is a sloth face outline on a yellow background.On the right, there is another longer low-fidelity prototype design of the Slooth AI landing webpage shown in it's entirety again from top to bottom with the same elements as the middle design. The main different thing is that the background is black (HEX: #000000) and text is white (HEX: #FFFFFF), inverted relative colors. There is only the dabbing sloth character on the right holding a sign saying "Hi there! I'm glad you're here). This is overall a bit more simple than the middle design, as the logo is an S letter, but the main components are there.
Figure 5. High-fidelity design of the Slooth AI Homescreen website page using the online Figma design tool. This is a close-up of the computer screen from Figure 1 with the three sloths.
Step 5. Test (currently in progress)
Web Content Accessibility Guidelines (WCAG) 2.1 level AA
Student Performance Metrics Dataset by Hasan et al. 2024
Google Cloud Colab Research Framework tool
Python Code to clean and transform data
Data visualizations and communicating results
Part A. AI visual Chatbot
I'll be using WCAG 2.1 level AA or higher to guide me in testing the chatbot user interface to address and fix the user pain points from earlier to make it more accessible.
These are the 3 common pain points again:
Keyboard navigation issues, such as keyboard traps
Color contrast issues, such as low contrast between background and text
Lack of alternative text or visual descriptions for images
Part B. Data set ETL and AI
I'll be using the Google Colab Research framework tool to use Python code to clean and transform data (ETL), and provide data visualizations based on the Student Performance Metrics Dataset by Hasan et al. 2024. Lastly, I'll train and test the AI model to predict student performance (Y = overall GPA) based on specific data attribute (also known as a "variable"). In this case, I decided to use prepartion (X = how many hours spent studying).
Figure 6. Homescreen page of Google's Colab Research tool to train AI with data sets. The page is dark grary with white text. It says "Welcome to Colab!" with drop down menus and hyperlinks on how to get started with the Gemini API to access the Gemini AI.
Below is more information about the data set used:
"Description
The Student Performance Metrics Dataset provides a diverse collection of academic and non-academic attributes aimed at evaluating factors influencing student performance in higher education. It enables researchers to analyse relationships between student demographics, academic achievements, socio-economic factors, and extracurricular activities.
Dataset Attributes
Department: The academic department the student is enrolled in (e.g., Computer Science, Business, etc.).
Gender: The gender of the student.
HSC: Score obtained in higher secondary education.
SSC: Score obtained in secondary school education.
Income: Monthly family income of their parents.
Hometown: The type of area where the student resides (e.g., urban, rural).
Computer: Proficiency level in computer usage.
Preparation: Time spent on study preparation outside class hours.
Gaming: Time spent on gaming activities daily.
Attendance: Regularity in class participation.
Job: Indicates if the student has a part-time job.
English: Proficiency in English communication skills.
Extra: Participation in extracurricular activities.
Semester: Current semester the student is enrolled in.
Last: Performance in the last semester.
Overall: Cumulative Grade Point Average (CGPA).
Purpose and Use Cases
The dataset serves as a resource for educational research, enabling trend analysis and the development of predictive models for academic success. Researchers can explore the impact of socioeconomic status, gender, and extracurricular activities on student performance. Potential use cases include building machine learning models to predict performance and analyzing factors that contribute to student success or dropout risks.
Limitations
This dataset does not cover all potential influences on student performance, such as personal motivation or health. Future studies can enhance this dataset by including additional variables." (Hasan et al. 2024)
Figure 7. A screenshot image of an interactive Python Jupyter Notebook file (.ipynb) with Python code in the Google Colab tool used to import data, code and has general steps of 1 through 4 in the process of developing an AI model that can make predictions based on the data set given to "train" the AI model.
Figure 8. A screenshot image of an interactive Python Jupyter Notebook file (.ipynb) with Python code in the Google Colab tool used to import data, code and has general steps of 5 through 7 in the process of developing an AI model and adding neurons to the model with TensorFlow framework and keras package. On the right, there is snap shot of a data table with columns and rows.
Figure 9. A screenshot image of Python code in the Google Colab tool showing Step 8. Fit data to AI model (X and Y) and choose number of iterations ("epochs") to ensure low mean absolute error ("mae") in AI responses and Step 9. Evaluate how well the AI model predicts an outcome (Y) based on X if given new data. There were 1000 iterations used to train the AI model. The "mae" = 0.3701 shows the amount of error the AI model experiences when predicting overall student GPA. The lower this number, the better for linear regression data.
Figure 10. A screenshot image of Python code in the Google Colab tool showing the final Step 10. Visualize data with scatter plots and regression lines with Errors and troubleshooting happening, with human input by Meli and suggestions by Google Cloud Gemini on the right in a chatbot.
Results and conclusion
Overall, the AI model I created here, we'll call it "Slooth AI" can predict student overall GPA given how many hours studied with moderate accuracy. since the AI consistently performed with the mean absolute error ("mae") of 0.3715. I would say the AI is a moderate success, but it could be more accurate to get the "mae" value closer to zero.
Insights from Gemini:
"The first value (0.2479...) is the Mean Squared Error (MSE). MSE measures the average of the squared differences between the predicted GPA values and the actual GPA values in the test set. A lower MSE indicates that the model's predictions are closer to the actual values. Squaring the errors gives larger weight to bigger errors.
The second value (0.3715...) is the Mean Absolute Error (MAE). MAE measures the average of the absolute differences between the predicted GPA values and the actual GPA values in the test set. It gives a more direct sense of the average magnitude of the errors in the predictions. For example, an MAE of 0.37 means that, on average, your model's predictions are off by about 0.37 GPA points.
Both MSE and MAE are commonly used metrics for evaluating regression models. A lower value for either metric indicates better model performance. Since you are predicting GPA, an MAE of around 0.37 means the model's predictions are reasonably close, but there is still room for improvement." - Gemini AI
Some factors to consider to make the AI more accurate:
Transform the data into a specific function that better fits the data, instead of linear
Select different variables that may correlate to overall student GPA
Select different parameters when creating the AI model
For accessibility, it's very important for visual data charts to provide highly detailed image descriptions for people that may need more to interpret results. For example, a colleague scientist that has color blindness or any type of visual impairment may need more information from the chart asid from just the image to understand results. Therefore, I decided to provide very detailed figure descriptions and alternative text for assistive technology.
As always, it's important to consider that people come from many different backgrounds and to be considerate and patient with data communication. Different is good! It gives us a richer life. :-)
Figure 11. A screenshot image of the final results in Step 10. Visualize data. This was coded in Google Cloud Research Colab with Python code. There is a scatter plot with with the title "AI Model that predicts overall student GPA performance (Y) given how many hours used to study in Preparation (X)". The Left Y-axis title is "Performance: Overall GPA" with a scale from 0.0 to 4.0 and the Botton X-axis title is "Preparation: Number of Study Hours (Categories)" with three main categories from left to right: More than 3 hours, 0-1 Hour, and 2-3 Hours. There is a small legend at the bottom right showing what the dot colors represent. A blue circle dot represents A Testing: AI Training Data and the green circle dot represents B Testing: AI Prediction Data. The background of the scatter plot is white/blank.
Overall, the categories show interesting results. Here are the key findings per study preparation:
Overall, the categories show interesting results. Here are the key findings per study preparation:
- More than 3 hours: Most blue data points are near about 2.25 to 3.9 overall GPA, where most green data points are near about 3.2 to 3.8 overall GPA
- 0 to 1 hour: Most blue data points are near about 0.75 to 3.9 overall GPA, where most green dots are near about 1.5 to 3.9 overall GPA.
- 2 to 3 hours: Most blue data points are near about 1.25 to 3.9 overall GPA, where most green dots are near about 2.25 to 3.9 overall GPA.
Last remarks
As a last remark, it may be helpful to connect this model to an interactive, accessible AI chatbot where a person can have a conversation with a model on how to interpret data. In my experience, using Google's Gemini AI Chatbot helped find code solutions in a conversation was helpful and simple to follow. It's a big idea to try to create another AI chatbot, but it may be worth exploring for future efforts in this project with the ngrok tool or on a website browser that can be used with low-tech needs.
Thank you for viewing this project! I hope you have a great day!
Acknowledgements
A big thank you to the people behind the resources below that helped me with this project:
AIVA Chatbot template - A template by Abubakar Sherazi for the chatbot design of this project by AIVA available in the Figma community.
ChatGPT - An artificial intelligence prompt interface that answers questions by OpenAI. This web application assisted me in giving me ideas to how to approach this project's write-up. I used some of the answers and APIs from ChatGPT with revisions.
ngrok - "ngrok is a globally distributed reverse proxy that secures, protects, and accelerates your applications and network services. You can think of ngrok as the front door to your application." - ngrok
Google UX Professional Program - A remote online program by Google on Coursera with project-based learning and certificates on UX design best practices.
Mendley Data - A repository of digital commons data sets to use by researchers in higher education.
Flaticon and iconSVG free icons - Talented designers created original icons and graphics to use for this project. Here are these awesome designers:
Prosthetic leg free icon by Hary Murdiono JS on iconSVG in Figma Plugin
Arrow free icon by Hary Murdiono JS on iconSVG in Figma Plugin
News free icon by iconSVG in Figma Plugin
Sloth free icon by iconSVG in Figma Plugin
Wheelchair free icon by iconSVG in Figma Plugin
Sources
Canva. (2023). Canva Smartmockups. Canva.com; Canva. https://www.canva.com
Eubanks (2021). YouTube Video: Make Your First AI in 15 minutes. https://www.youtube.com/watch?v=z1PGJ9quPV8
Figma. (2022). Figma: the collaborative interface design tool. Figma. https://www.figma.com/
Hasan, Tahmid; Hasan, Md.Mahmud; Manzoor, Tahbib (2024), “Student Performance Metrics Dataset”, Mendeley Data, V1, doi: 10.17632/5b82ytz489.1. https://data.mendeley.com/datasets/5b82ytz489/1
Standford University. (2012). Design Thinking Process. https://web.stanford.edu/class/me113/d_thinking.html
W3C. (2018, June 5). Web Content Accessibility Guidelines (WCAG) 2.1. W3.org. https://www.w3.org/TR/WCAG21/
Page updated
Google Sites
Report abuse