Tripvisto Case Study



Tripvisto was a series A travel-related startup based in Indonesia. Unlike Booking.com or Expedia, it did not offer hotel booking or airplane ticket as its commodities. Instead, it sold travel packages and tickets direct from travel providers, such as attraction, day tours, and railway tickets, as its focus.

It was a year old startup when I first joined in January 2016. I functioned as their UX specialist, where I do all of the research, heading redesign, implementation, setting up their analytics, as well as working closely with the CEO, CTO, marketing team, and customer service as their co-Product Owner (the other PO being the CTO himself). I stayed in the company for 6 months, in which time I had managed to launch the new website, and help set their target audience.

Tripvisto closed down in July 2017, due to financial reason.

THE PROBLEM


Tripvisto had around 1000 users visited their website every week. However, they had over 95% bounce rate and 0% conversion for the entire year that they had set their website up. Most of their customers found them from paid Google ads, and then proceed to call customer service to find more info. These are expensive to maintain. Not only Tripvisto needed to keep constantly pay Google to get customers, they were also forced to keep adding more heads for customer service.

I also hypothesized that these bounced users were mistaking our service to be that of hotel or airline bookings. The name of our company does bear some resemblance to much larger companies that did hotels and airlines booking, namely Traveloka and Trivago. These companies were also doing large scale advertising through TVs and banners at the same time that we launched. 

PREPARATION


Methods

As I wasn’t familiar with travel business, and there weren’t any research or anybody in the company that could tell me about the behaviour or motivation of our users, or even who they were, I decided to start the project by doing several studies

  1. Surveys: several surveys were launched to understand their attitude and behaviour towards travel; how often they went for vacation, with whom did they usually went with, how did they decided where to go, etc. The problem lays on the method of spreading said surveys; with very limited user database, I decided to spread it through channels that are known to be popular with the intended target audience, as well as through friends and family of Tripvisto employees.

  2. Customer Service (CS) Interview: I found that while there are a lot of phone calls merely inquiries without purchase, the group of people who did end up purchasing our products mainly came from a group of friends, females, 20-30 years old. There were also inquiries on short trips (weekend trips), and honeymoon destinations, although on a smaller volume.

  3. Competitive analysis: by comparing the websites of larger competitors such as Getyourguide, as well as companies that sell travel related products such as Airbnb. I wanted to learn what is the common practice of building such a website, why, and can it be applied to Tripvisto benefit


Learnings

  1. Users were not aware of what Tripvisto was offering. This I knew from Google Analytics, with keywords that our visitor use being airplane to… or [City name] hotel. I felt that this is crucial.

  2. For our target audience, users decided on where to go from social media channel, mainly Path and Instagram, and word of mouth from friends or family.

  3. Most of the users only knew very roughly where do they want to go (ex: I wanted to go to Bali, or I wanted to visit France). They prefer to see and compare different options from different sources before purchasing one.

  4. Imagery seemed to be very important factors for decision making; users decided their destination through Instagram, itself an image-based social media. Our competitive analysis also yielded similar conclusion, with images playing a large factor in decision making. By this time, I also made a mental note to make A/B testing for what kind of images work best on our users, once we had set up the website properly.

  5. Titles that are useful for users generally were very descriptive; multi-day excursion, for example, had a title that went like this: 3D1N Bangkok - Pattaya.



DESIGN PROCESS


Through the studies, there were several points that I thought were important for Tripvisto’s website to succeed. It’s also important to note that the aim of the first launch was to have the website ready as fast as possible and iterate from there. 

User Flow

I started the design process by drawing on user flow. At first, I did it by combining the entire flow, from new users to returning users and everything in between. But it was physically massive and hard to read. So I cut it to bite size pieces. 

Creating user flows helped me fleshed out how the entire website will work, and later on, I also learn that it helps the engineers in figuring out what kind of database we should build.  This user flow also helped me on wireframe process as a sort of work management guide; which pages are left to work on and how far along are we in the process.


A section of Tripvisto user flow

The biggest challenge with this project, there was no way for us to have a real-time update on how many spots left on a travel package. At the time, we did not yet have a platform for our travel providers. The only thing, regarding timing, that we knew for certain, is that some travel package could only be done within a certain time period each year. 

For example, Tour Company C has a travel package to see cherry blossoms in Japan. It could only happen between March and April each year (otherwise, there’re no flowers to see 📷 ) However, since Tour Company C also have other channels to sell their product, and no place to update their products on our channel (unless they call us each time they sell something), we don’t know for sure how many spots left for any particular tour. 

So the voucher system was developed to manage this. Users bought a voucher, then they have to call us to confirm for a spot after mentioning their voucher code. In the meantime, this will buy us time to develop the all-important vendor hub. 

Wireframe

There was a debate on whether we should build a responsive website, build for an optimized mobile site, or optimized for the desktop-based website. For some other company, it felt like a no-brainer to choose a responsive website. However, a responsive website took more time to design and develop compare to non-responsive, and we need to launch it as fast as possible so we can start selling items (remember, this website has never sold an item before).

So in the spirit of moving fast, as well backed by analytics that our site was primarily visited from desktop at around 9 AM and 1 PM (hypothesis: these are workers getting ready for their job and /or spending their lunch time), I decided to optimized for website, with plan for mobile site later on. Below are some selected pages from the wireframe.



Homecsreen wireframe

As I know that users were not aware of what did Tripvisto offered, it is then become important to provide a space up top that explain Tripvisto’s product in a short sentence.


This homepage was also catering to two types of people that were coming to Tripvisto; the people who already know where did they wanted to go, and the people who are looking for inspirations. In this case, search bar caters for the first type, while editorial Pick, for example, was for the latter.


If you click on travel ideas fresh from our kitchen section, they will direct you to our blog. There were two reasons I suggested a blog section on our website: to inform and inspire our users on a particular travel spot and to crank up our organic visitors' number.


In the design phase itself, I work closely with a junior visual designer to create the look and feel of the entire website. There weren't many changes happening in the design phase in terms of layout. We were mainly concern on creating a visually appealing site, and building component libraries to make future development easier.


Changes actually happened once we have launched the website. From the analytics, we can see that users weren’t visiting deals of the week as much as we think they will. Instead, they were going to editorial pick section more. One of the hypotheses that I made, was that because we have a lot of people exploring for options. Deals of the week is a list of SKUs that were currently on sale, while the editorial week is a list of group of items that are currently on trend. 


So as you can see below, I decided to bring the editorial pick up, and create a customized banner for each that is more interesting compared to just having your standard web fonts across an image.


We also changed everything from English to Indonesian. Majority of people in Indonesia did not speak English anyway, so it did not make sense to have a full pledge English website to serve them. This was actually one of my largest challenges as my Indonesian was a bit rusty at the time. I ended up collaborating with my colleague a lot to make sure that I was writing something that made sense and enticing instead of literal translation.




Desktop screenshot

List Page


List page functioned as the place where users can see all available tours for that region. 

For users that came here looking for inspiration, I provide a snippet of interesting information about their place of choice on the top of the page. This also serves as a page title for other users, to make sure that they know where they were at all time. 



I believe that a good flow should form a circle. What I mean is that users should not be made hanging in any kind of situation, without an actionable item, or resolutions. It creates unnecessary frustrations for users when we could have made their life easier by doing something that might not even be hard to do.


In that spirit, every single time users found that their trip of choice is unavailable, we will then provide them with similar trips in the same area that they might be interested in. 


Detail Page


There were two types of items that Tripvisto had: one with an itinerary such as day tour and one without itinerary such as railway tickets. As shown above, the only difference between itineraries and non-itineraries items is the planned activity located under images.


When speaking with customer service, I asked them for a list of questions that customer usually inquired from them when asking for an item. There was some variety, depending on what is the inquired item. For example, a customer usually asked for the itinerary, duration, and what was included and excluded from a trip, be it a day tour or multiple days. For items like railway ticket, the questions would be more on where can I used the ticket, how to use the ticket, and how long does the ticket last for. That’s the basis of creating key points section so that users were able to quickly identify important information up front.


I debated on locating the images above itinerary, or below it. The pros of putting it up front are that users can see it right away, and this might be an important feature to rope in users. On the other hand, it also caused the itinerary, one of the most asked questions from the phone, to be seen later. Ideally, this is something that we should be able to A/B test on. However, since that wasn’t possible when we first launch, I decided to put the image up front with the idea that users might need a little bit more roping in before being interested in the itinerary.


Payment




Unlike North America, for example, payment method in Indonesia is fragmented by low penetration of credit card, and the competitions between available financial institution to create their own payment method. On the other hand, it also means there is a way to pay for everyone :D

When a user selected a payment method, they will be shown related form below it. Because some payment methods have extra steps or other quirks specific to them, I also prepare a space under the payment method name to explain these quirks to users.

For example, bank transfers are something that we have to check manually. And users might use someone else’s bank account (spouses’ or parents’ for example) to pay for the items, so cross-checking via account name is not reliable. So we add a random amount of money to the payment (Rp100 and below, or less than 1 cent). As a comparison of how much money that is in Indonesia, a can of diet coke in Indonesia cost Rp10,000. I need the users understand why are their purchase costs differently if they pay with bank account vs with other payment methods. So underneath Bank Transfer, I wrote We will add IDRx to differentiate your transaction to others.

Learnings and Aftermath


Tripvisto was the first startup company that I had ever joined. Previous to that, I was working in mainly agency setting. So it was a breath of fresh air for me when I figured out that I could do whatever I want to ensure the best possible outcome for my product.

One of the most profound learnings that I got was to involved the developers early on, possibly after I created the very first draft of the user flow. In all my previous work, the engineers were usually outsourced, and I as designer usually handed over my work to the UI and have little to none interaction with devs. Should I involved engineers much earlier, I would have come to the final design much faster, and probably also with a more powerful website. 

I also learned a lot about the behaviour of people in Indonesia. When I first started working, I had several assumptions about our users, for example, that they maybe travel once a year for the period of 2 weeks during Ramadhan (Indonesia is a predominantly Muslim country), mainly looking for an overseas trip, and our target customer will probably be businesses. So I was pleasantly surprised to learn that Indonesians are interested to explore their own country, they travel quite often although in shorter durations (2-3 days at a time, usually during weekends), and there are quite a lot of individuals looking to go for these trips either alone or with a couple of close friends.