Tubeman is happy!
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.
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 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.
Web Design: paper&pen, Adobe illustrator, Adobe XD
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.
- 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 ❤