Bilingual Website for Japanese Hotel Chain

Market Research & Visual Alignment

We started out by researching competitors and searching for other websites with inspiring designs then got together and shared our findings, pointing out what we liked, disliked, and why. This helped prepare us for aligning on the visual direction and building on the pre-existing wireframes.

Design

The client provided wireframes and assets (fonts, images, etc) for 4 pages of the mobile version. The site needed about 10 to 15 pages in total. I referenced their mobile wireframes while building preliminary wireframes for 14 pages. Those wireframes turned into mockups and were revised a total of 62 times before moving on to development.

We regularly met to review the designs in a group of about 7 people, discussing both the visuals and overall user experience. Once all the design mockups were approved, the development of the home page began.

Development

I started developing the home page, and section by section matched the live site with the mockups. I used REM units for responsive typography and spacing, and adjusted the media queries to make sure that the experience would be similar across different screen sizes. The other pages followed suit.

Booking Engine

I built a simple booking bar that directs to the hotels' booking engine and is powered by Webflow interactions.

Interactive Community Features

We also built interactive features for saving a list of your favorite venues on the Community pages.

Bilingual Functionality

We achieved bilingual functionality using Weglot and added custom code to adjust text styling based on the active language. The dedicated text styling for the Japanese version resolved issues where Japanese text would get cut off mid-word.

Knowledge Base & Training

I created a knowledge base with training videos and written content to help my client maintain and update the website on their own.

Results

Wayfarer Hotels successfully launched their new website in January 2022, and their team has been able to manage and update the website with new content with minimal guidance.