How to convey emotions in online chat


The challenge: Re-imagine emoticons, by replacing them with short video clips in chatrooms.

What we did: Brainstormed, prototyped, tested

Effort: 2 students

The result: Version 1 is a fun approach that puts the focus on the videos, while Version 2 tries to mimic real-life through short clips that only momentarily interrupt a chat and then disappear.

When: April 2014, 1 week

Version 1

Version 2

Sending: Confirmation that I sent a video to my friend.

Receiving: I get one of my friend's emotions - full-screen, in-my-face, and only for a moment, like in real life. Clips are tinted with colors, like pink for <3

Design Process

Peek into my sketchbook

Design considerations & brainstorming

Diving into the video recording mechanism

A storyboard created during the brainstorming process

How do you receive the video?

User Testing

An afternoon at the; quick 5-minute usability studies with pairs of people

Feature Feedback:

Version 2 was a bit unclear. Users weren't sure if the colors meant anything and were shocked when the video appeared.

  • We decided to add the emoticon overlay on the video, and also to alter the chat text immediately preceding the video to gradually appear and change color, in order to hint that something was about to happen on the receiving side.

Overall Feedback:

Mixed reviews for preference.

  • If we were to continue the project, we would have clearly defined our goals and users, to focus on an experience that was either more natural or more crazy. For example, is this for a specific type of conversation or for day-to-day online chatting?