UX/UI design / Mobile app


MotionChat is a chatting application product which allows users to send emoji and GIFs in convenient and genuine ways with reflecting their emotions. 

  • Work type: Class work (NYU ITP, 2017) Group work 
  • Team member: Hayeon mona Kim, Koji 
  • My role: UX research, UX/UI design, visual design 


How often do you text with your friends? How truly do you communicate in chatting app? Have you feel difficulty to find right emoji to express your emotion? Or have you ever send emojis to pretend you just want to be nice or express sympathy regardless of your true emotions? 

Using emojis is a good way of expressing our feeling in non face-to-face communication. However, it is also true that we often send emoji without empathy but habitually. GIF is considered an advanced version of emoji to express emotions with a more fun way and is used a lot especially in young generations. However, it also has an inconvenience to send it quickly since it requires to go through several steps by clicking.




We wanted to solve a lack of empathy by emoji and inconvenience of GIF.

First, a camera recognizes your emotion by detecting your face expression and convert it into an equivalent emoji.

Second, a user can directly send GIF in a text field by just clicking a word you wish to send with GIF. 



  • Share a user's true emotions with emoji and start a true communication by texting communication.  
  • Saving time to send GIF 
  • Allow users to self-check their emotions they share with people during texting and to know their GIF preferences and lifestyle by frequency. 



'The facial expression as nonverbal communication is a great instance to measure whether the expression is true or not.'

'Non-face-to-face communication is the main reason for difficulties to express real emotions and empathy.' 


People use various chatting apps such as Facechat, WhatsApp, and iMessage every day. The chart shows that consumption of messaging apps will increase rapidly. However, in those chatting apps, non face-to-face communication is the main cause not to express real emotions and share empathy. People use emoji 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 GIF 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.


Screen Shot 2018-06-20 at 3.54.42 PM.png
Screen Shot 2018-06-20 at 4.10.18 PM.png



Let's use face expression and convert it into an equivalent emoji.



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   






Screen Shot 2018-06-20 at 3.55.36 AM.png



  • Female 
  • Age 22 
  • Collage student: Sophomore, Fashion design major

She is always connected with her friends with chatting apps even at class or on her bed at night. The most used chatting apps are imessage and whatsApp. She loves to send emoji and funny GIF to friends. Because she always chats with different groups of friends, she even chats with them with her cell phone and lap top at the same time. She is often overwhelmed by a lot of chatting rooms she participated at the same time, so she just send the meaningless emojis to show she joins in conversations. 



User Scenario


Screen Shot 2018-06-20 at 4.53.21 PM.png


Design Sketch

We started to discuss about the characteristics of a chatting app flow and also of each form of chatting contents which were text, emoji and GIF. They had different features depends on forms and usages, and it also affected how to use it. 


Information Architecture




App Flow





Paper prototype







We created a revised paper prototype, a laser cut cell phone mock up for user testing. We tested our app flow and app functions and received meaning user feedback. 

<What we ask>

  • General needs of chatting app function
  • Functions of Facemoji and GIF generator 
  • Design feedbacks such as camera screen size and location / Facemoji size


<Functions users want>

  • Status of 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



1) Facemoji


Screen Shot 2018-06-21 at 5.49.17 AM.png
Screen Shot 2018-06-21 at 5.49.24 AM.png


2) GIF generator (17).gif
Screen Shot 2018-06-21 at 5.48.54 AM.png



3. Marking of unread messages




4) Drop down menu

Screen Shot 2018-06-21 at 5.49.32 AM.png


5) Design guide




Face Detection and converting into Emoji


Using Facial Detection APIs that Recognizes emotion, a camera on your computer or a webcam tracks face and read emotion such as joy, surprise, sadness, fear, anger, and disgust on the face and send a proper emoji.  “Rainy emojis” are dropping down depending on User's facial expression. The emoji symbols categorize into four sections; anger, surprise, happy and sad. 

Screen Shot 2018-06-20 at 5.07.11 PM.png
Screen Shot 2018-06-19 at 10.19.53 PM.png