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 chatbot user interface (UI) that gives accessibility solutions using Python programming, Pytorch framework, 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
Americans with Disabilities Act (ADA)
Section 508 of the Rehabilitation Act
Any additional global standards
Goals
The goal is to design and engineer an accessible AI chat bot user interface that gives accessibility solutions
Tools
Python programming language
Pytorch framework
We are looking for an open-source API
Visual Studio Code for Microsoft Windows 11 computers
Target audience
The target audience is anyone interested in making a better, accessible digital world with AI!
The problem
The problem is that access is often not at the forefront of AI model chat bot interfaces designs, often leaving out users with accessibility needs.
The solution
The solution is to design a more accessible AI chatbot digital user experience that gives suggestions on digital accessibility.
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 Python, PyTorch, and APIs
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 3 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 (currently in progress)
Basic code structure
Low fidelity wireframes
High Fidelity designs
Mockups
Part A. Moving into Step 4, Prototype, I will show the basic code structure using Python and PyTorch. I chose PyTorch over TensorFlow for my model framework since this project is aimed to be beginner-friendly and small-scale. For larger data sets, I would choose TensorFlow for its scalability.
Here are the suggested steps from ChatGPT for the code structure:
Data
Raw data
Pre-Processed data
Processed data
Models
Makes models used
Base model class
Diffusion model
Multimodal model
Training
Training scripts
Evaluation metrics
Loss functions
Agent
Learning reinforcement practices
Language prompt optimization
Application
Main application
Utility functions
Utilities
Dataset loader
Visualization
Configurations
Overview of Project
README.md file
Version control of files and folders to ignore
Part B. Next, we'll get into some low-fidelity prototype designs for the landing website page of the AI chatbot 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)
Unit and integration testing using Jest frameworks
Source code management (SCM) for different versions
Pull request review for code with network
Web Content Accessibility Guidelines (WCAG) 2.1 level AA
In step 5, test, I'll be using a framework to test the Python code and manage the source code for different versions of the tool. Since this is a passion project, I'll be reaching out to my network to have a brief pull request review for the code. Lastly, 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.
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
Results and conclusion (currently in progress)
Please stay tuned for the final draft of this project to review the results and conclusion!
Acknowledgements
A big thank you to the resources below that helped me with this UX design 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.
Google UX Professional Program - A remote online program by Google on Coursera with project-based learning and certificates on UX design best practices.
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
Figma. (2022). Figma: the collaborative interface design tool. Figma. https://www.figma.com/
MeisterLabs. (2019). MindMeister. MindMeister; MindMeister. https://www.mindmeister.com/
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