JucseBox Installations
Overview
Before the Ph.D. community was split between the two University of Washington Computer Science and Engineering (CSE) buildings, students used to run into each other more frequently during their breaks and had spontaneous interactions. Through our research, we found that Ph.D. students want to meet and interact with new people from different research areas, but their busy schedules prevent them from doing so.
We came up with JucseBox, a pair of music installations located in each of the CSE buildings. The installations allow Ph.D. students to listen to synchronized music simultaneously across the two buildings. With JucseBox, users from one building are able to send songs to their peers in the other building. They can also react to the currently playing song and the reactions then show up in both installations.
PROJECT DETAILS
Duration: 10 weeks
Team: Joy Clark, Cynthia He, and Lior Levy
Role: User research, user testing, storyboards, interface design, prototyping, and project presentation.
Tools: Sketch, After Effects, Laser cutter, 3D printer, and Wood shop
Users interacting using prototypes of both installations in two separate buildings
Design Process
Research
Contextual Inquiry
Followed and engaged with 5 students in their journey between the two buildings, in order to get an understanding of their environment.
“The two buildings kind of make it feel like two different departments, even though there is still one CSE department.”
- Ph.D. student from the Robotics Lab
Observation
Observed people’s behaviors in labs, lounges, and hallways in both CSE buildings.
Semi-structured interview
Interviewed 5 different students and faculty members about their experiences in both buildings.
“I like to walk to Allen during my breaks to use their coffee machine so I can also catch up with friends in the lounge”
- Ph.D. student from the Robotics Lab
Research Synthesis
Ph.D. as Target Users
Undergraduates have less major concerns or issues with the division compared to the Ph.D. students.
Desire to Socialize
Although most Ph.D. students have busy schedules, they wish they could socialize with more people in the department.
Frequent Study Breaks
Ph.D. students take breaks often and utilize their break/kitchen lounge.
Design Opportunity
When some labs moved to the Gates Center, a spatial division arose and separated the Ph.D. community into two sub-communities. We found an opportunity to make use of their breaks, the primary free time in their busy schedules, to foster spontaneous interactions amongst the Ph.D. community in both buildings.
Ideation Process
Community Storyboard
Encourage people to gather in the same space, and foster more interactions by displaying the information on a single interface in each building.
Riddle
Foster spontaneous interactions by encouraging people not only to share their solutions with others, but also to reach out to the person who proposed the riddle.
Music Reaction Station
Foster interaction by uniting Ph.D. students through the sentiments expressed in music, and through shared music tastes.
Deciding on a Solution
After considering the benefits and drawbacks from a user point of view, as well as doing an assessment of the feasibility of each proposed solution within the time constraint, we decided to go with the Music Reaction Station.
Low-Fidelity Prototype
“Wizard of Oz” User Testing
We incorporated four components in our first prototype of the installation: buttons, speaker, screen interfaces, and physical shape to test our overall goals to our solution. These goals were:
Understand if the installation’s music component would be socially acceptable.
Check if users understand that there is another installation in the other building.
Test if instructions on the screen and physical buttons are easy to follow.
Findings:
Playing music in the lounges is acceptable and the interactive aspect is fun.
Screen interface was not clear in showing the selection would affect both rooms synchronously.
Button placement was unintuitive and needed to be further revised.
We continued testing other iterations with changes based on users’ feedback to finalize our design solution.
Storyboards
The situational storyboard shows what the interaction looks like in both buildings, Gates and Allen, simultaneously.
Both functional storyboards show the functionality of the system in more details using low-fidelity wireframes of the screen interface.
Finalizing System Components
Architectural Design
Screen Interface Design
Goals:
Attract potential users to interact with the installations and engage them with the music sharing activity.
Present instructions with a clear visual hierarchy to help the user understand they are interacting with their peers in the other building.
Present noticeable and intuitive signifiers that allow the user to know what actions can be taken on their end and what are some potential outcomes.
Animations and color coded icons of the two buildings to indicate that music is synchronized in both CSE buildings.
Reaction Emojis allow users to react to songs based on their likings.
Memes act as pop culture elements to indicate whether a song is accepted or rejected by the users from the other building.
Instructions show users what buttons to press for further action
Front-end and Back-end Development
This component of the system is meant to allow users to share music with one another across the two buildings and listen to it together. The front-end of this interface was developed in React.js and the back-end we used was Google’s Firebase.
Sensor Component
The sensor component is meant to draw people in as they walk by the installation. Each installation utilizes an Arduino, a motion sensor, and LED lights. As people walk by the installation, the motion sensor detects how close the person is to the installation. The closer the person is to the installation, the faster the LED lights flash, until they start to use the installation.
Final Design
Final Showcase
We put our final prototype installations in each building’s Ph.D. lounge for two hours and got feedback from users. Out of all the projects presented, our JucseBox project got the Best Design and Implementation Award.
Reflection
Throughout this project I have collaborated with two engineers which I noticed have different ways of approaching problems than designers. They mainly focused on how to solve the problem rather than why. As a designer, I always want to make sure I know who I am designing for and why there is currently an issue that I need to find a solution for. We took the time to define the user needs and testing different iterations to make sure we know how to go about the final solution.
I have contributed in most of the steps in the design process. We all have collaborated on the initial research phase to help define the problem, the ideation phase to eventually come up with a concept, as well as the iteration and user testing phases to make sure the concept answers the users’ needs. Once we finalized our idea, we broke off to work on each component of the system individually. My main contributions at this stage were the finalized screen interface and animations as well as both finalized physical installation prototypes. By working on the physical component I have gained new skills including creating a 3D design prototype as well as working with a 3D printer and laser cutter.
One of the challenges we experienced throughout the process was deciding on a physical form for the installations. We had to keep in mind all the other components that were included in the design and how to best fit them together. There were other features that we wanted to include in the design, such as a search bar and a longer list of songs to choose from. However, due to time constraints we chose to implement the minimum viable product.
I enjoyed every step in the process and was happy with our final result. After the final showcase, the CSE department asked if they can have the installations stay in the rooms for a few more days which proved to us the design was successful.