Blibli Travel — Redesigning hotel booking experience
Blibli Travel — Redesigning hotel booking experience
We redesign our outdated travel booking experience, starting from hotel booking experience. My responsibility was to come up with the final layout, create a prototype for user testing, and developer handoff. Apart from our design team, which has a dedicated UX designer, copywriter, and UX engineer, we worked with the Content and Design Library team. We worked with them to make this experience as a whole.
We redesign our outdated travel booking experience, starting from hotel booking experience. My responsibility was to come up with the final layout, create a prototype for user testing, and developer handoff. Apart from our design team, which has a dedicated UX designer, copywriter, and UX engineer, we worked with the Content and Design Library team. We worked with them to make this experience as a whole.
Years
Years
2021
2021
My role
My role
UI designer
UI designer
Context
Context
Travel category is Blibli’s one of the main sources of revenue. Giving the best and competitive prices with added promo for their B2B and B2C customers. In 2020, we've integrated with another partner database to provide the best solution for our customers' travel needs.
Travel category is Blibli’s one of the main sources of revenue. Giving the best and competitive prices with added promo for their B2B and B2C customers. In 2020, we've integrated with another partner database to provide the best solution for our customers' travel needs.
We, the UX design team, proposed to improve user experience to the product manager and got approved. We do it by revamping the old layout's look and feel and upgrading to the latest internal design library. To understand what the user needs, we used past research reports and conducted a new qualitative survey one during this process. We also need to follow the Safe Check and CHSE certification programs run by the government. Any hospitality businesses with Safe Check or CHSE certification need to be visible to our users.
We, the UX design team, proposed to improve user experience to the product manager and got approved. We do it by revamping the old layout's look and feel and upgrading to the latest internal design library. To understand what the user needs, we used past research reports and conducted a new qualitative survey one during this process. We also need to follow the Safe Check and CHSE certification programs run by the government. Any hospitality businesses with Safe Check or CHSE certification need to be visible to our users.
Previous design of hotel detail page.
Updated design of hotel detail page, interaction from listing page.
Finding on past research
Finding on past research
There were prominent feedbacks on hotel card listings in search results that need to be tested in usability testing. Small hotel images failed to impress users who base their decisions on location appeal. We also rearrange information hierarchy based on user feedback and user heatmap on hotel detail page.
There were prominent feedbacks on hotel card listings in search results that need to be tested in usability testing. Small hotel images failed to impress users who base their decisions on location appeal. We also rearrange information hierarchy based on user feedback and user heatmap on hotel detail page.
My main goal was to update the old Design Library to the latest version. I also had to make sure it matched the look of other parts of the Blibli platform, for example, retail or digital. The final redesign aimed to keep it familiar for existing users and easy for new potential customers. We've found that existing and potential users love to compare prices on many travel websites.
My main goal was to update the old Design Library to the latest version. I also had to make sure it matched the look of other parts of the Blibli platform, for example, retail or digital. The final redesign aimed to keep it familiar for existing users and easy for new potential customers. We've found that existing and potential users love to compare prices on many travel websites.
Old homepage.
Redesign homepage.
Old search result.
Redesign search result.
A larger image on search results
A larger image on search results
First, I try out experimenting with a new product card on hotel search result. Most commercial landscape or interior photos were in landscape format. I did several sizing adjustments and ran a few tests with real content. Landscape orientation is much preferred over portrait after internal user testing.
First, I try out experimenting with a new product card on hotel search result. Most commercial landscape or interior photos were in landscape format. I did several sizing adjustments and ran a few tests with real content. Landscape orientation is much preferred over portrait after internal user testing.
Room listing card got the same treatment, an extra interaction to swipe on the room listing image to see more. Based on research, users do look for specific things in the photo to decide.
Room listing card got the same treatment, an extra interaction to swipe on the room listing image to see more. Based on research, users do look for specific things in the photo to decide.
The main change in the information architecture was moving the price. It went from the bottom left to the bottom right on the search results. Based on research, hotel price was the first factor when users choose to check out more details. This design choice also reduced the product card height so it will show more results on a small mobile screen.
The main change in the information architecture was moving the price. It went from the bottom left to the bottom right on the search results. Based on research, hotel price was the first factor when users choose to check out more details. This design choice also reduced the product card height so it will show more results on a small mobile screen.
The room listing card kept the price on the left to allow for easier reading. When you align everything to the left, it also becomes easier to compare similar rooms with different amenities.
The room listing card kept the price on the left to allow for easier reading. When you align everything to the left, it also becomes easier to compare similar rooms with different amenities.
Redesign hotel listing card.
Redesign room listing card.
Visual decluttering for easier navigation
Visual decluttering for easier navigation
We also added quick access to our diverse range of travel products, such as flights, trains, and tours. You can find them right on the travel homepage, especially it was missing on mobile. The updated navigation is much more robust whenever we have the need to add more categories to our travel selection.
We also added quick access to our diverse range of travel products, such as flights, trains, and tours. You can find them right on the travel homepage, especially it was missing on mobile. The updated navigation is much more robust whenever we have the need to add more categories to our travel selection.
Key colours like Blibli's blue and orange used to focus users on next actions. For example, changing the Search button to secondary action when a user is already in search result and hotel detail page.
Key colours like Blibli's blue and orange used to focus users on next actions. For example, changing the Search button to secondary action when a user is already in search result and hotel detail page.
Hotel detail desktop layout improved based on user feedback. One of the changes is removing the sidebar and placing the review section above the room selection to help users make their decisions. It was also been a much easier reading experience, especially when users are skimming the information.
Hotel detail desktop layout improved based on user feedback. One of the changes is removing the sidebar and placing the review section above the room selection to help users make their decisions. It was also been a much easier reading experience, especially when users are skimming the information.
Updated hotel navigation (bottom) compared to previous design (top).
Previous homepage navigation on mobile.
Updated homepage navigation on mobile.
Learning
Learning
This was my first major project that I have collaborated with a cross-functional team. It took a couple of months of design exploration until deliverable before moving to development. I learned a valuable lesson to start a discussion with people affected by this change, especially with the internal team. For instance, I should have asked the content and product teams about incorporating promo tags into our design. Our user research showed that promo banners are important to users and they're looking at promo tags for relevancy.
This was my first major project that I have collaborated with a cross-functional team. It took a couple of months of design exploration until deliverable before moving to development. I learned a valuable lesson to start a discussion with people affected by this change, especially with the internal team. For instance, I should have asked the content and product teams about incorporating promo tags into our design. Our user research showed that promo banners are important to users and they're looking at promo tags for relevancy.
Let's work together.
If you think I'd be a good fit for your team or project, feel free to reach out.
© 2026 Adrianus Hariesta
Let's work together.
If you think I'd be a good fit for your team or project, feel free to reach out.
© 2026 Adrianus Hariesta
Let's work together.
If you think I'd be a good fit for your team or project, feel free to reach out.
© 2026 Adrianus Hariesta
Let's work together.
If you think I'd be a good fit for your team or project, feel free to reach out.
© 2026 Adrianus Hariesta