nao ishitsuka design portfolio index_button
buck buttonnext button
Interactive animation interface for web site : SEA web design
sea web image
Socio Engine Associates Web design image
Socio Engine Associates (SEA) is a social marketing company.
The company was challenged by the fact that not many people were familiar with the concept of Social Marketing. The website really needed to grab the interest of the viewers and engage them in the explanation of SEA’s expertise in Social Marketing. In order to explain the various aspects of SEA’s business, I created an interactive animation menu using simple geometric shapes. Not only did this animation capture people's interest, I solved SEA’s business challenge by creating simple, easy to understand animations that illustrated the different aspects of their business.
The interactive animation menu was positioned at the top of the page. This was an effective means for conveying complex information as an attractive and simple presentation. Each aspect of the business that we wanted to illustrate using animation included many different themes. In order to convey the big picture behind these concepts, I created animations based on simple geometric shapes as my approach to this problem.
This approach to animation led me to develop my research project of Universal Storytelling at the Stanford’s Persuasive Technology Lab. This use of simple shapes to explain complex concepts in universal language is an archetype of my research.
April 2007
Flash 8 (ActionScript 2.0)
Illustrator CS2
Photoshop CS2
Dreamweaver 8


Explaining the business using animation
Collaboration with key non-profit partners is crucial to the success of SEA.
Each non-profit partner is illustrated with a star, and the network as a constellation.
SEA has five main aspects to their business. In order to express a bright future related to their business, I incorporated a bounce into the animations, representing happiness and action.
This animation was designed to illustrate the theme of cooperation between the three departments within SEA.
This pyramid shape expressed teamwork through action.
After illustrating the relationship between SEA and its non-profit partners, the user is directed to more information about each individual partner.
After viewing the animation of each aspect of business, the user is directed to project information specifically related to what they just viewed.
After illustrating the relationship between the departments, an additional animation illustrates the role of each department.