interaction design + illustration
Screen Shot 2015-12-26 at 3.15.33 PM.png


Mirror is a collaboration platform for remotely-working designers, making live design collaboration more feasible outside of the studio. As a prompt, we were to use the physical studio space into our design.




Encouraging Empathy

Mirror is a collaboration platform for remotely-working designers, making live design collaboration more feasible outside of the studio. As a prompt, we were to use the physical studio space into our design.


The Problem

Sometimes, a team member cannot be present in the studio. When this happens, they unintentionally miss the live, face-to-face collaborative working experience. This lack of presence can lead to strained group dynamics and relationships, which could negatively affect the team's workflow. 

My design initiative was to create a reliable system that simplified remote collaboration in a studio context.



This project began in a previous exploration for a separate concept shown below. In that project, I noticed that professors (understandably) feel offended when a student shows up even a minute late to their class. However, it’s easy for these instructors to forget the sometimes frantic behind-the-scenes process of that individual getting from point A to point B.


Because punctuality is a prominent factor shaping group dynamics, it made sense to implement this previous idea into the current project. 

The below pages explore a desktop interface that shows a very general location check-in, only to be seen by selected individuals with student IDs for privacy issues. I also thought about statuses—simple notes left on desks in the students' absence--to notify their peers of information such as the time of their return, or where they are if they need to be contacted. This visibility would add more widespread communication to those in the space. 


In addition to this primary problem, I also thought about the following:

  • Why is being present in studio so important?  
  • How can this design communicate a studio environment?

Initial Storyboard

This is one example of the experience where I try to answer these questions. The lavender post its represent the student leaving the studio, and the salmon-colored ones represent the collaborator’s point of view.

First, being in the studio space provides a different experience rather than working remotely—live feedback, material accessibility, and a workspace. This and communicating a studio environment are the reasons for the live video call; so each designer on both ends can elaborate their feedback and collaborate to the fullest. Having the shared documents (much like Google Drive) for the design process keeps this product in the context of a collaborative studio environment. 

And below is I imagined the initial interactions to look through photographs. 

Here, the user is able to expand the interface by dragging the corners of the screen and making gestural signals. When a collaborative video call begins, the tabletop screen rises and becomes a floating interface, leaving behind a keyboard.


Initial Wireframing

Wireframing for the tabletop interface. 

Wireframing for the joint app. Not all these were used for the concept video.

It is more likely that someone who just left the studio wouldn’t have access to their computer. That is why it would make more sense to leave behind the before-mentioned notes through a joint mobile app. Whatever is typed as a status would appear on their desk in their absence.


Some Reading

Along the way, I also did a bit of research on some HCI papers, especially focusing on Jennifer Mankoff’s paper about Evaluating Peripheral Displays. Afterwards, I tried implementing what I learned, with special emphasis on the learnability, error recovery, and usefulness into my design.


Second Storyboard

To keep myself on board, I redid the storyboard in the context of my concept video. I took out the keyboard shown in my previous sketch since it didn’t help to solve the problem. I added the usage of walls in order to add appeal of being physically present the studio space

I wanted the interface to be as hands-on as possible, so I implemented a different method to begin the collaborative mode. This would be done by dragging the screen onto the table, where folders containing process files within the group would appear, ready to be viewed and edited.



Filming the project was much more complicated than I expected. I was trying to strap the projector onto the ceiling to have the interactions (mocked up in AfterEffects) be readily available on the desk when I filmed it. However, the materials weren’t anywhere to be found, so my TA (thanks Tracy Potter) had to hold it over the desk over the duration of filming. With that, many takes were made with my friend Anqi Wan in order to get the timing correct. 

Realizing that the white text against the blue did not work together on camera, I had to go back and make the text black(shown above). That way, the contrast would be heightened.



I had a whole system of how my project would work, but I chose against demonstrating every single function in the video presentation. (ie: what happened if you tapped “back to folders” during the live collaboration mode) It was better to focus on only a couple key interactions rather than attempt to fit in several.

If I could do this project again, I would highly consider experimenting speech input—that would have hypothetically made this prototype and the concept video easier to execute. And of course, if I had more than a couple weeks for the project timeframe, I would have performed some user testing, and iterated on different solutions and branding.