BoxUnfolded designer Charles Aweida lead design for a messaging app at ifwe.co called Nod – featured by Apple as an iTunes Best New App. If you enjoy emojis, customization, animation and messaging Nod might be for you. Below is a brief intro to the thinking and process behind the design as well as some articles others have written about the app.
A Brief History of Communication
The best way to describe the conceptual thinking behind Nod is to take a brief look at the history of communication. Some of history’s early examples date back to 30,000 BC with cave paintings (I find it fascinating some of our first developments in communication were visual.) Writing systems are around 5,000 years old. Since then, a wide range of technologies have been invented to facilitate the written word, including much of what we use today such as SMS and Social Networking. I think it's safe to say the vast majority of the youth hardly speaks on the phone while spending the majority of their time communicating through their devices. One of the problems with this paradigm is the written word’s inability to capture the sentiment and emotion behind the words. As Albert Mehrabian states with the 7% Rule — communication is only 7% verbal and 93% non-verbal. The nonverbal component is made up of body language (55%) and tone of voice (38%).
Given the current paradigm of communication, how do we design for the behaviors and technologies of today? How do we allow people to express body language and tone through their devices without being physically present? Emojis are a step in the right direction however they fall short in their representation of each user as an individual. Most of us are far more individualistic than what's represented by our iOS and Android emojis.
What if we were to design a messaging app that allows people to communicate and express themselves through their devices while capturing nonverbal elements of their expression. How would it work? What would it look like? Nod is an attempt to solve some of these problems.
Animation and motion design moves to the forefront when designing for expression and nonverbal communication. I conducted a series of user interface designs with an animated and customized emoji as the focal point for communicating on a mobile device. One challenge is dealing with kinetic objects entering and leaving the screen in an asynchronous fashion. The following directions were explored:
V5: Depth of Field
V6: Bottom Persistant
V7: Top Persistant
We decided to proceed with V7 for one-to-one and V8 for group chat for our version 1 of the app which we would use to further evaluate with user testing. The proment nature of the avatars persistenting at the top creates an intimate experience as if you were side by side with another individual. The persistant avatars also opens open creative doors for animation and motion design where two or more avatars have the potential to interact with each other.
Visual Design Direction
There are many creative avenues and directions that could be explored when atempting to represent the complexities and individualites of a each user. When setting the creative direction I wanted something simple, modern and abstract yet highly customizable and diverse - the detail and customization associated with a traditional avatar, with the abstraction and simplification of an emoji.
The decision to inlude the head and shoulders was made to add more creative freedom on the animation front and more options for customization and personalization. The fianl component was creating an androgynous style where the user determines gender based on the components vs a predefined funnel of elements. This simplifys the user interface and library into a single system.
With the personalized emoji as the focal point of the product we wanted its DNA to persist throughout the user interface. We pull values from each users charactar and render a custom keyboard representing their attributes. Each keyboard element is represented in the chat view which replays each animated emotion with a tap.
Technical considerations were worked into the visual design direction to coincide with strategies coming from the engineering side. We decided to use a light weight resource efficient 2D animation tool called Spine (not a lot of fancy bells and whistles). The visual design for our avatars and creative direction for animation were designed to align with these constraints. There are a whole slew of topics to discuss in regards to animation which deserve an additional blog post. For now I would describe the process as lots and lots of keyframes.