Author: Ruby Kim

Link: http://imanas.shanghai.nyu.edu/~sk7383/videoProject/coding/default.ht

(The layout may be distorted depending on the screen resolution)

Description:

The project delivers the story of Mr. and Mrs.box planning their anniversary date. It is a silent video; therefore, their facial expression and the background music play a crucial role. Users will be offered with 5 options in total (2 by Mr. box and 3 by Mrs.box), and in the end, they can choose the date for them.

Process:

In terms of division of labor, Tenielle contributed by coming up with the idea, storyboard, and directing during the film process. Daisy was responsible for overall shooting and editing videos and I was in charge of coding. Even though we had a distinct role each, our group collaboratively worked throughout the project. As I was working for the coding, I focused mainly on the way of interaction that users can experience and how can the webpage help the videos to be effectively presented. The first idea that I came up with is making a separate loading-like page, instead of starting the video right away. When the progress bar reaches the end,  the heart bubble will appear and it will lead to the next page once the user clicks it. Also, when the pointer is on the bubble, the pointer changes its style into a smiling face.

Then, I tried to link HTML and let the video to be automatically played. However, I found that when I use the “autoplay” attribute, it worked in Safari, but not in Chrome. After asking the professor, I realized that the autoplay attribute will be disappeared due to the automatically appearing spam pop-up windows that can negatively affect the users. Therefore, I tried to think of how can users access the videos without control bars, but more in an interesting way.  The idea popped up was to let the mouse pointer to be altered depending on where it is positioned. 

At last, I decided the page to link instantly after one video is finished and let the user click once to continue the video.

Also, during the user test, I received that the instruction for interaction was not clear enough. Before, the bulb was enlarged only if the mouse pointer was on the image. However, afterward, I added an animation that infinitely changes the scale of the image in order to catch users’ attention and instantly make them click the image.

Another small effect that I added can be shown in the following images. Once the user hover on the image, it will expand like a book. For this effect, I used “::before” and “::after” tag in CSS. I worked on it based on the example that I found online and adjusted ‘background-position’, ‘border-radius’, and etc.  

Regarding the layout and background of the page, those were also revised after the user test. Before, it had a plain light colored background with boxes aligned diagonally. In order to continue the overall cute ambiance of the video, I found an image with a notebook on a wooden desk and made the dating options as pictures inside the book. For me, it felt like photos of possible memories that Mr.box and Mrs.box might include to their album, so I personally really liked the overall theme.

Reflection:

Unsurprisingly, coding for this time also let me encounter a lot of troubles, especially when dealing with ‘localStorage’ and ordering of HTML when linking them all. Nonetheless, I myself was also surprised of so many things that can be done by coding and therefore am satisfied with the final work. However, if we had more time, I would have definitely worked on adding facial expressions by video editing, not by attaching the paper to the boxes. Also, before when the user clicks to play the video, I  wanted the pointer to have animation so that can give them a clear instruction. However, since I changed the cursor style on javascript, I did not have an object to grab in CSS or javascript. Therefore, I was not able to make the cursor animation on javascript. Those two are the things that I want to improve in a future project.

Our initial storyline was having two characters, Mr. box and Mr.eraser, and letting them decorating the room. However, after several discussions, we have changed our plan a little bit. Mr. box will be still on our video, but instead of Mr. eraser, there will be Mrs. box, and we will be shooting the story about them. They will be in a setting when their anniversary is approaching in a few days and think about what kind of date they should have. Also, in terms of the design of the web page, the users will be able to a video and a button, which they can click and continue the story. After watching several series of potential dating scenes, the users will make a final decision for them. 

For the video project, we got inspired by the previous project, Roboto video.

We decided to include two main characters, Mr.box and Mr.eraser. The scene will be mostly in the room with two roommates. Mr.box and Mr.eraser are going to discuss how to decorate the room since they have different abilities. Mr.box can put objects into himself and deliver to a certain area. On the contrary,  Mr.eraser can ‘erase’ things that they do not want to include in the room.

Therefore, the main interaction for the users will be selecting options of ornaments, whether to include or exclude certain objects If the user chooses toare adding something, Mr. Box will come and add it for them, and if they want to take away something, Mr. Eraser will erase the items not wanted. 

Also, in terms of the design of the webpage, we will juxtapose two videos; one showing from the box or eraser’s perspective, another showing the back side of them.

This powerful talk delivered by Chimamanda Ngozi Adichie was truly inspiring and I could engage a lot into it.

In my case, I was born and grew up in South Korea for my whole lifetime. While growing up, I also had a single story not only for a particular country, but also for other people, system, and whatsoever. The stories that I had received from the media used to be my source of information, and I tended to accept them without particular suspicion. However, until I came to Shanghai, I did not realize that I had a single story. In other words, I was not aware of the stereotypes that I subconsciously had. Meeting a lot of people from diverse backgrounds, I acknowledged that I was limiting myself by having an assumption for a certain thing. Furthermore, I also encountered others who had a single story. For example, while I was talking with my friend, he said, “Oh you must be good at math, cause your Korean!” After hearing this, I was not offended but felt odd and could think about how other people also have a single story as I did.

A single story is “not untrue, but incomplete.” This direct quote from Adichie was the most refreshing and inspiring for me. As we cannot experience or be aware of all different aspects of each story, it is very likely for “one story become the only story.” But, we should realize that this limits ourselves, and therefore should not judge others by a biased perspective before understanding them comprehensively.