2024 An accessible artificial intelligence (AI) chatbot in 5 steps (Draft)

Project overview

A work office decorated with white colors has a desk with a desktop computer screen connected to a silver Apple laptop. The screen of the desktop computer shows the Slooth Artificial Intelligence (AI) website homepage with 3 diverse smiling sloths working together to hold the Get Started button to start using the accessible AI tool that creates accessible code for a better digital world for everyone. One sloth is blind, one sloth is in a wheelchair, and one sloth has two prosthetic legs. Overall, they are joyfully having fun while working together to help you.
Figure 1. A silver computer monitor on a 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.

Summary: I designed and developed an accessible AI chatbot user interface (UI) that gives accessibility solutions using JavaScript, Node.js, OpenAI APIs from ChatGPT, and conformance to Web Content Accessibility Guidelines Level AA.

Standards

Goals

Tools

Target audience

The problem

The problem is that accessibility 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 in 5 steps.

My design process


For my design process, I followed these steps: empathize, define, ideate, prototype, and test (Figure 2 below). 

The design thinking model from Hasso Plattner Institute of Design (d.school) at Standford University with these steps: empathize, define, ideate, prototype, and test. Each step is placed in a hexagon shape with a unique color and connected from left to right in the respective order.
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


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:

Step 2. Define


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:


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:


These are the 3 common pain points:


For this project, it will be important to document each design step on this portfolio site with accessibility in mind 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. HTML is an a11y.


By completing the Define step, I set the stage for a human-centered and purpose-driven design approach, ensuring that my design and developer decisions and solutions would effectively cater to the identified user needs while aligning with project goal.

Step 3. Ideate


In the third step, Ideate, I used brainstorming to bring out all my innovative ideas and design concepts to develop this project (Figure 4). 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 a month 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.


Figure 4. Insert image and description here.

Insert brainstorm HTML file here.

Step 4. Prototype


Moving into Step 4, Prototype, I will show the basic set-up for developing this project tool from a coding perspective using JavaScript, Node.Js, npm, OpenI API keys from ChatGPT and more. 

Here are the steps from ChatGPT to develop a chatbot in Windows 11:

a. Create a new folder for project.

mkdir ai-chatbot

cd ai-chatbot


b. Initialize a new Node.js project.

npm init -y


c. Install the required dependencies.

npm install express dotenv openai body-parser


a. Open File Explorer and navigate to your project folder


b. Create a .env file by right-clicking inside the folder, selecting New > Text Document, and name it .env at the end.


c. Add the OpenAI API key to this new .env file.

OPENAI_API_KEY=your_openai_api_key


a. Open your project folder in Visual Studio Code.


b. Create a new file named index.js by right-clicking inside the Explorer panel on the left and Select New file, then name it index.js.


c. Add the following code to index.js file and save.

const express = require('express'); const bodyParser = require('body-parser'); const { Configuration, OpenAIApi } = require('openai'); require('dotenv').config(); const app = express(); const port = 3000; // Middleware app.use(bodyParser.json()); // OpenAI Configuration const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); // Routes app.post('/chat', async (req, res) => { const userMessage = req.body.message; if (!userMessage) { return res.status(400).json({ error: 'Message is required.' }); } try { const response = await openai.createChatCompletion({ model: "gpt-3.5-turbo", // or "gpt-4" if available messages: [ { role: "system", content: "You are a helpful assistant." }, { role: "user", content: userMessage }, ], }); const botMessage = response.data.choices[0].message.content; res.json({ reply: botMessage }); } catch (error) { console.error('Error with OpenAI API:', error.message); res.status(500).json({ error: 'Failed to fetch response from AI.' }); } }); // Start the server app.listen(port, () => { console.log(`AI Chatbot server running at http://localhost:${port}`); }); 


a. Go back to the Command Prompt (cmd) and start the server by running this code below.

node index.js 


b. You may get a message that states AI Chatbot server running at http://localhost:3000


Step 5. Test (currently in progress)


In step 5, test, I'll be using a framework to test the JavaScript 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 to guide me in testing the chatbot user interface to address and fix three basic pain points from earlier.


These are the 3 common pain points again:


Figure 3. 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.

Results and conclusion

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:

Sources