mainmotionchat.jpg

MotionChat

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 
 
texting_primary-100224994-large.jpg

Problem

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.

 

 

Outcome

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. 

 

Goal

  • 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. 
 
n-05.png

Insight

 

'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
 
 
KakaoTalk_Photo_2018-06-18-22-57-39_8.jpeg
4EMOJI111417.jpg
 
Screen Shot 2018-06-20 at 4.10.18 PM.png

 

Idea

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

 
n-06.png

 

Target Audience

 

 
KakaoTalk_Photo_2018-06-18-22-57-58_10.jpeg

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

 

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

Jenny

 

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

KakaoTalk_Photo_2018-06-19-15-17-24_1.jpeg
KakaoTalk_Photo_2018-06-19-15-17-25_45.jpg
 

Information Architecture

 

motionchat_architecture-03.jpg
 
n-08.png

 

App Flow

 

 
flow-01.png
 

 

 

Paper prototype

 

motionchat_architecture-14.jpg
 

 

Wireframe

 

KakaoTalk_Photo_2018-06-23-16-10-54_61.png
 
n-09.png

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

 

IMG_8365.JPG
 
IMG_8370.JPG
n-10.png

1) Facemoji

 

 
facemoji.gif
 
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

 

 
ezgif.com-resize (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

 

cc-22.png
cc-21.png
motionchat_architecture-12.png
 
n-11.png

 

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