WPI CS3733-D24 Software Engineering, Prof. Wong

Team Name: Desire Dwarfs

Team Coach: Ari Schechter

Github Link: CS3733-D24-Team-D

AWS Link: https://ec2-18-222-110-127.us-east-2.compute.amazonaws.com 

The homepage is the central hub of the website. It is mainly used for users to feel more comfortable with the website and the hospital in general. Scrolling down, you can see some extra buttons to get to different sections. For users, it is an easy way to get to different important sections in the NavBar such as the Map/Pathfinding page, and for viewing many different service requests and if you’re logged in as an admin, it allows you to view the admin page.

The NavBar includes links to the Map page, Service requests dropdown menu, the AI Chatbot, translation dropdown, search bar for searching for individual pages and a link to the login menu. It is an easy way for users to find essential features so that they feel more comfortable with the hospital. When the login button is pressed, you will be linked to login and when youre logged in, the button will change to a logout button. When logout is pressed, you will be directly logged out.

This extra section is for a few extra features that were not important enough to include in the NavBar. The first two links “Brigham and Women’s Hospital” and “Brigham and Women’s Faulkner Hospital” take you to the official pages of the buildings on the Brigham and Women’s Hospital website. The “About Us” page is a link to a page with us on it and another feature. The IOS app button doesn’t go anywhere, the FAQ gives a link to commonly asked questions with answers, and the credits gives credit to software we used and our professor.

This is the design of our login page with the style and color scheme of that of Brigham and Women’s Hospital. It takes in your email and your password or even allows you to sign in using google. Logging in gives you the benefit of using more service requests and if you are an admin it allows you to see and use the admin page.

The map page provides you with the option to easily and quickly find places within Brigham and Women’s Hospital. This webpage is universal to all levels of users and provides the functionality for map panning, zoom in/out, fitting the map to your page size and rendering all five floors in Brigham and Women’s Hospital. The Icons dropdown on the top right of the map allows you to select which corresponding location icons you would like to see for additional map information. In addition to this there are some additional features available in this page, such as, Pathfinding, Text-To-Speech, Mobile instructions, and QR Code scanning. 

To find a path you must enter the necessary data within the “Navigation Menu” on the left side of the screen. You will need to enter a Start location, an End location, and your desired Algorithm. Each algorithm provides a different level of efficiency while finding the shortest path to your destination. Once you enter a start location, you can also click on an arbitrary point on the map to define your end location. A language instruction for the path will be provided at the bottom left part of the page.

Additionally if you wish to switch your Start and End locations just click on the double arrows between each text box.

We provide various accessibility features to maximize user comfortability.

By clicking on the TTS (text to speech) button, the language instruction of the path will be read out loud.

Once directions are generated, users can input their phone number to either receive a voice call or text containing the directions, allowing them to still have them after leaving the kiosk.

Once directions are generated, users can generate a QR code on their phone, which brings them to a page containing the directions and map, allowing them to still have the directions after leaving the kiosk.

Clicking on the service on the navbar brings you to a dropdown menu which shows all of our service requests with their respective icons. It is an easy way to view and see different service requests without being confused for users and is user intuitive. 

The Flower Service Request page shows a variety of flowers along with their prices. When adding you click on ‘add item’ and they show up in your cart. You can press x on them when they are in your cart and they will be removed, or you could press clear in your cart to remove all of the items. The cart is used by the flower page and the gift page in the same way. When submitted, it goes to the checkout page.

The Gift Service Request works the same way but for different gifts rather than flowers and works in tandem with the flower page. Submitting in the Gift page will also bring all the items to the checkout page.

The checkout page sequence aims to provide a familiar experience to users. The items in the cart can be ordered by filling out the shipping and payment information, then placing the order. A confirmation page will confirm that the order was successfully placed and allow you to return home. 

Religious Services

The religious service request form allows you to request for a religious leader to come to a location. The charts on the right hand side display data about current religious activity in Boston. 

Patient Check In

The check-in service request form allows for patients to easily check into the hospital for an appointment without needing a receptionist. The date viewer will switch between controlling the birthday field and the appointment date field based on which was last clicked.

Appointment Scheduler

The appointment service request form allows you to easily schedule an appointment for a date in the future. The date selector on the right will fill out the Date field based on the selection. The notes section of the form is optional and allows you to inform the specialist you will be seeing about any extra information.

Sanitation Request

The sanitation request allows you to schedule the hospital’s cleaning services to clean an area. The fields of the form can give further details to the cleaning staff to enable them to bring the correct supplies to the area. The date selector on the right allows you to schedule this request for the future if it is not needed immediately. 

Medicine Delivery

The Medicine Delivery Service Request page includes inputting the patient's name, their doctor, the priority of the request, the date with a date picker on the right, what kind of medicine, the dosage level, what form the medicine should be and the status of the service request. It is useful so that patients can submit to get medicine through the website.

Language Interpreter

The language interpreter request form allows you to submit a request for a language interpreter to come to your location. The graph on the right hand side visualizes the current availability of the hospital's interpreter staff.

On the Overview page that leads you once you click on admin, you can see a sidebar including the current menu, the admin map page, analytics page and the charts page. The overview has all the current service requests shown, you can edit whether it’s assigned or not, which employee is assigned and even drag and move service requests around. Additionally, you can filter by employee to easily find any tasks assigned to that person.

The map on the admin page has 3 modes: view, edit, and heatmap. In view mode all the possible paths in the hospital are visualized by lines on the map. 

In edit mode all the nodes are displayed. The nodes can be dragged around or selected to bring up the editor (shown below) in which the data stored for each node can be viewed or edited. Data for the selected node will not be saved unless ‘Save Node’ is clicked.

Heatmap mode simulates all the possible paths in the hospital and calculates which would likely have the most traffic. This data would be calculated from sensor data in practice. 

Clicking the pencil opens up the Map Editor, where all the nodes and edges will be visible. Double-clicking anywhere generates a new node with a custom ID; clicking on a node opens up the Node Information Menu, where various properties can be changed. Clicking the “+” allows you to add a neighbor node, designated with the node ID, and clicking on a neighbor-node-chip toggles the “blocked” property of their respective edge.

Clicking on the fire icon, leads you to the heatmap. The heatmap shows for every floor how much foot traffic there is. It is currently using fake data for how hot the heat in the heatmap goes, but can be easily changed for real data that Brigham and Women’s Hospital gives it if they choose to. It can be useful for B&W admins to see the foot traffic and maybe change the hospital in tandem of the heatmap.

For our data analytics page, we have two graphs, one for the distribution for types of service requests as shown in the Pi chart and some analytics for how many visits the webpage got every day of the week in the bar graph, while the data is not real, it can easily be used for real data gathered. Using this data, admins can find user preferences and use it to improve the website in the future.

The admin charts display has 3 sections: Nodes, Edges, and Employees. Each section contains a paginated table with all the information stored in the database about each of the categories.

At the top of each there is a button for uploading and downloading the data as CSV files. 

Demo Video

In admin, if you and one or more other admins are on the same tab of the page, you will be able to see their cursors and what they are working on. If it is on Map Page, when someone updates the nodes or edges, it will update for all other users at the same time.

When the [?] icon in the navigation bar is clicked it will toggle an AI chatbot panel in the bottom right. The chatbot is powered by ChatGPT 3.5 turbo and will respond to messages sent to it through the text input field. As an accessibility feature, there is a microphone icon next to the send button. This will bring up a dialogue for speech recognition. The language of the speech interpreter can be changed through the language selector in the top right of the dialogue menu.

Note that the chatbot is powered by ChatGPT and while it is very good most of the time, it is not guaranteed that the results are always fully accurate.

This feature allows visitors to translate the webpage into the provided languages. This was created to make the webpage more accessible to users whose first language is not English. To translate the webpage, click on the globe on the Navigation Bar and choose the language you wish to translate the webpage into. If you want to switch languages again, repeat the previous instructions.

As stated previously, this is our About us page that includes a carousel with all of our names with pictures and positions on the team. Scrolling down, we have a thank you page for our class with term, our professor, our team coach and a thank you to Brigham and Women’s Hospital and their representative.

The iOS app provides a concise user experience, including only the most used features of the website such as the map and gift request. 

Unfortunately the app is not currently available to download.

Our FAQ page has common questions with answers for:

Q: How do I use Pathfinding (takes you to the map page)

A: To use pathfinding, first navigate to the map page. Then select a start and end location from the dropdown menus. Finally, choose an algorithm (A* if you want the optimal path). 

A: To get a gift for a loved one, first navigate to the gift page. Then add the desired items to your cart. Finally, click on Submit and complete checking out.

A: To request help with this spill, first navigate to the sanitation page. Then fill out the relevant information and submit.

A: To view all the requests, first login with an admin account and navigate to the admin dashboard page. Then fill our the relevant information and submit.

A: To request a translator, first navigate to the translator page. Then fill out the relevant information and submit.

A: To get flowers for a loved one, first navigate to the flower page, Then add your desired items to your cart. Finally, click on Submit and complete the checking out.

The credits button takes you to the Library section of the credits page which shows all of our libraries and software that we have used along with images of them and when pressed will bring you to the webpage of the libraries. The credits page also includes a sidebar which has the libraries/main page for credits and special thanks.

As a special thank you to Professor Wong, we have embedded a live rendered 3d model of his face with a particle emitter. The page, when audio is enabled, will also play a parody of Never Gonna Give You Up by Rick Astley sung in Professor Wong’s voice synthesized by an AI model trained on his lectures. This was done to demonstrate the capabilities of web graphics and AI speech which could be further applied in other sections of the website.