IN FOCUS Inc.

kaonavi
Town

The future town is coming

Corporate Communications and Best Visual Design - Function / Honoree

IN FOCUS Inc.

Corporate Communications and Best Visual Design - Function

Honoree

We created a small world using 3DCG, which resulted in an experience of strolling through the city. Atsushi Kaneishi, Executive Officer / Web Director

Watch

Q: Can you briefly describe your project and the concept behind it?

A: "kaonavi Town" is a website that allows you to explore the "future city where everyone can excel by utilizing their individuality," as envisioned by kaonavi. In this town, various technologies are implemented in the proper manner, and their combined effects create a lively and bustling city. The town and its working people, who foster diverse collaborations while embracing individuality, have been recreated in 3D computer graphics.

Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?

A: This is the first website for our company where we have accomplished the creation of 3D models and their online representation by in-house staff. Since we were starting from a point where we had almost no experience with Blender, there were various difficulties to overcome. However, by learning together, we managed to work through the process up to adding animation and camera work.

Q: What were some of your biggest learning and takeaways from this project?

A: By going through the entire process, we acquired knowledge of 3DCG production. Additionally, by integrating 3D, Web, and movie elements seamlessly, we were able to elevate the presentation of web content to create an immersive experience.

Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?

A: We achieved a seamless experience with Nuxt.js's asynchronous transition. hls.js and CDN allowed for self-hosted video streaming with no delays and high-resolution playback. Figma managed everything from design to feedback. Blender handled 3D modeling and rendering. AfterEffects composited 2D motion which synced with Blender's camera data and polished videos in post-production. Asset optimization was achieved through webp and AVIF.

Q: How did the final product meet or exceed your expectations? What results did you see?

A: Initially, we planned to create a simpler 3D town due to technical concerns. However, we ultimately managed to depict a more vibrant city and its life by showcasing a variety of buildings and people. We are honored that the project received high praise from both clients and audiences, as well as being recognized by the Webby Awards.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: The impact of AI and digital tools on creativity is bound to be significant, and yet I am excited about the new culture that will continue to emerge from their development. Everywhere, cutting-edge experiences that touch people's hearts will be invented. By experiencing and absorbing them, we can gain valuable insights to enrich the world of UI/UX that we create.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: The theme of this project was "depicting the future city and people who work there," so it was not difficult to achieve a balance between creating a more immersive world and effectively conveying the message. We always strive to be conscious of striking a balance between production values and user experience that best serves the client's goals.

Q: What did your initial moodboard, wireframe, or prototype look like? How did those ideas change throughout the design process?

A: At first, we had planned to create a simpler 3D world using Three.js to reproduce 3D on the browser. However, as the number and complexity of the models increased, we changed our approach. We exported each scene as a video and displayed them seamlessly on the browser.