Tripla is a Japanese B2B PMS (Property management software) that allows hotel managers to do tasks such as managing reservations, tracking occupancy, generating invoices and receipts, and maintaining financial records.
Tripla's booking platform allows guests to search in two categories: rooms and packages. When a guest is looking for a room, each of them would display a list of packages included in each room, and vice versa. The issue here was that both categories often had a very long and detailed description.
While in Western countries product descriptions tend to be short and concise, in Japan it tends to be long and detailed. We can just compare how the most most popular marketplaces in Japan (Rakuten) and abroad (Amazon) show the same product.
Although this way of presenting the information is a good cultural fit to what Japanese customers are used to, I had two hypothesis:
1. This was making the search result very difficult to compare between options.
2. The long scrolling needed meant the bottom options would never be seen.
To validate my hypothesis we partnered with one of our customers to run a test with Hotjar. The hotel had listed a total of 14 plans, making the page very long. The test was run for 1 month and reached over 1000 users. The findings were as expected. Most users were reaching up to the third room, but beyond that the number of users reaching further down quickly started to fall.
We also did a survey to 10 people in Tokyo, where we gave them the task to book a room for 2 people in a hotel website that uses Tripla’s software. Once they completed the task we asked a few questions that were later added to a table.
To present different users scenarios and design alternatives, I used wireframes and prototypes to instigate conversations and facilitate feedback from the stakeholders.
This enabled me to pinpoint critical areas of concern, facilitating the discovery of a common ground where we could all agree and shape the product concept.
I needed to find a middle point between a high quantity of information (Japanese UI) and a minimal approach (Western UI). A balance where Japanese users would feel comfortable to navigate between rooms without feeling a lack of information and consequently mistrusting it and leaving mid-journey.
I presented to the team various design alternatives to tackle this issue. After several rounds of iterations we agreed on a final design (image on the right). Some of the biggest iterations were:
1. 🟢 Moved the package information section next to the images.
2. 🔴 Hid descriptions behind a modal.
3. 🔵 Replaced adults and children icons by words.
4. 🟠 Removed the image carrousel under room section.
As a result, the amount of information on-screen was drastically reduced, making it easier for users to compare between packages/rooms and reducing the scrolling needed to reach the furthest down options.
https://tripla.io/portfolio-item/ichinobou/
https://tripla.io/portfolio-item/sarasahotel/
https://tripla.io/portfolio-item/galleriamidobaru/
Although not tested with quantitative methods given we could not AB test our product on a customers site, the general response of our customers was positive in the months after the release and reservation rate across hotels kept increasing month by month, except some valleys when tight border controls and social distancing efforts amid the coronavirus pandemic limited nonessential travel.
Knowing the nature of the project scale, there are some lessons that I learned through the whole designing experience.
Despite the nature of the Japanese web design to display a fair amount of information in a reduced space and it’s general non-minimalistic approach, a global-style-UI was necessary given most users wouldn’t reach beyond half of the results page because of the high volume of information.
