Like everyone around the world, we at Fi watched footage of the terrible destruction caused by the March 11th tsunami in Japan in helpless awe. In the week following the tsunami, Fi, Google and Johannes Leonardo partnered to create a site that would allow people all over the globe to send messages of support and hope to the people of Japan.

It's simply called http://www.messagesforjapan.com

In the US and around the world the site would be primarily used to write messages while in Japan the site would be used more to read these messages. Creating the site in HTML made sure everyone regardless of computer capabilities can access it, but added touches using CSS3 and more advanced animations when browser support was available.

Homepage

The three key functions of the site are “Write” where you can write a message, “Read” where you can read all messages, and “Map” where you can read all messages placed on a map using the Google Maps API.

It was best to present these three main pages to users on the homepage with icons that were universal and easy to understand. We also needed to present an easy way for users to make donations to organizations that are helping the relief effort in Japan.

Immediately the people of Japan could see the global outpouring of support by seeing messages show in real-time in a feed like list on the homepage, while also keeping track of how many messages have been sent. 

Write a Message

The “Write a message” area allows users to write their messages in the languages supported by Google Translate and see them translated into Japanese while they’re being typed. While you’re typing your message you’ll notice we used some subtle CSS3 animations to make the experience of writing your message feel lively and interactive. 

We felt the act of writing these messages should make users feel like they’re really doing something and adding subtle motion and responsiveness reinforces this.

An important part of the “Write a message”  page is the donate tool created. It was important to use the simplicity of Google Checkout to make the process of donating as easy as possible. You’ll notice clean animations added to the experience of donating that help users pick which organization they’d like to donate to. Tools were used to help format the Dollar or Yen ammount being donated by using some custom fonts made available by Google web fonts.

Viewing messages

There are two ways to read messages. The first method supplied was a simple page that allowed users to view messages in cherry blossom like circles placed on a page with a cherry tree branch. 

Using the Google Maps API, the map view is the second way users could quickly show the Japanese people how people around the world were thinking of them.

As messages are written they appear on the map as small circles placed in the location where the message was written. Take a look, share the link and show your support: www.messagesforjapan.com