Japan Studies Program
At a Glance
Integrated renewal of the Japan Studies Program website for Tokyo International University (TIU), including visual identity, photo shoot, video production, website interface design, web development, copywriting and print design.
In Detail
Tokyo International University (TIU) approached us to revamp their outdated Japan Studies Program (JSP) website.
The Japan Studies Program is a full-semester study abroad program hosted at Tokyo International University. The JSP focuses on intensive Japanese language courses, cultural field trips and events, and full-semester homestay with a Japanese host family.
The JSP website renewal involved a number of different tasks:
- Visual identity design development
- Custom icon illustration design
- Creative direction, custom photo shoot, and video production
- Information architecture, wireframe design, and interface design (UI/UX)
- Website development with responsive web design and CMS integration
- Client workshop for best-practice, SEO-friendly content input
- Copywriting brush-up and content strategy
- Creating design assets for social media presence
The Challenge
The main objective was to attract more foreign students to the JSP program by showcasing its unique features, including an authentic homestay at a host family. To stand out in a competitive field, the design had to be both original and compelling. Most importantly, an effective way to communicate and appeal to the young target group had to be found. The communication and design needed to be friendly, approachable, and playful, but at the same time still trustworthy and reliable. A “too” perfect, corporate, or cold design and tone of voice would fall flat with the target users. Finally, the website had to convey a sense of a rich cultural experience in Japan.
Our Approach
From our perspective, the best way to reach the young student audience was by accessible design and copy. The bottom line was showing what an exiting and varied experience JSP students have in Japan. We emphasized this through fun photographs, engaging video loops, and a promotional video placing actual JSP students front and center.
We followed through with this strategy by using a colorful and engaging layout grid design on the homepage, reminiscent of the image tiles on an Instagram profile feed, to appeal to the young social-media immersed users. The copywriting was also reworked to resonate better with the key demographic.
Visual Discovery Workshop
To kick off the project, we arranged a visual discovery session with the client. Discussion about other example brands and websites as well as a branding card exercise greatly helped us define the direction for the new visual identity. To follow up, we presented JSP staff with 4-5 “moodboard” concepts that further narrowed down the visual direction.
Visual Identity Design Development
To finalize the identity, we drafted multiple logos and even conducted a staff and student survey at TIU to maximize feedback. The resulting logo was derived from a open-book shape to give it an educational feel, complemented by iconic Japanese elements such as Mt Fuji and a rising sun. Another requirement was that the logo had to work well in combination with the main TIU logo and shouldn’t overpower its surroundings.
Custom Icon illustration Design
We created custom icons for use on key website sections and pages, matching the line-based style of the identity design and logo.
Photo Shoot &
Promotional Video Production
The project also entailed producing custom photos and a promotional video. Starting with storyboarding and extensive schedule planning, we organized 4 days of photo and video shoots on various locations throughout Tokyo. This also involved managing 3 volunteer JSP students.
The video narrative was based on the daily schedule of a fictitious JSP exchange student: Waking up at the host family’s house, walking to the station, taking trains, meeting classmates, and taking lesson and workshops, as well as a enjoying a fun afternoon out in Shibuya, central Tokyo, with other students.
The video covers a variety of settings, from an actual host family house to a traditional Japanese town, the TIU campus with a picnic lunch, modern Tokyo, and a scene showing the city lit up at night. The narrative was bookended between shots of the student’s diary: First packing the journal into his backpack and closing with the student’s collection of experiences visualized as Polaroid-style instant photos in his diary.
Information Architecture,
Wireframe Design &
Interface Design (UI/UX)
The website development started with simple wireframe templates to create a template-by-template inventory of page elements. We also created mockups of the navigation interactions on desktop, tablet, and mobile screen sizes. The final interface (UI) design was based on the wireframes and the visual identity.
A core inspiration for the homepage and blog page was the block-like structure of an Instagram profile page feed.
Website Development &
CMS Integration
The website was integrated as HTML5-responsive, mobile-friendly design into a WordPress CMS (Content Management System). Numerous custom features allow JSP staff to control various content blocks on the homepage and throughout the site, such as testimonial blocks, featured blog posts or recommended events.
In addition, the website has a feature for displaying upcoming university events, including date, time, location maps, and other details.
Finally, good care was taken during cross-browser and cross-device testing of the website.
Best Practice &
SEO-Friendly Content Input
We organized a workshop with JSP staff to train them in best practice and SEO-friendly content input into the WordPress system, and also compiled a manual for future reference. In addition to inputting regular content, the website functionality allows the client to create toggle sections, embeddable maps, and Google forms or flexible table elements.
Content Strategy &
Copywriting Brush-Up
We also executed a copywriting brush-up: all content was reviewed and rewritten where needed to tailor the tone of voice and make it consistent throughout the website.
Social Media Integration
Apart from setting up the best possible social media integration, we also helped to align the visual style of all of the social media profiles with optimized logo and header banner images, including for Facebook, Twitter, Instagram, and YouTube.
Print Collateral Design
As an addition to the core project above we created a poster and pamphlet for further promotion efforts of the Japan Studies Program abroad. We creates an eye-catching cityscape with illustrations of iconic Japanese objects integrated in a layout grid of photos.
