Prototyping | Door Slackbot for a shared workspace!
(Please see the video given below! It will give you a quick overview of our entire research and prototyping process :) )
Team Members: Sarah Outhwaite, Alex Pham and Anmol Anubhai
My Role: UX Researcher (User testing design and analysis), Interaction Designer (Information Architecture Design, Slack API as well as Arduino code design & integration).
Mentors: Prof. Jennifer Mankoff & Prof. Jon Froehlich
Duration: March 2018
This project was accomplished in two weeks as a part of our prototyping studio final project
Problem Space
We began our final prototyping project by looking for areas of the MHCI+D studio space where a tangible connection to our shared Slack channel would be an asset.
The MHCID studio has two meeting rooms, nicknamed “Thing 1” and “Thing 2.” These meeting rooms contain important shared resources, including our supply room, fridges, tea kettle, water cooler, and coffee machine. The rooms are also places where we can go to work in a quieter space. People often go in and shut the door behind them, but this doesn’t necessarily mean that they don’t want others to come in. Once the door is shut, the question for people outside is usually “Is there anyone inside?”; “Can we go inside?”; “Is there a meeting going on?”.
Sometimes there is a meeting, class, user test, or video recording session going on inside the room because of which the people inside don’t want to be disturbed. Other times people are just using the rooms as a quiet workspace. Either way, people outside the rooms usually don’t know if it’s okay to go in and run the risk of causing an interruption if they do go in.
Ideation Phase 1
To tackle the problem, our team first started off by brainstorming ideas not even related to this problem. We were trying to come up with an idea to brighten or make the studio have a more vibrant feel. After some initial feedback though, we decided to go with something practical, usable, and feasible: door signs that are interactive, flashy, and post to Slack so people know when they can go inside or not.
LOW - FI PROTOTYPE FEEDBACK
Our six week 1 prototypes included ideas that centered around visualizing or physicalizing the MHCI+D slack channel in the studio space. Of all these ideas, only two had a specific use-case beyond general communication and aesthetic expression. These were prototypes that revolved around the idea of the studio meeting doors. Even in their basic paper form, our low-fi prototypes helped us discover that MHCI+D students preferred a meeting door integration to more artistic or informational ideas. Students generally desired a full on informational slack bulletin board, or found any visualization of the channel redundant. However, when they considered the meeting door idea, they felt a real problem could be ameliorated.
MODEL PROTOTYPE DESIGN
Our week 1 low-fidelity prototypes caused us to pivot away from the Slack integration we’d initially envisioned, and focus on the meeting room doors. We decided to create two rough yet higher-fidelity prototypes to better explore door sign interactions. The first prototype mocked up an 'on/off Do Not Disturb' toggle, a slack posting toggle, and an embedded LCD screen that showed information from the slack feed. This screen would provide immediate feedback when people posted on slack, and allow them to draw a doodle or sketch on the LCD screen to describe what they were doing in the meeting room. The second prototype called out multiple descriptors for reasons why the meeting room doors might be closed. We quizzed classmates to create a list that included practical options like “recording”and “testing,” and fun options like “games” and “it’s a secret.” The LCD screen was not used for this version - instead, multiple lights and toggles shared feedback, and users trusted that the assigned status was posted to slack.
Setup
We recruited 6 participants for our test. All of them are students currently enrolled in the MHCI+D program. Since, Monty is a customized door slackbot that has been designed keeping in mind the MHCI+D meeting room, we rationalized that it would make sense to test our bot with currently enrolled students who would also eventually prove to be our intended target user group.
Ethnography Study
One of our team member went inside the room and closed the door. We observed the reactions of individuals who came to the door. We noted their responses to the closed door.
Tasks
We gave the user different real-world scenarios wherein they would have to engage with the board and we requested them to think out loud while doing so. Our different tasks based on various scenarios were:
Task 1: You want to reserve the room for conducting user testing. You want to make sure that you are not interrupted while doing so. Please set your options using the toggles on the board (First board 1 and then board 2)
Task 2: You want to plan a games night in the room and invite friends over. Make your selections accordingly on the board. (First board 1 and then board 2)
Task 3: You and your team are going to meet in the room to discuss a project. However, you do not want to restrict others from coming into the room and going about their usual work. (First board 1 and then board 2)
Post Study Questions
+ Which of the two boards did you find simple to use? Why?
+ Would you use such a board?
+ How many options/states do you suggest we integrate?
+ Any other suggestions?
Findings
+ Individuals who came to the closed door looked confused and hesitant to open the door. Individuals seemed to be apprehensive about invading someone’s privacy by opening the closed door
+ Many even tried asking the others present in class if they know who was inside and what they were up to
+ Four users claimed that they prefer Design 2, with multiple toggles, because they do not see themselves spending those extra few minutes to write a customized slack message (Design 1, LCD screen)
+ Two users claimed that they like the flexibility that Design 1 (LCD screen) offered because it provided the opportunity to express their creativity and design customized slack messages
+ Three users said that they fail to understand the ‘time feature’ as they do not understand if the lights signify the number of minutes left for the meeting to get over or the number of minutes that the meeting has been going on for
FINAL PROTOTYPE | slack integration
The idea of the design is that, when someone toggles the switch, the board will make an HTTP POST request to the Slack API, writing a message in the Slack channel, and giving visual feedback of the same on the #montytest channel. This could be used, to make a broadcast notification of any toggle event without having to use any other device.The Wemos D1 must be powered, for instance, via a USB charger or external battery. In order to be able to POST to the Slack channel, we enabled an Incoming Webhook. Incoming Webhooks are a simple way to post messages from external sources into Slack. They make use of normal HTTP requests with a JSON payload that includes the message text and some options.
The post message to slack function performs the HTTP POST. The function constructs the request and sends it using the Wifi Client Secure and returns a bool that is true when the status code is 200 OK.
References: https://lekum.org/post/arduino_slack_button/ & https://api.slack.com/incoming-webhooks
FINAL PROTOTYPE | form design
Coordination with electronics was important for our form design. Initially, we planned the number of LED lights, toggles, and the possibility of a LCD screen around the number of data pins available on our board. Later on, we planned the arrangement of lights and text based around a strand of NeoPixels. We knew that pixels would need to be diffused, and liked the quality of plain what paper for this purpose. We also tested for distance, and found that a depth of about 0.7”was ideal for maximizing light brightness and range.
We designed a frame of notched strips that would hold three strands of neopixels securely suspended at the right height above the diffusion paper. This internal frame was designed for easy removal. We didn’t want to glue the NeoPixels in place, in case their soldered connection came apart. So the whole frame fit together like a jigsaw puzzle, and could be removed and replaced.
This helped with our accuracy as we fit laser cut pieces to electronic elements. The aesthetic design of our form was inspired by a mix of antique and contemporary elements. We liked the organic quality of wood, and maintained this wooden look and feel in our sign buttons as well as backing. We also liked the rich feeling of moroccan geometric art, but ultimately wanted a sign that would fit into our contemporary studio space.