Ee Venn Soh - Beokinawa-pr.jp ⟶

beokinawa-pr.jp/life

I am the lead motion designer where I am in charged in crafting the moving parts for the site. The rest of the discovery, conceptual, visual, film and production work are done by other awesome team members.

We are producing a large tourism campaign for Okinawa where we invite people from around the globe who are looking to live a better life. They are shown the Okinawan way of life in the hope to free their day-to-day stress and learn the secret to longevity. This journey of self-discovery will feature all the unique aspects the islands have to offer, from its beautiful sea to its warm-hearted people.

A series of 3 mini-documentary style videos for the campaign are produced to establish brand recognition and brand image for Okinawa, as well as to improve inbound travel interest (to Okinawa).

Trailer

Storyboard

Wireframes

Website structure

An overview of the user journey throughout the website.

Home

The landing page after the loader, the user is invited to dive into the video with a series of provocative question.

Video

The video will play full screen with the navigation overlay on the left hand side. On pause, the user is able to interact with different feature hotspots to find more information.

Video hotspots

Map view

This view provides user with an overview of all available places of interest, and may include additional places not covered in the videos. They will also be able to filter by activity types.

About Okinawa

This content page will contain information on the campaign story, provide an overview of Okinawa and access routes from major cities as well as how to get around in Okinawa.

Animation

I mainly serve as the bridge between the visual designer and the developer on this project where I lead the design team to identify areas of opportunities for delightful moments and working closely with the developer to make sure the design thinking is translated seamlessly.

Logo animation

The 3 main experiences for Okinawa are "People & Culture", "Health & Beauty" and "Wellbeing & Nature". We animated the intricate details within the alphabet "O" in Okinawa to reflect that.

Intro animation

Okinawa prefecture comprises of more than 150 islands. It's known for its tropical climate, broad beaches and coral reefs. It has long been a popular destination for great diving spots and snorkeling activities. With water activities being one of the main things to do at Okinawa, we introduced the website with undulated wave forms that slowly reveal the content of the site followed by background music and imagery that will help uplift the Okinawa experience.

Micro-interactions

Home

Starting with a 0 opacity blurry background, the background transition into view with the intro copy animating as well in a randomized order (random y position, random blurred characters). All the call to actions on the screens have a similar transition where it animates off the boundary.

Video

As the video plays (imagine there is a video playing), interesting moments in the form of pins will get dropped on to the timeline. I created the animation with a slight bounce. User will be able to click on the pin to jump back to particular moment within the video. Once reaches the end frame, we introduce the next set of call to actions into view with an elastic easing behavior.

Map

The large island gets transitioned into view followed with a staggered animation of the smaller islands. Once the background and the islands are on screen, we plonk the map pins on to the map. We also added a subtle touch to the background where it scrolls to the right indefinitely.

Process

I created a prototype using Framer.js and GSAP. All the motion variables such as duration and easing were defined at a global scope for ease of change and maintain. Instead of creating interaction specs or a motion brief, I sat next to the developer and walked him through the code and the design thinking behind.

Film

For this campaign, we handpicked 3 different groups of people who are living and working in a fast paced environment and flew each of them to Okinawa. For the time while they were there, they were given the first hand opportunity to truly experience the Okinawa's lifestyle.

Talent brief