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
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 where 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 physicalyzing 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 to 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 sign status was posted to slack.
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.
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.
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?
+ 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 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 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 will need to enable 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 constructing the request and sending 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 in 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.
To minimize materials and laser cutting time, Sarah designed the external form and internal frame by printing out paper designs, and building / measuring cardboard models. 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 fit into our contemporary studio space. Sarah found a promising vector pattern of cubes, and cut it down to create a rectolinear sign shape with an irregular edge.
It took the whole team to get the our sign created, the code made, and all the electronics set up. This ambitious project would definitely have been more difficult to accomplish with just 2 people. In hindsight, the design process for making our sign was a challenging one but it also provided us a lot of insights into what people prefer in terms of signs, the power constraints of a Wemos D1R2 board, and how to work with external power sources.Some things that we would do, if we had a chance to go back, would be to have figured out what we were going to do on day one.
In addition, it would have been better to narrow down our concepts earlier, created our two prototypes for testing, and test users in the first week. As for the electronics, we should have tested the boards with some simple code to make sure all the toggles and the NeoPixel light strips would work at the same time with one board with one power source.Items that went really well include the division of tasks and communication.Our team divided up the tasks based on expertise. Having each person do what they’re really good at sped up the process of making our final prototype. In addition, communication was strong in our group. We usually knew where people were if someone was late and we also knew how far each person was progress wise.Our main reflection on the physical aspect of the final project was the speed with which we were able to get our ideas into production.
This was thanks to the different techniques that we’d learned over the course of the quarter. We were able to prioritize different techniques for different aspects of our testing, thinking about their time investment relative to results for efficient construction. For example, early low-fi paper prototypes helped us narrow before constructing higher fidelity cardboard prototypes that allowed for interaction testing. Planning the final model with additional cardboard patterns helped us design the laser cut pattern, and kept our overall cut time down to a single pass.The decision to split our final presentation prototype into a large version that modelled form and lights and a small version that modelled slack functionality was a good idea. It enabled us to share our complete vision, and gave people the chance to experience the idea of themselves, within our limited timeframe.Our project video became a helpful way to WOZ the two together and share the complete experience, regardless of the split prototype.Next steps for Monty would be to get a more powerful board such as raspberry pi 3, create the slack code for that, and get toggles that actually have an off state.
We want to integrate immediate light feedback with toggle presses, and explore additional light modes. We also want to subtly refine the signUI, working on more distinct forms for different types of toggles. In a more ambitious version of this project, we would integrate a small LCD screen to read upcoming room reservations direction from the room’s google calendar API. Both the studio sign and slack channel would bring pre-planned reservation information together with in-the-moment studio usage, creating a robust and convenient. information experience for each door.It would also be great to see if we can get compensated by the program to refine the current board and create another one so that each meeting room door has one sign.