Tubeman is happy! -live web final project

Tubeman is happy!

Project Overview

Tubeman always moves in an weird yet entertaining way. It shares some strong and magical happiness through its movements.

Tubeman is happy! is a tubeman-themed gif booth that is made of an interactive web application, a camera and a background board. 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 make people happy while allowing them to share that happiness to others.

Project Setup

User Journey Map

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 tubemans 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.

Tool Kit

Web Design: paper&pen, Adobe illustrator, Adobe XD

Web Development-Javascript, HTML, CSS, node.js

Making Gif: WebRTC and gifshot.js library

Displaying, downloading and sharing gifs: nedb, web-socket

*I finished the web development and making gif part and need to work more on: 

1. designing the whole web page

2. working on enabling the users to download and share their gifs using their socket ids.

Current Demo

Working Progress

  • Design the tubeman avatar and make the gif of it moving

  • Writing the taking phones via web cam and creating gifs function. Demo:

  • Enabling Text adding function to the gifs – video

  • Adding sample movement images of the tubeman on the interface



Question left to think about

How do I make the starting taking picture action more natural and user-friendly?-possible ideas: add instruction demo videos, add a physical button to take pictures

How do I make the user to follow the movement of the tubeman in an natural way? How to guide them better? —possible ideas: add notes, add countdown timer between each photo, add guidelines on the web camera video(so they know where the arms are supposed to be)

How do I enable the users to download gifs and share them to social media like Instagram.

Where should I put my gif booth?(considering light condition…)

Some gifs ❤

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s