Tripla is a Japanese 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. It has customers in Japan, Taiwan and Korea.
To redesign the room search result page so the user can easily compare different room options.
One of the biggest projects consisted of redesigning the existing UI of the user booking platform’s search result. The goal was to adjust better the amount of information displayed in order to reduce the user friction when searching and selecting a room or package.
We used Jira to ensure a clear communication with all the involved stakeholders. We made use of a structure consisting of 7 steps, each describing the current status of the issue. This ensured a consistent communication flow between all stakeholders involved in the process. for confidentiality reason, the content needs to be blurred.
For each new ticket content, I used a customised template in Jira to document the specifications for the developers. This way, the communication flow was optimised for clarity, minimising the chances of misunderstandings. It is composed of two parts:
1. The task background: What are the user pain points, why it needs to be addressed, what others do to solve the same problem and visual evidence of how they do it.
2. To-do list: Here I explain every possible UX scenario and outline every aspect of the UI. To make it even clearer, I’d add and image comparing the current feature vs the new design and a link to the mobile and desktop prototypes in Figma.
"Redlining is just one step of a successful hand off"
To make sure that designs are made according to the specifications, I prepare a red lines document. Although this can be easily checked on Figma, doing this this gives a better overview of the overall measurements.
Tripla’s customers request new features by posting them on an open voting platform. Once the issue is posted, other customers can follow up and vote for it.
When a UX related request from a customer gets highly voted and it matches with a previously written spec that makes part of the product roadmap, then its prioritised and gets pushed to a coming sprint.
As an example, one of our customers did a post requesting to reduce the amount of information displayed on the search result page. This matched with an existing spec and therefore was pushed to the next coming sprint.
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. When a guest is looking for a package, each of them would display a list of rooms included in each package.
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. As there’s no limit for the amount of text that can be input and displayed on the description field, these can become very long and detailed.
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 search result page very long. The test was run for 1 month and reached over 1000 users. The findings were as expected. The scroll heatmap showed that most users were reaching up to the third room, but beyond that the number of users reaching further down quickly started to fall.
To present different users scenarios and design alternatives, I used wireframes and prototypes to instigate conversations and facilitate feedback from the stakeholders. This allowed me to identify key pain points that helped to find a middle point we all could agree and develop the product concept.
As most of my knowledge was based on Western UX, sharing early prototypes helped me to have a conversation and find a middle point between a big quantity of information (Japanese UI) and a minimal approach (Western UI).
A balance where Japanese users could manage to navigate between rooms without feeling they were lacking information and consequently mistrusting it and leaving mid-journey.
Given that the majority of my colleagues outside the product team were Japanese, I was often testing via slack different options in order to get honest feedback from the right audience.
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. 🔴 Hide partially and totally descriptions behind a modal.
2. 🔵 Replace adults and children icons by words.
3. 🟢 Reorganise the package section information layout.
4. 🟠 Remove the image carrousel under room section.
As a result, the amount of information on-screen was drastically reduced. This made it easier for the user to compare the different options offered in each package and the scrolling needed to reach the furthest down options.
https://tripla.io/portfolio-item/sarasahotel/
https://tripla.io/portfolio-item/sarasahotel/
https://tripla.io/portfolio-item/ichinobou/
https://tripla.io/portfolio-item/galleriamidobaru/
https://en.tripla.io/portfolio-item/itsuki-hotels-japan-co-ltd/
Although this case represents just a small part of my time at Tripla, it is the one that has had the most impact. 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 month 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 non-essential travel.
The most challenging part of the project was actually getting the approval to build it. Despite multiple
attempts to showcase the business and usability benefit of it, it was not until customers made multiple requests related to the same issue that the decision to go ahead with it was taken.
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 one screen 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.
