Tubeman is happy!

an interactive web experience

Tubeman is happy! is an interactive web application. The users can use it to create, download and share gifs of themselves moving like a tubeman. By encouraging the users to imitate the tubeman and enabling them to create and share gifs of themselves moving, Tubeman is happy! is trying to create simple and sharable happiness.

Key Words

Interaction Design, Web Development

Time Frame

4 weeks

Progress

Ideation, User Testing, Prototyping, Iteration, Showcase

Toolkit

Adobe XD, Illustrator, WebRTC, WebSocket, Node.js, Javascript/HTML/CSS

My Role

Interaction Designer and Web Developer

Showcase

ITP Winter Show, 2018

 

How it Works?

1

When entering the web application, the users will see an image of the tubeman. They will also see themselves in a camera feed.

 

2

Following the instruction, they will then imitate the movements of tubeman (as shown in the picture), pose and take 18 pictures.

 

3

Users can add a word to describe their moods at the moment.

 

4

At the end of this experience, a gif will be generated.

 

5

The users can access to the gif by entering emails of themselves and then be able to share that “stupidity” and happiness with others.

gif1.gif
 
 
 

Project Setup For the Show

projectsetup_e794bbe69dbf-1.png
 

User FLow

userjourney-02.png

The user will first see and go to the gif booth. They will then look at the instruction computer and follow a series instructions which basically guide them to look at a frame by frame breakdown of a tubeman’s movements, take pictures one frame by one frame imitating the tubeman and at the end, get a gif made of the pictures taken previously. They will be able to download and share the gifs.

All the previous taken gifs, if allowed by the users, will all be displayed on a display page that everyone can see.

 

At the show

I developed this project on my MacBook and showed it during the ITP winter show in a larger scale as a “gif booth” installation. Hundreds of people have visited my project, moved, laughed and had fun.

Here is a glimpse of the HAPPINESS!


 

Why do I want to make it?

Tubeman always moves in a weird yet entertaining way. However, it shares some strong and magical happiness through its movements.

Happiness can be subtle and simple. I have noticed there are many simple things in life that easily makes people happy. Like a smile from a stranger on the street, a weird shape cloud in the sky, as well as the funny movement of a tubeman.

Technologies have made it simple for us to share moments in our lives with others much easier. Living in a social media era, it is natural for us to capture moments in our lives and share them. By sharing a photo of us in a certain time and space, we also share our emotions and connections to that physical space to people in another place.

Therefore I want to create an experience in which people can share a form of simple happiness easily to their families and friends through technologies. This idea leads me to create “Tubeman is happy!”.

By encouraging the users to imitate the tubeman and enabling them to create and share gifs of themselves moving, “Tubeman is happy!”is trying to make people happy while allowing them to share that happiness to others.