On March 11th 2011, a massive 9.0-magnitude earthquake shook the northeastern coast of Japan—and the world. The aftermath of the earthquake and resulting tsunami left Japan in the throes of devastation. As immediate disaster response efforts began, the global community reached out for a way to communicate their thoughts and prayers.
Messages for Japan is a site that enables the communication of hope and support from around the globe to the people of Japan. Users are able to write messages in their own words—in their own languages—while Messages for Japan translates them in real time through the integration of the Google Translate API. Instantly, messages are posted to the site for all those in the global community to read and pass along.
Originally we had hoped to incorporate the iconic imagery of the Japanese flag in the message delivery vehicle. Due to cultural sensitivity however we kept only those key elements that evoked a sense of Japanese culture—ultimately changing the color palette and background imagery.
Real-time translations were a requirement to building a successful user experience. The global community needed a messaging platform that could accommodate multilingual input with a single output—Japanese. By aligning the simple elegance of the Messages for Japan site with the Google Translate API, users were able to write messages in their own words—in their own languages while the Google Translate engine ran seamlessly in the background.
We wanted to harness the individuality of the user so we coded the orbs with a variable circumference based on the text-length of the message.
Ideas on how to categorize sent messages within the site were explored. In one scenario the orbs were designed to display the body of the messages in both Japanese and the original language. Another idea included grouping messages according to keyword association.
In order to visualize how messages would be grouped based on keyword association, we mocked up a few screens showing a possible user path. Unfortunately due to timing constraints we were forced to abandon this direction.
Using "Love" as an example of an organizing keyword, the above shows how similar messages group together visually. Additionally, a simple navigation is established to enable cycling through keywords such as love, hope and pray.
The keywords would be chosen dynamically based on the frequency and appropriateness of the text found in the tens of thousands of messages sent through the site.
The message view is a simple and elegant delivery vehicle. The message translated to Japanese takes the hero space with the message in its native language beneath it. Functionality for cross-pollination through social networks is added as a footer element
Inspiration was taken from the Sakura, an iconic symbol of Japan, in lieu of the color palette associated with the Japanese flag. The goal was to maintain the orbs as the visually organizing principal but align the look and feel to the elements of the Cherry Blossom. Additionally, the site launched one month after the earthquake—during the Sakura season—making it culturally apropos.
Here are a few examples of inspiration pieces. We took the visual cues found here to design a background representing tree branches. These branches "bloom" with the messages being written around the globe to evoke the feeling of an organic site.
We couldn't pass up the opportunity to further enhance the site by integrating the Google Maps API. By adding this functionality we were able to associate the messages with their origins on a map. Visitors to the site could see where the messages of hope and support were being generated from globally.
Main navigation icons.
Defining the grid.
Together with Johannes Leonardo and Google, Fi approached the project as an opportunity to design and develop a global messaging platform for communicating support to those affected by the earthquake in Japan.
Though the primary purpose of the site was to provide this messaging platform, it was also important to the ongoing relief effort to provide a vehicle for generating donations. As a key consideration in the experience, Fi leveraged the logos of various organizations who were leading the aid efforts as a means of enabling visitors to easily donate funds to the rebuilding effort in Japan.