[AYANA BALI] We’ve rounded up the content we obsessed over

We ended up with a video overflowing with NDC’s Taiki Fukao’s quiet sensibility. Please do watch it.

AYANA BALI contains four hotels of differing character. You can spend your time in all sorts of situations — solo, with friends, with family. Personally I’d recommend the AYANA RESORT hotel first. Incidentally, wherever you stay, you can use all 14 pools across AYANA BALI. Recommended.

The four hotels are templated to a degree, but by tightly condensing each one’s best points through photos and words, we were mindful to properly draw out their individuality.

The Rock Bar was a bar about 100 times the scale I’d imagined beforehand. Spending time at a bar strung along a 270-meter cliff is exceptional — without doubt a time everyone should experience once in their life.

Translating the sensations felt on the skin straight onto the page. Temperature, humidity, sound, smell, light — after returning home, I did the composition, layout, words, and visual selection for all of that by taking a trip inside my own head.

The grounds are the size of 20 Tokyo Domes, with many facilities including restaurants. So we went and made a resort map UI. We hope it becomes something valued on-site.

It’s so big you can’t tell what’s where — you can’t even tell how big it is to begin with. We built it aiming for “see it all at a glance, understand it all!” — so you can grasp and plan even before you go, and use it on-site too.

This one’s a beast. Plotting based on latitude and longitude sent the difficulty soaring. If I didn’t love maps, I’d have thrown in the towel… Also, quietly, we use AWS’s country-of-origin detection so the location-permission alert appears only in Indonesia.

The map illustration — I actually drew it all in Figma. A little unusual, but since you can adjust efficiently when managing colors, organizing parts, and designing UI and all, it was quite easy to work with.

When the grounds are this large, with so many restaurants, facilities, and activities, you tend to agonize over how to spend your time. So we prepared several two-night model courses. It’s a measure that benefits both the guest and the provider, connecting to ease of booking and to customer acquisition.

With each one’s “AYANA time” as the concept, we designed it as a feature to help travelers plan — find a course that suits you, or pick and choose various places to make your own timetable.

The content volume was huge to begin with, and then four languages. 800 pages! This CMS is the unsung hero of a project that would have been nowhere near completion without it. A CMS that makes the most of everything good about Google Sheets.

Because it’s a facility travelers come to from all over the world, it’s a quietly impressive behind-the-scenes. Not simple machine translation, but efficient from-scratch translation and text control across languages. Not only Japanese — for every language we adjusted again and again by eye while using this sheet.

“The strongest CMS is the spreadsheet!” said Okabe in a bullish moment. Once I started building and using it, it was one difficulty after another — how many times did I go pale… But for a view where the four languages (Japanese, English, Chinese, Korean) sit side by side, I really can’t imagine anything but a spreadsheet.

I want to pay the utmost respect to the client’s bold decision to completely reserve the Rock Bar using 230 extras, and to the team that persuaded them. To make something good, this kind of cooperative setup is essential. A shoot with 230 people — it really is unthinkable. 😂

We control almost all of the photos and video you see. Shooting with hundreds of extras at the Rock Bar while it was open, arranging a helicopter for aerial shots of the whole grounds, deploying models and people — all made possible with the client’s cooperation.

To offer hospitality to guests from around the world, communication has to be careful too. So we poured energy into the design in all four languages — Japanese, English, Chinese, and Korean.

Precisely because it’s a format, everything is held to the same standard — actually a very important point in building a multilingual site. Through fine tuning by translators, inputters, and implementers, we finished it so it feels good to view in any language.

To realize experience design on a website, it starts with first knowing the client, and beyond that, knowing the user. Having thought that through, you assemble who you show what to, and in what order, and how you make them feel it. Precisely because it’s a resort site, these perspectives were very important.

For both photos and text, try putting in — and writing — everything close to what will actually go in. It’s important to verify, at the wireframe stage, whether what you want to convey actually gets across.

This was the first project I designed in Figma. Steeling myself and studying as I went, chased by deadlines — but in the end, helped by the plugin too, I can’t go back to Photoshop now.

Honestly, if this plugin hadn’t been born, I’d have been in tears (laughs). Where you’d normally replace 1,200 images one by one, it’s a savior of a plugin that replaces them all at once with a single button. When exporting, too, its many handy features saved me.