Wayfarer Hotels Bilingual Website

Wayfarer Hotels is a growing hotel chain that currently has 2 locations in Japan. They contacted me to design and develop their new website and were aiming to build a website that would give visitors a sense of sophistication and professionalism.

I designed their website in Figma and developed it in Webflow. We then set up interactive features like saving local business listings to your own list and enabled bilingual functionality in English and Japanese.

Market Research & Visual Alignment

Each of us researched competitors and searched for other websites with inspiring designs then got together and shared our findings, pointing out what we liked and 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.

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.