MotionChat is a chatting application product which allows users to send GIFs and emojis in convienent and genuine ways.
How often do you text with your friends? How truly do you communicate in chatting app? Have you ever felt difficulty to find right emojis to express your emotion? Have you sent emojis to pretend you are all-good even though you are not? We often send emojis without empathy but habitually. Also, we scroll many pages to find emojis and GIFs when we communicate with others.
Admittedly, using emojis is a way of expressing feeling in non-face to face context. We want to solve a communication problem with lack of empathy by Emoji with your emotion. By doing so, generating emoji from your emotion is a key for this project. Thus, a camera recognizes your emotion by detecting your facial expression and convert it into an equivalent emoji. Moreover, we want to improve convenience of GIF interface. In addition, user can directly send GIF in a text field by just clicking a word.
Sketch, Photoshop, Illustrator, Principle,
Final Cut Pro
UX Design using Sketch and Principle,
Main image Mockup
Share the real emotion with emojis and start a true connection.
Saving time to send GIF and Emoji.
Allow access to data of users' preferences based on time and frequency in the album folder.
The average time spent per day with mobile messaging apps by adults in the United States 2015 to 2019. In 2017, U.S. adults spent an average of ten minutes per day with mobile messaging apps.
People use various chatting apps such as Facechat, Whatsapp, and iMessage every day. The chart shows that a consumption of messaging apps will increase rapidly. However, in those chatting apps, nonface to face communication is the main cause not to express real emotions and share empathy. People use Emojis and GIFs as an alternative to express their emotions but, many of them send them habitually. The facial expression as nonverbal communication is a great instance to measure whether the expression is true or not. Further, sending GIFs requires too many steps for users. In the WhatsApp, it requires more than 8 steps to send a single GIF for first time user. Thus, we decided to focus on facial expression as an alternative way to share true emotions. Also, in a text field, we'll focus on the user-friendly interface for sending GIF.
1.2.3. For the first time user, you need to allow camera and sound access
4. Access your camera roll in order to go to GIF search
5.6. A search field is available once you hit the GIF button,
8.You can now send it to your friend. Hewww..
7. Once you select the one you want, the customizing option is navigated even if you do not want to costomize.
Age : 10+ - 50
People who text regularly
People who use emoji or GIF often
People who want true communication
People who look for a convenient way to communicate
People who want to experience more playful chatting
She always connects with her friends with chatting apps in class or even on her bed. Her most used chatting apps are iMessage and WhatsApp, Snapchat and FaceChat. She loves to send emojis and funny GIFs to her friends. She chats with a lot of different groups of friends at the same time with different chatting apps. She uses her mobile phone and laptop to chat with them to catch up with them. She often feels overwhelmed by many chatting rooms she keeps up every day, so she tend to send meaningless emojis and send them habitually for just being participated in the conversation.
Collage Student :
Sophomore, Fashion design major
Live with a roommate in a dorm
MotionChat can express your emotion with emojis by hitting facemoji button.
MotionChat is sharing your current emotion with your friends on chat.
MotionChat is not only sharing your true emotion but also connect you to friend bonding.
MotionChat allows changing the word into GIF if she holds on the word.
MotionChat can save your chatting time and make the conversation more exciting.
MotionChat makes your chatting life more fun and
saves you from mundane life.
Brainstorming & sketches
We started to discuss the main functions of a chatting app flow and each types of chatting contents are text, emoji and GIF. They are categorized under different features depends on forms and usages, and it also affects how to use it.
User Flow &
We created a revised version of the paper prototype, a laser cut cell phone mockup for user testing. We tested our app flow and app functions and received user's feedback.
<What we ask>
General needs of chatting app function
Functions of Facemoji and GIF generator
Design feedbacks such as a size of camera screen size and location / Facemoji size
<Functions users want>
Status of a reading message: We considered to adjust this function and also a number of unread messages on the right side of each messages on the chatting list.
An alarm function of each chatting room that a user can turn it on and off
Simple and intuitive menu and icon name/category
Sketch & Principle page
(Emotion to Emoji)
Text to GIF Message
Drop Down Menu
GIF Album scroll
Select to Send
I explored my facial expression using Clmtrackr library,(a facial detection API) especially focusing on recognizing emotion, after the final presentation for my final in LiveWeb class with Prof. Shawn Van Every. At first, I tried a camera on your mobile or webcam on your laptop tracks your face and read emotion such as joy, surprised, sad, fear, anger, and disgust. Depending on my facial expressions, emojis are dropping down as if it rains. The emoji symbols categorize into four sections; anger, surprise, happy and sad. While I was testing, the different emoji outcomes require me to have an obvious differentiation on my face.
From the five screenshot, the four expression steps were quite accurately printing out and send a proper emoji.
How accurate the APIs can recognize the different face also because emoji has so many detailed differences such as smiling face with smiling eyes, smiling face with smiling mouth, it will be challenging to categorize them right.
1) print out Emojis depending on my facial expression using JS.
2) print out gifs from Giphy API based on words using JS.
Secondly, I move on exploring how “sending GIFs”, from ‘Text to a GIF” on my phone. Based on this concept, at first, I used the GIPHY API with an access key and connected the GIPHY via RapidAPI package for sending a text. I used RapidAPI to smashing two APIs(GIPHY’s and Twilio’s APIs) together, it was a bit tricky but well connected. If the call is successful, the script will call Twilio’s API to text a MMS with the generated GIF. To call Twilio’s API to send a text message, it requires an accountToken, accountSid, messagingSid and a Twilio phone number. (FYI. Note: If you generate a free “from” phone number with your Twilio developer account, then the phone number you associate with the free “from” number is the ONLY one you can send messages to. In this case, the “Text A GIF” app will only send GIFs to your phone number. In order to send a message to any number, you must purchase an upgrade (see more in the Twilio developer console).)
Donation Fountain / Ordering system / MotionChat / TripActions /
sell your stuff / TILA Design / Spiderman / Motorclean / JourNY / OnSIP
Full script -> https://github.com/MonaKim/liveweb/tree/master/week2
<- Screenshots testing Twilio from my mobile phone.
Sending text of "dog" and "cat" to print out various GIFs.