Current Times

CURRENT TIMES

Current Times is a social commentary exploring the current state of human communication, where we exist in a physical world yet are trapped in the digital world, only to communicate to the outside through digital devices.

 
ct-window.jpeg

MY ROLE

Concept

Chat Developer

UX Designer

Body Scanning

Fabricator

Performer

SKILLS

JAVASCRIPT

CSS

HTML

NODE.JS

SOCKET.IO

MIXIMO

ct-scan.png
 

PROCESS

Because of my knowledge of Front End Development, I focused on creating the chat aspect of this project. Using Node.JS and Socket.io, I created a site that allowed users to send messages between each other. Each user was given a random color with the associated name. Because we didn't want onlookers to view what we were about to write before hitting "send,"  we couldn't mirror the screen.  Therefore, I created a hidden function that would allow the viewed TV to mimic our aesthetic and hide the text box.   This turned out to be a vital part of the magic of this project.

CHAT DEVELOPMENT

Current Times2.png

INITIAL MOCKUP

Due to the time constraint, we needed the UI to have a simple interface that most audience members would know how to use. As a result, I used the iOs aesthetic as the inspiration. The project also required that the chat be accessible online for the actor as well as the display. By using a website, I could do both without adjusting

LO-FI TESTING

After looking at the Lo-Fi prototype and assessing the project, I realized that the actor would need clear visibility of who was talking to them.

FINDINGS

  • The names of each users need to be unique and sent to everyone.
  • There needs to better visibility for the Actor to easily understand who is saying what.

 

 


 

 

PROOF OF CONCEPT

Using Node.JS and Socket.io, unique names were added from their socket ID rather (i.e. "Audience1, Audience2") and unique colors. I was able to grab a list of all the available color names in Javascript  and assign each new user to a random color. Because there would only be a limited number of users at a time, the colors could be reused.

I created the initial mockup to asses the usability and functionality. At this point my main concern was testing whether user names were sent and received in the same manner and if all devices can be used.

FINDINGS

  • Usernames could be sent consistently but were too random and gave a chaotic feeling.
  • The Avatar name needed to be clear and separated from the other users

 

 


USABILITY TESTING

The user interface needed to be tested on three different devices: phone, computer, and television display.  This meant three different user interactions that all needed to happen on one program. 

At the same time, the use of ease was tested other users to test whether they could understand what we were asking

FINDINGS

  • The television display changed the dimensions causing words to be cut off and elements to be moved.  
  • The text box and send button were unnecessary in the television display. 
  • The Avatar's messages needed to flip to the opposite side to match the person but only on the display.
  • The newest messages needed to be seen and easy to identify for the audience and the actor.

ct-chat.png

FINAL TESTING AND FINAL FINDINGS

For the final iteration before it had to be used for the performance, I added hidden functions. These needed to be hidden to prevent the audience users from being able to activate them.

To show the newest messages, I added initial scrolling with a hidden function that the actor can activate to stop this it. I also created a function that would allow the television display to mimic what the Actor's display without. This allowed for the CSS to change to match the display as well.

FINAL FINDINGS

  • There can be some confusion by the user on what their username is. This could be mitigated by adding in chosen user names.
  • GIFs were used well but the CSS was not always adapted to the message.