CLIENT: Namco Bandai Games America
PROJECT: Design and Dynamically-Driven Flash Site Development
www.dothack.com/gu/

The DotHack home page

Namco came to us with an interesting challenge: They had three more games in their highly-popular .Hack series coming out and they needed a website that would showcase those games. So far, so good. The challenge came in that they only had one game finished and they had no idea what content they were going to have from the next games and how they were going to market them. At the end of the day, they needed a website that could capture the unique world of the first game but could then grow with the series to encompass three or more additional games.

From a design standpoint, I used the in-game interface as a launch pad for developing an engaging website UI that would capture the feel of the game while still being neutral enough to accommodate the different games as the series progressed. I aimed for a high-tech, clean interface to maximize versatility and to show off the in-game assets as best as possible. Additionally, to add visual interest and differentiate this site from the myriad other websites out there, I made all the different site sections represented by floating spheres of content arranged symmetrically on a polygon rotating in 3D space. This created a very cool, distinctive look that the client loved. Little did I know how much Flash work it would create as well (more on that below).

On the Flash side, all the interior pages needed to be XML-driven so that content could be quickly and easily updated. Everything needed to be extremely scalable as well — all the sections of the site eventually needed to be able to handle up to three games’ worth of content. Moreover, they needed the ability to add, edit, and delete entire sections from the site. This last step meant that the polygon that the main site sections sat on needed to change: if they only had four site sections, the polygon needed to be a square; if they had five sections, it needed to be a pentagon; eight sections: octagon; and so on. That means that the Flash needs to read how many interior sections there are, draw a polygon, place the spheres for each section in the right place, and then modify EVERYTHING so that it sits in the correct perspective. I nearly melted my brain with all the trigonometry I had to relearn (my high school trig class was less-than stellar… and what 17-year-old really thinks he’ll need to know trigonometry at some point in the future?), but I got the whole thing to work. I even added in a command-line tool which they used in combination with print campaigns (users type in a secret word in order to unlock hidden content) as well as fun Easter eggs (try typing in a curse word into it).

The end result is a site in which nearly every aspect is customizable (everything right down to the copyright line in the flavor text is updatable), it gracefully manages a huge amount of content, and it has been so easily scalable that the site launched with one title and now houses all three of .Hack’s latest titles, all without any modification to the original site structure.