WITHME MESSENGER
Platform
Mobile Phone
Role
UX/UI, Branding, Strategy
Timeframe
Jan - Jun 2014
A patented design for emotive communication

View Patent

In 2014, I was part of a team to accomplish a new roadmap initiative: our mission was to resource company assets to create a highly visual, emotive, and customizable messenging app. I collaborated with another designer to create the product spec, and worked intimately with the engineers to scope the design within technical limitations.

In a span of six months, the app was built in iOS7 and shipped, and my work culminated in a design patent.

High fidelity storyboard of amplifying emoji intensity

The company at the time did not have much experience shipping mobile products, and this project was the first real foray in the mobile product space.

The objective was to prove a viable mobile product using company assets, specifically the 3D avatars. We considered the product benefits, and proposed that an immersive chat app would be most applicable given the scope.

Asynchronous chat allowed for a lightweight experience that was easily consumable on mobile devices, and by offering a more immersive experience in the form of customizable "emojis", the feature set would stand out from the rest of the competition.

Working with limitations

There were a lot of limitations that had to be considered. Morph nodes were not built into the head meshes of the avatars, which meant that we could not exagerrate facial expressions. The head shapes were unable to host interchangeable parts (i.e. swapping different noses, mouths), which drastically limited the styling of the face.

Basic matrix of facial types (icons courtesy of Amy Liu)

Our solution was to express the emotion through bodily animation and effects, and not heavily rely on facial cues (which given the small screen real estate on mobile, facial nuances would have been overlooked regardless). Customization limitations were trickier to handle; eventually we had to resort to creating 9 different permutations of head shapes, using a very basic matrix of facial features: eyes, mouth, nose, multiplied by three head shapes. Common sense and user research showed that while users did not feel that the provided faces were wholly representative of themselves, it did nevertheless lend enough control to feel viably customizable as an MVP.

Balancing lightweight interfaces to make more emotive experiences

The patent covers three of the innovations I created for more emotive messaging: interfaces that allow users to accurately convey emotional intensity, contextual suggestions based on text input, and scenic messaging.

Text-only communication, for all of its convenience, lacks the subtleties of face-to-face conversations. I resolved to amplify the nuances that are lost over text, creating gradients of emotion intensity that a user can choose.

Interaction spec of the mechanism in which a user can amplify emotions

This is played through the scene, via your avatar. The scene is fully customizable, allowing for interesting interplays of visuals and text.

Moods are detected passively through text, or deliberately through emojis and can play on the scene, changing the backdrop, avatar posture, and lighting.

Low fidelity wireframe covering the basic flow of messaging, scenery changes, and the emotion-amplication interface.

Additionally, I designed an interface to passively suggest visualizations of a user's inputed text. This proved too difficult to algorithimically predict, so it was dropped from the MVP.

High fidelity mock of the basic messaging flow, showing an instance of a suggested visualization of inputed text (right)

Branding and visuals

I wore multiple hats on this project and shared much of the credit for the product ideation, however I was its sole visual designer.

I took a competitve analysis of the messaging apps, noting that most were branded blue or green, very palatable to the mainstream audience. I strove to create a disctinction from these other apps by choosing a complementary color scheme. In essence, I felt that the product itself was distinct from the generic messaging app, and wanted to convey that through the design language.

A sample of the visuals and design language for the WithMe messenger app