Karen Kalafat

Morgantown, WV

Interior Design

Web Design
• Japanese Course
Science Courses
Community Colleges
Nursing Education
Research Lab Intranet
Research Division Intranet

Graphic/Exhibit Design

Industrial Design

Portfolio >> Web Design >> Japanese Course

Japanese Course - Irasshai

Irasshai home page

Objective: Redesign a Japanese language and culture site that accompanies a video-based high school course to incorporate new activities and better navigation and structure. The new design is still live, though it has undergone some changes and sports a different splash page. It can still be viewed within the Georgia Public Broadcasting site.

Process: We had a team of interns who would be transferring the existing content into the new templates. We opted to use Dreamweaver for the transition in order to utilize the control features of the Dreamweaver template system. Once we had a plan for the team, we looked into the existing content structure to begin the new design.

site file structure
site file structure

Information Architecture: The existing content was catalogued, and new content areas were added to the structure. Much of the reorganization was based on feedback obtained from and data collected on users of the existing site.

The primary function of the site was to offer additional lesson materials for students in the video-based course. We focused our design around the notebook lessons.

lesson content design
lesson content design

For visual interest, we added an area below the left-hand navigation entitled "Snapshot of Japan." It displayed a photo and caption, which were randomly selected from a database of cultural items, and loaded a new image with every load of a page in the site. These were photos taken by our team while in Japan during the planning stages of the original Irasshai project.

Snapshot of Japan

Final Design: The final design offered a much more fun learning environment for students, incorporating better graphics along with the learning experience. The navigation proved to be much better suited for users. The site structure offered room for growth, as every year the students produced more project materials to display.

student project displays
student project displays

The site featured audio reference charts for learning Japanese characters, as well as animated drawings for learning stroke order and games for review.

audio reference chart
audio reference chart

animated instruction
animated instruction

The online Irasshai project was originally conceived around the Launch Pad, which was a collection of online sites with information related to Japanese language and culture. Students routinely used this area for project research.

Irasshai Launch Pad

The Irasshai site was honored with two different awards as shown below.

Irasshai site awards
Irasshai site awards

Launched March 2001. Site designed using Dreamweaver, Homesite, Photoshop, and TopStyle. I was the production manager on this project, doing information architecture, template design, usability testing, HTML coding, CSS, JavaScript, site documentation, audio recordings, and supervision of the design team.

[Top of Page]