How Critical Thinking could Generate User’s Point of View in Redesigning Traveloka Application
Background
Like they said, we are millennial! The generation who think that everything could be done digitally such as shopping home essentials, ordering online transportation and/or food, streaming a film, and even purchasing a travel accommodation. As a new comer in UI/UX, I got a research project in my online class (during COVID-19 pandemic we’re required to do online class at home via Zoom) from Purwadhika with case study application Traveloka.
First thing first our instructor, Mas Safrian told us (our group class consists of 3 which include me, Mba Alya, and Mas Rizky) to choose which case that may attract us the most, the cases given will become our final project for this class. After some voting we decided to choose the project on application Traveloka which actually the first objective of this research was “Creating a new feature that can compare everything in all Traveloka features regarding travel essentials”.
Research Plan
In order to develop a business, a company has a group of people who are responsible to create products or services that can meet customer’s expectations, it’s called a research and development team. The same thing occurs for an application, what we see and interface on our screen need to be researched by UX Designer. Of course research does need a plan and after deciding the study case we brainstormed to create the goal of the study which is: ‘Users will find it easier to compare product features on Traveloka and get to choose the product faster until doing the transaction’ and we’re all set with this objective.
Empathy
Planning a research requires a lot of preparation especially while we were doing the user’s interview which becomes one of the most important steps in this project. In order to get the answer that we want, we need to be empathetic. Empathy is more likely when we put ourselves in a user’s shoes, we’ve got to identify the user’s problem while using the app and also what the user may expect for the app to provide. What may attract the user, what kind of word to be delivered to the user that could indicate their feeling, and or how we could make the user get triggered to share their story with us.
Double Diamond Method
I used the Double Diamond Method for the whole design process. Discover started when I identified the problem which might occur in a user’s perspective and using empathy to arrange questions for a user interview, from the user interview I’ve got results which include the user’s pain point, goal, insight, and feedback as the user persona. On the Define process, the results were synthesized by our team which consist of 24 users and put them into Mind Mapping and Priority Metric which could be the answer for our expected new features and another business opportunity.
After I got to know the feature which will be created, the Develop process consists of designing the page and creating prototype interaction for our project. As for the Deliver process, I delivered my design and prototype to the user to get Usability Testing. Design process is not a structured process like the other methods in work, even if we are already on the delivery stage, we could go back to the ‘define’ stage and these processes could be continuous before we got into the right validation to get the solution.
User Interview
Questions
Being empathetic is a way of critical thinking while preparing questions for a user interview. As the research was conducted in a generative and comparative way, my partners and I managed to determine 12 questions for the total of 24 users and each of us had 8 user interviews.
The basic questions were more likely regarding Traveloka and its features, we would like to know the user’s purpose of using Traveloka, their point of views, most used feature, and their frequency of using Traveloka while booking a travel accommodation. Their answer would generate some concern regarding the app and sometimes users could make comparisons between Traveloka and similar booking apps. Users could also mention which feature they certainly liked in another app and expected it could be added on Traveloka (for comparative analysis).
Another questions are about user’s short story telling how they made a booking until payment on Traveloka which could be generated into user/customer’s journey, then users had demonstration how they made the booking and we could see how their reaction while using the app (screen sharing video conference) we could indicate how well user understand the flow and interaction of the app or perhaps they might have any obstacle in it.
Then we asked the user about our new comparison feature for Traveloka and or whether they would recommend the feature or not in the future, of course their reactions were positive and they had found it useful. Moreover, some of the users thought that the filtering feature was already useful if we wanted to make comparisons between products.
Preparation
Due to this pandemic, I could only do user interviews online either using Zoom or voice call because it needs to be documented and submitted. Our targeted users consist of:
- 24 participants (men and women)
- 20–40 years old
- Undergraduate — employee
- Traveloka user who’s ever booked on Traveloka or similar application with minimum once during the past year
- Location: Jakarta
Remote Tools to be used:
- Zoom
- Miro
- Figma
- Google Drive
- Google Sheets & Slides
- Maze
- Trello
User Interview and Data Reporting
Interview process was a long part of this research. Firstly I’ve got to adjust the user’s schedule and most of it was done online. I was not only giving them questions, but I also needed documentation on how they used the application (User used screen sharing on Zoom and demonstrated how they made a booking on Traveloka App till the payment page). That’s two way interaction how researchers got data about user’s behavior while using the app and how they talked to us about their expectation of the apps. Sometimes the questions that are asked could generate them to talk about what’s their pain point, why they were using Traveloka, and how they can give us some insights and feedback to improve Traveloka either the feature on the app and/or business recommendation. Users could reflexively share their story while using the app and all of the interviews could make another point of view about new features in Traveloka.
As a UX designer, reporting data from the interview is also one of the most important processes because you’ve got to consolidate all of the data and generate them to be a great report which will be delivered to the stakeholders. How we managed to choose which word can be understood by all our stakeholders who sometimes they might be unfamiliar about the jargons of the design process.
Google Slides used as a user persona to generate results of each user’s interview, we got their pain points, goals, feedback, insights, and sometimes we can get more ideas in business and design (opportunity area).
How the result of user interview turned different from the first objective
The total of user interviews we had was 24 with different status, jobs, and personalities and they gave us different answers which turned it into different personas and pain points. Back to the goals of study that we wanted to deliver users the information about our ‘new comparison feature’. They got informed well and most of them felt that the new feature could be useful especially for Traveloka users who sometimes tend to use Traveloka because their main reason is price and promotion.
We did mind mapping and synthesizing with Miro and summarized the persona of each user that consists of feedback, insight, how might we question, and comparative research. The summary split into:
- Flow that based on user’s path to use the product/application
- Interface as the display of the application which requires user’s point of view whether the interface is understandable or not
- Business that may become another opportunity to develop the application
- Feature and new feature on the application was like what to improve and another feature that might become user’s need as for travel application, and also what’s need to be improved such as data security and the smoothness
- User’s character and behavior on using an application for every needs
- Comparative research in order to generate what user may need for Traveloka’s improvement, why they were using other apps instead of Traveloka and which feature that could compare Traveloka with others
Again, we chose Dot-Voting until we got to the point from affinity diagram (consolidation of each summary) into which insight to be put on priority metric to assume which one was the most urgent and needed.
Finally we’ve gotten into conclusion that the research result was to redesign Tour & Travel Feature on Traveloka application which include customized budget especially for users, and another complement feature: “Chat with Vendor”.
New Feature
The first actual objective was to create a comparison for each feature turned out to be non priority and unneeded because Traveloka already had a filtering feature which the result already had met user’s expectation. Tour and travel feature was a necessary feature based on our user because they usually use Traveloka while traveling (without travel agency) and or backpacking, they triggered to buy local tour online from their trusted application instead of strolling around the destination city and looking for the local tours available there which might be uncertain, also Traveloka user who are more likely used to travel by themselves prefers the flexibility when they could purchase anytime and anywhere with their smartphone. Besides that, Traveloka has a motto “Enabling Mobility”.
One more sub feature we created was ‘chatting with a vendor’. As we know that the rise of digital platforms in Indonesia is significantly growing every year especially during the COVID-19 pandemic which brings many businesses to transform to digital.
Since the Covid-19 Pandemic, users or consumers tend to use online platforms in any transaction they do, with higher business competition but the same number of users and a point of view that users or customers need things such as security and credibility of a product. I tend to use the Marketplace method which allows the user to communicate directly with the vendor via chat feature, users could ask anything they want and the vendor could answer the question directly of course under the control of Traveloka.
Usually when a user has any requirement regarding the product they are concerned, they need to use the help feature first (connected with Traveloka) and need to wait for some time to get feedback because Traveloka is the medium between user and vendor. Traveloka might need an answer from the vendor to be delivered to the user. By providing a chat with vendor feature could build flexibility where users could meet and interact with vendors directly (between platforms of course) without waiting for another third party.
Ideate
Local tour could be a good decision for a traveler while strolling another city and or another country, they may hard to communicate with local people to buy tour package there (probably they need to use local language there or English) and one more thing is they couldn’t trust the local travel agent easily and it’s quite difficult to choose which local travel agency that could give a good service. Tour & Travel feature on Traveloka will partner with trusted vendors at the destination city and users could find it easier to book a local tour because they already trusted Traveloka.
Actually Traveloka already had a local tour feature on it, but still we have to access Xperience Feature then the tour feature is located inside the Xperience Categories and the design is simple if we compare it with Klook Application which focuses on local tour in every destination. Tour & travel features will be one of primary features in Traveloka App and can be accessed directly via Home Application.
Develop (Designing the app)
Information Architecture
Information Architecture consists of elements which will be presented on the Tour & Travel Page, I made an MVP for the search bar which will contain a powerful Filtering Page and the result could adjust some products from the user’s expectation in filtering. I put promotional cards below the search bar in order to let the user access the promo page easily, most users use Traveloka due to their attractive promotion (user’s point of view during the interview). The other elements such as Explore Nearby, Friendly Budget Tours, and Top 10 Tours could be a business opportunity between vendors and Traveloka which will make their product could be shown on the home page. Other elements like City Stories and Trending Articles are the path that I made for engagement between vendor and user. Vendors could make a content which will be shown on City Stories and for the Articles Feature users become the party who would enjoy the content.
User Flow
I made user flow with a search bar and filtering feature which seem as the most used feature on Travel Booking Application. The result after ‘choose filter’ will show a list of product cards that suit them, filtering features will generate user’s needs and wants in looking at the product they need and make the booking transaction faster.
Visual Design and Interaction
As for the next design process after mapping the Information Architecture and user’s flow, I made wireframing and sketching using a regular paper and a marker following the Information Architecture, then it was transformed into the Low-Medium Fidelity and then High Fidelity with collaboration design tool, Figma.
New Tour & Travel Feature Home Page (High Fidelity)
Home page for Tour & Travel feature was made with various elements, with the main element Search Bar which will be directed to the Filtering Page, and then based on user’s point that they choose Traveloka because of their various promotions, so I put horizontal promo cards under the search bar in order to pursue user’s first encounter. Furthermore, users could be triggered with various promotions available there (promo card on home page) in order to gain their needs on the Tour & Travel products.
As for the Explore Nearby, Traveloka will detect the user’s location then it will show the user about local tours in their nearby area. It would be a good reference for a traveler while visiting another city and or country and they might look for a tour in their current location.
Another element such as City Stories, Friendly Budget Tours, Top Ten Land Tours, and Trending Articles will be a two way interaction how Traveloka, vendors, and users engage and tend to choose which product will suit them.
Filtering Feature
Due to the large number of vendors in Traveloka and user’s preference in choosing the product based on their needs, I made a more detailed filtering feature on this Tour & Travel page and it could be accessed on the search bar as we see below.
Users could make a check on the filter based on tour categories, customize the budget, and other complement features such as instant confirmation, free cancellation, official vendor, include tour guide. After choosing the filter, the result will come out with products with the user’s preferences.
Chat with Vendor Page
Finally it’s the other feature which will make transaction easier, that’s how it is. Indonesian users who tend to ask without paying attention to details, users who would like to secure the assurance before making a payment, and also users who might need help or another requirement before saying Yes. It all could be done when we make a clear and detailed way in showing a product, but when we face that kind of user, there is another party which becomes our media (between vendors and users) called ‘help’. If I put my mind in the user’s shoes, it will be very painful that we have to wait for another maybe 24 hours or 2x24 hours to get the answer, but in another expressway we can just call the customer service to ask our inquiry and we might need to make an email message. It’s surely a long way to go to get to the vendor!
But after I got another insight from a user, if only Traveloka had a ‘chat with vendor’ feature, it would be good! Then I made another mind mapping with my partners (Mas Rizky and Mba Alya), Is that a good idea? Will it be needed? Of course it turned out well!
As for the design, I made it look simple and clear, it could be accessed on the product detail page and it will show the vendor’s name including their badge and the last time they were active or online. Besides that, user could also attach files such as Image from their phone’s gallery, Product which will integrated with product cards available on the feature, Booking which result will come out once user makes a booking for vendor’s product, and of course Frequently Ask Question (FAQ) in user’s centric but in vendor’s feature will be named as FAQ Assistant. FAQ Assistant will be the media how vendors make a list of most asked questions to be delivered to users once they make a new chat, FAQ Assistant will help vendors when they are not online but users couldn’t wait long for vendor’s reply and they would look at the list of questions and answers provided by vendors.
Prototyping
Before the Usability Testing (UT) Phase, I made all the design pages to be interacted with Figma. The prototype could be accessed through this link.
While doing the prototyping, designers need a sense of critical thinking in every decision they make, for example: “If this button is clicked, then it will be directed to this page or it could also occur an error message”. Designers tend to make decisions based on the user’s behavior and needs. That’s the reason why we need UT for validating whether our design could be understandable or not.
Usability Testing (UT)
As for usability testing, I made the prototype of my design with Figma then integrated it with Maze Design, as tools to be used for UT. UT was done in a moderated and unmoderated way, moderated used with Zoom screen sharing and unmoderated used by distributing the Maze link to users.
UT was divided into three section, task, open question, and opinion scale
Tasks:
- Searching a product with filtering feature
- Do chatting with a vendor
- Booking, filling data, payment
- Using chat feature includes send booking confirmation
Open Questions: Question about tasks done by user such as review, pain point, gain, and feedback
Opinion Scale: User’s review with scale 1–5 about the feature
Usability Testing Result
The result of UT shows that the design has quite a high rate and it’s understandable by user, but when I do a deeper research on Maze’s result, I found it user has a bit confusion on the chat feature on the fourth task (Using chat feature includes send booking confirmation)
Issue and Finding
4 of 5 users found it confusing about the plus button (shown on Maze result) and needed to iterate deeper while doing the task to get to know how to send the booking confirmation, then I made A/B testing for this feature.
I made a comparison between using a clip icon (left side) and moving it to the left side and made the icon bigger and for the right side design, I still use the plus button but make it floating on the chat feature. These A/B testing was delivered to users and they chose which one is better.
Finally, users chose a clip button which seems more like an attachment button than a plus button. This result could make a conclusion that choosing the right icon in visual design has a higher impact on understanding the design. Besides that, users preferred the menu (booking, product, image) that appeared once we clicked the clip button because it included a caption for each icon.
Another Finding?
During the UT process, I got more insights from users that might have a good point to be included in my design.
Before I got this insight, chat with vendor features could be accessed on the product page, but users expected it could be accessed occasionally. For example, after we make the booking we can access the chat page.
The insight made me realize that chat feature is a great companion for users and it should be easy to access, of course I made it appear on the home page for Tour & Travel feature and on the Thank You Page after making a transaction.
The entire process from the research, design, until the validation are based on Traveloka’s motto “Enabling Mobility” which could mean that we’ve got to provide an easy and flexible experience for users while using Traveloka Application.
Lesson Learned
Being critical thinking is a must while generating user’s empathy and user’s expectation, it could be a great insight sometimes
I’ve got into conclusion that all the design process from the very beginning until now (it wouldn’t end, right?) need a critical thinking mindset, since we’ve must always been in user’s shoes and being user centered and hence of course as a UI/UX designer we shouldn’t be subjective
A good design is not only about good visual but an understandable thing even on the first sight
As I made the first encounter for the chat feature (the plus button) I made it as simple I could to look clear and simple, however users weren’t triggered and found it hard to understand what was the function of that button? That’s why I still need to redesign that tiny ‘plus button’ into the ‘clip button’.
Elaboration within stakeholders could generate another perspective from different point of views
Designers don’t work alone, they need everyone to gather to ask their each opinion about his/her design. Designer does have perspective but we wouldn’t achieve the right ‘solution’ without stakeholders.
It’s been a great challenge for me as my first project was done fully remote and I’ve got to manage the whole process at home with support of Mas Safrian and my partners, Mba Alya and Mas Rizky. Thank You for reading and I hope this article could be helpful for readers especially UI/UX newcomers like me 🙂.
Source:
Traveloka website, Unsplash, Freepik, British Design Council, McKinsey
