MotionChat is a chatting application product which allows users to send GIFs and emojis in convienent and genuine ways. 

PROBLEM

 

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. 

OUTCOME

 

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

 

https://github.com/MonaKim/liveweb/tree/master/week2

Sketch, Photoshop, Illustrator, Principle,

Javascript, CSS, HTML, Nodejs, 

Websockets, APIs,

Final Cut Pro

 

My Role

 

UX Design using Sketch and Principle,

Video Mockup,

Main image Mockup

User Research,

Visual/UI Design,

Concept Design,

Paper Prototype

 

 

Credit

 

CODE: Koji Kno

Jinhee Ahn

 

 

Goal

 

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

Target Audience
 

Age : 10+ - 50

All genders

 

  • 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   

Persona

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.  

Jenny 

 

Female 

Age 22 

Collage Student :

Sophomore, Fashion design major

Live with a roommate in a dorm

User Scenario

Scenario 1

Facemoji 

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. 

Scenario 2

GIF generator

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.

Design Sketch

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. 

Information Architecture

 

User Flow &

 

Wireframe

Paper Prototype

 

User Test

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

Messaging app

Main Menu

Facemoji

(Emotion to Emoji)

interaction

Visual Design

 

Text to GIF Message

Camera View 

Gradient Controller

GIF sent

Facemoji 

generated

Drop Down Menu

GIF Album scroll

Select to Send

Album

Design System

 

#Emojipedia API #Human Analytics API

#Kairos #faced #openCV

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.

I used platforms on the web such as HTML5, WebSockets and WebRTC using JavaScript and Node.js.

Experiment

1) print out Emojis depending on my facial expression using JS.

Experiment

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

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. 

 

 

 

 

 

 

 

 

 

 

Edited by Hayeon Kim 2020