Traveloka
My goal as a UX Researcher is to enhance the user experience of Traveloka by identifying and addressing existing gaps while uncovering key opportunities for design improvements.
About
Traveloka is a Jakarta based SE Asian travel company offering travel
bookings, attraction tickets, rentals, vouchers, and financial services.
Largest online travel app in SE Asia, valued at $3B, and a “unicorn”.
Founded in 2012.
Challenge
How might we improve the user experience of browsing and booking local or overseas tourism activities? What are some gaps in the current user experience that need to be addressed? What would the key opportunities for design be?
Duration: 1 Month
Role: UX Designer
Business Model Canvas VS Desirability Study
Business Model Canvas
I begin by exploring the value proposition, which aims to revolutionize human mobility with technology by offering a search engine to compare airline ticket prices. Simultaneously, customer segments are identified, initially targeting individuals from Indonesia for the domestic market and expanding to global travelers.
Value Proposition:
- To revolutionize human mobility with technology: A search engine to compare the price of airline tickets from various other sites.
- To revolutionize how people travel around the world by utilizing the most cutting-edge technology.
Customer Segments:
- Initially people from Indonesia (domestic market)
- Travelers around the world
Desirability Study
Based on the comprehensive set of 118 product reaction cards distributed among the six interviewees, a desirability study was conducted. Participants were asked to circle their initial impressions after using the Traveloka website.
After collecting the top 5 reactions from the interviews:
- Easy to use (4 votes)
- Undesirable (2 votes)
- Unattractive (2 votes)
- Efficient (2 votes)
- Poor quality (2 votes)
Finally let’s start to compare these reactions with the components of the Business Model Canvas to identify potential areas of alignment or improvement.
Business Model Canvas VS Desirability Study
The result indicates that there is a disconnect between the product and its target audience, requiring re evaluation to align with user needs and improve appeal.
Web Analytics
Analyzing Website Metrics
Traveloka underperforms in all categories compared to its competitors:
- Average Visit Duration (2.38): Traveloka has the lowest average visit duration among its competitors, indicating that visitors spend less time on its website compared to other travel platforms.
- Average Pages Per Visit (3.40): Traveloka also has a lower average pages per visit metric compared to its competitors. Visitors tend to navigate through fewer pages during their visit to Traveloka’s website compared to other travel booking platforms.
- Bounce Rate (55.38%): Traveloka’s bounce rate is higher than its competitors, meaning a higher percentage of visitors leave the site after viewing only one page. This suggests that Traveloka may have higher difficulty in retaining visitors compared to its competitors.
Overall, these metrics indicate that Traveloka faces challenges in engaging and retaining visitors on its platform compared to its competitors in the travel booking industry.
Immersion
During self immersion with the website, I faced issues like QR code linking to mobile app, overlays taking up too much space on hotel page, unclear price updates and missing price breakdown.
Contextual Inquiry
I conducted a contextual inquiry with Zhen Shan to gain deeper insights into his experience and preferences while interacting with the website. Through direct observation and open-ended questioning, I was able to understand Zhen Shan’s workflow, pain points, and unmet needs. This firsthand observation provided valuable context and helped inform our design decisions to better align with Zhen Shan’s expectations and improve overall user satisfaction.
User Interview
Research Goals
- Find out more on user’s preferred online platform for travelling.
- Find out more on user’s flight + hotel booking experiences.
- Test Traveloka website in the last segment of the interview.
Task
Find out how to book a flight + hotel ticket from Singapore to Taipei and a hotel near Taipei City using traveloka.
Usability testing interviews conducted with 5 of our targeted users
- Chi Lam — Travels several times a year.
- Samuel — Visits new destinations multiple times annually.
- David — Embarks on trips several times throughout the year.
- Wayne — Enjoys frequent travel adventures.
- Ashley — Explores various destinations multiple times yearly.
After conducting the interviews, I used the insights gathered to create an affinity diagram. This diagram helped me organize and categorize the feedback and observations into meaningful groups, allowing me to identify common themes and pain points.
User Persona
From there, I synthesized the data to develop a persona named Benjamin Tan — a fictional representation of our target user based on the collective characteristics and needs identified during the interviews. This persona serves as a valuable tool for guiding design decisions and ensuring that our product meets Benjamin’s needs effectively.
User Journey Mapping
User Expectation
- To fulfill his requirement in just an app, plan his route before leaving office
- website should have search and comparison capabilities for flights and hotel
- price should be accurate and reliable
- should have attractive members benefits
Based on the user journey, I prioritize addressing all instances of red or negative experiences encountered by users. By focusing on these pain points, I aim to implement targeted improvements that will enhance the overall user experience and mitigate frustrations throughout the journey.
Pain Point Snapshot
Opportunity 1
How might we make the landing page more appealing and more attractive?
In step 3 of the user pain point snapshot, we zoom in on the specific frustration where users encounter confusion when clicking on the travel addon. Despite already using the website, they are perplexed as to why they are presented with a mobile QR code link to a voucher.
Additionally, in step 5, users happen to see the flight first and click on it.
Opportunity 2
How might we increase the filters options for the facilities to satisfy more users?
In step 12 users express dissatisfaction with the limited filter options available on the hotel page, hindering their ability to refine their search results effectively.
Opportunity 3
How might we improve the usability and utilizes the page layout efficiently?
In step 13, users encounter frustration as the flight booking details occupy the entire page instead of being displayed only at the bottom, disrupting their browsing experience.
In step 14, users express a preference for viewing hotel options on a map as it provides a clearer overview of surrounding prices, indicating dissatisfaction with the current browsing interface.
Opportunity 4
How might we improve the communication of pricing to customers?
In step 17 of the user pain point snapshot, users express frustration over a sudden $100 increase in price without any explanation provided.
Opportunity 5
How might we display the price break down to bring more clarity to the consumers?
In step 21, users are dissatisfied as they feel the platform does not accurately display the actual flight price. Instead, it only presents the price difference, causing confusion and frustration.
Key Insights from affinity Diagram
After analyzing the key insights provided, I take the next step by utilizing a Prioritization Matrix to determine the order of importance for various tasks and initiatives. This strategic approach allows me to effectively allocate resources and focus efforts on addressing the most critical issues identified during the analysis phase.
Then, I use the MoSCoW method to sort requirements into “Must-haves,” “Should-haves,” “Could-haves,” and “Won’t-haves,” based on how urgent and important they are.
Insights and Design Opportunities
After completing the MoSCoW analysis, I transition to converting insights gleaned from user feedback into actionable design opportunities. This involves identifying areas where enhancements or new features can address user needs and pain points effectively, ultimately guiding the design process towards creating a more user-centric product.
Recommendations
Based on this analysis, I delineate 3 design opportunities under recommendations:
- Enhance Landing Page
- Price Breakdown & Price Clarity
- Improve Page Usability
Recommendations #1: Enhance landing page
Search Container Placement
The search container was situated at the bottom of the interface, which may have contributed to decreased user engagement and visibility. This placement might have caused users to overlook the search functionality, leading to suboptimal user interaction and potentially hindering the overall usability of the website.
Before
After
Based on the user interviews, it’s recommended to relocate the search container to the top of the interface and enhance its visibility to improve user interaction.
Eliminate the QR code
Users were mandated to engage in an additional step by scanning a QR code to access the promotional code. This process introduced an extra layer of complexity and potentially hindered user convenience and satisfaction. By requiring users to scan the QR code, the interaction flow may have been interrupted, leading to potential frustration or confusion, particularly for users unfamiliar with QR code scanning procedures.
Before
After
Eliminate the QR code feature and replace it with an actual voucher codes to enhance usability and meet user preferences.
Recommendations #2: Price Clarity
Improving Pricing Breakdown
Users are unable to view separate pricing details for flights and hotels, as well as a lack of visibility into additional breakdowns like taxes, fees, and service charges. This shortfall in information may lead to uncertainty and dissatisfaction during the booking process.
Before
After
To offer a comprehensive breakdown of full flight and hotel prices including taxes, fees and service charge. This detailed breakdown will provide users with reassurance and clarity during their booking process.
Improving Pricing Clarity
Users are encountering a lack of transparency as prices are being updated without any explanation, specifically at the checkout page.
Before
After
It’s advisable to provide a detailed explanation for any price increases observed at the checkout page. This transparency will help users understand the factors influencing pricing decisions, enhancing their trust and satisfaction with the booking process.
Recommendations #3: Improve Page Usability
Implementing Comprehensive Map with Surrounding Hotel Prices
Introduce an overarching map functionality embedded within the hotel page interface. This dynamic map will not only visually represent the geographical context of the selected hotel but will also incorporate the pricing information of neighboring accommodations.
After
By seamlessly integrating this feature, users will gain a holistic understanding of the surrounding area’s pricing landscape, empowering them to make well-informed decisions regarding their accommodation choices.
Decluttering Overlay & Price Placement
The current hotel detail page is burdened by a distracting overlay that detracts from the user experience, while also failing to make full use of the available space. This results in a cluttered appearance and potential frustration for users who seek a more streamlined and efficient browsing experience.
Before
After
The solution involves decluttering the overlay, expanding the container, and fully utilizing the available space. Additionally, displaying the price right above the hotel information can enhance clarity and user experience.
Implementing a “Scroll to Top” Button
The absence of a “Scroll to Top” button, resulting in users facing difficulty when attempting to navigate back to the top of the page. This lack of functionality may cause frustration and impede efficient browsing.
Before
After
Incorporate a “Scroll to Top” button to facilitate easy navigation for users, enabling them to quickly return to the top of the page with minimal effort.
Conclusion
In conclusion, current studies have revealed that users have a poor perception of Traveloka’s website in terms of design and user experience. To address these issues, I recommend the following actions:
- To begin with, the landing page can be improved by incorporating visually appealing design elements, clear messaging, and user friendly navigation. This will help make a positive first impression on users and increase their engagement with the website.
- In addition, price clarity can be improved by providing clear and detailed information on the price breakdown and any updates. This will help users make informed decisions and reduce any confusion or frustration.
- Furthermore, the overall user experience can be enhanced by removing unnecessary elements and simplifying the representation of necessary information. This will make the website easier to navigate and
use.
These changes will result in increased retention rate , reduced bounce rate, and an improved user experience . As a management team, it is imperative to consider these suggestions to stay ahead of the competition and maintain a high level of customer satisfaction.
References
- Think.Design. (n.d.). User Research Company. Retrieved from https://think.design/services/user-research-company/
- SimilarWeb. (n.d.). Traveloka.com Traffic Analytics & Competitive Intelligence. Retrieved from https://www.similarweb.com/website/traveloka.com/
- Apple App Store. (n.d.). Traveloka: Hotel & Flight. Retrieved from https://apps.apple.com/us/app/traveloka-hotel-flight/id898244857
- Google Play Store. (n.d.). Traveloka: Hotel & Flight. Retrieved from https://play.google.com/store/apps/details?id=com.traveloka.android&hl=en_SG&gl=US
- Traveloka Singapore. (n.d.). Facebook Page. Retrieved from https://www.facebook.com/TravelokaSG
- Vizologi. (n.d.). Traveloka Business Model Canvas. Retrieved from https://vizologi.com/business-strategy-canvas/traveloka-business-model-canvas/
- SimilarWeb. (n.d.). Traveloka.com Traffic Overview. Retrieved from https://www.similarweb.com/website/traveloka.com/#overview
- SimilarWeb. (n.d.). Expedia.com Traffic Overview. Retrieved from https://www.similarweb.com/website/expedia.com/#overview
- SimilarWeb. (n.d.). Agoda.com Traffic Analytics & Competitive Intelligence. Retrieved from https://www.similarweb.com/website/agoda.com/#traffic
- SimilarWeb. (n.d.). Booking.com Traffic Overview. Retrieved from https://www.similarweb.com/website/booking.com/#overview
