User Problem
With masks on and physically kept 6-feet apart due to Covid-19 reopening guidelines imposed by the university, in-person students are experiencing diminished causal interaction opportunities in classrooms. Professors, who have a desire for their students to connect and build a community, are concerned with student participation and overall energy of the class.

Project Goal
The UI aims to give students a platform to connect with their peers in a physically distanced classroom and to afford professors an easy-to-use tool to help students engage with their peers and/or class material. The UI should afford students the ability to have non-disruptive interactions that could normally be done during class with a whisper to a nearby classmate but which are currently unavailable due to physical distancing.

Design Solution
A Slack Platform Implementation that uses a bot to moderate the classroom channel before, during and, after class. The channel provides students a way to interact safely and comfortably via digital messaging. It uses a seat chart to match names to students.

The Design Solution includes three primary features, all implemented in Slack: a classroom channel, a bot to moderate the channel, and a seat chart to locate students within the classroom. The prototypes simulate students interacting on a classroom channel during class.

Classroom Channel #classroom channel is only visible in the period around the class time. In the prototype scenario, the classes are scheduled on every Tuesday 2 - 4 pm. The channel is open for group chat, but can be muted during class to mitigate distraction. DM is available by clicking on the seat chart. Students may help each other out via DM and build a strong connection one-on-one.

Slack Bot The bot sends prompts to the students at timed intervals to create conversation nudges and course work reminders. The bot currently nudges students towards discussing class material, having small ''ice-breaker'' interactions, encouraging them to ask the teaching staff questions, and reminding them about due dates/class material.

Digital Seat Chart A live digital seat chart is visible on Slack #classroom channel to help in-person students learn their classmates' names in relation to where they are seated. To join and view the seat chart, a student scans a QR code on their desk or assigns themselves to a seat within the UI. The seat chart also affords easy direct messaging by clicking on a student's profile on the seat chart.

UI Design
ClassChat Project

Implementation
The frontend code for the implementation consists of a QR code landing page (qr_code.html) that allows students to enter the classroom channel before the start of a lecture. The bot setup contains the following steps: setting up the Bot including auth tokens and scopes in the slack api; creating incoming webhooks for messaging from external sources; setting up the event subscriptions (event trigger server URLs) and slash commands. The frontend code consists of HTML/CSS for the content/styling and AJAX for talking to the backend server. The backend code for the Slack Bot consists of mainly 3 scripts: event trigger handler script; channel invite and seat chart provider script; classroom channel proctoring script.
Event trigger handler script (event_triggers_server.py): This server is implemented using the slack_bolt package which is used to talk to the Slack client. This server responds to app events such as when a member joins a channel, or when someone posts a message to a channel, etc.
Channel invite and Seat chart provider script (invite_and_seat_map_server.py): This is a Python Flask server that responds to requests from the QR landing page. This server receives a QR scan request from the landing page and uses the slack api to first fetch the user ID mapped to the email and invite/add the respective student into the classroom channel.
Classroom channel proctoring script (start_stop_message_class_scheduler.py): This is a python script that is ever running on the server in the background and is responsible for archiving/unarchiving the classroom channel during lecture hours. Additionally, this script handles sending out messages to the channel on behalf of the CUinMaskBot during the lecture and thereby helps promoting interactions between students.

Design Cycles