Simplify Acomodation Traveler with Only One Tap to Fill Your Data— UI UX Case Study Traveloka Apps
Traveloka is an unicorn company service that provides travels, accomodation, lifestyle such as flight ticket, hotel booking, attractions ticket, activities, car rental, restaurant booking.
I started my project from research to developed what they need and what they not aware in Traveloka app. I collected the data to define the problem and make solutions to solve the problem. After all, I’ve got two problems to solving — First, I have to solve that users need a feature to customize budget which compatible. Second, users need a real time chat feature directly to tour guide.
The Purposed
It’s my final project design at Purwadhika School. The goals is simplify users to compare an information about products in Traveloka App that compatible with their necessity and expeditios to decide the product until make a payment or transaction.
Design Process
Phase 1 — Preparation to understanding the user
To conduct the user from this research, I have to create some questions to understanding the problem to figure it out. In this case, user segmentation betweeen 20 until 40 ages which is they are employees that has ever been using Traveloka App with total 24 participants as a team. I conducted and interviewed 8 users. The methodology that I choose is Moderate Test and Unmoderate Test but majority of this research is Unmoderate Test because situation of pandemic which doesn’t allow us to face-to-face. Overall, the result was superfine even I was used Unmoderate Test via Zoom. This below is insights from users.
Benchmarking — Consideration from user to decided
I do comparative research to get support for my primary research data, in order to know what’s pain point and deficiency from Traveloka App whether they have to compare by another of competitor such as Tiket.com, Pegi-Pegi, Agoda, and Airbnb. Here the reasons why they need to compare by another Apps.
Phase 2 — Grouping the datas to get to know what’s the problem
I’ve got many information and persepective from users, so I do an affinity map to simplify the datas and categorize their insights. Affinity map is a method to collecting informations basically use a sticky notes to grouping similar information into the same category.
Based on the Affinity Map, users needs to:
- Put notification in every booking order that they booked as a reminder.
- Add a variant staycation, backpacker, luxurios option in the filter when choosing a hotel.
- Ticket group for 8 person or more which price has been bundled.
- Scan barcode for promos in the feature eats.
- Pop up or button for available voucher.
- Categorize products are on promo in home page.
- Feature finger print to login.
- Real time chat feature directly to tour guide.
- Feature for customize budget which compatible.
Priority the problem
After mapping and grouping of insights, I decided by matrix priority method which important to business and important to user.
First, users need a feature to customize budge which compatible. Second, users need a real time chat feature directly to tour guide.
User persona
User persona is representative from users that face with these problems. I choose Mario as a user that will benefited the most with the design.
Phase 3 — Implementing those ideas into the flow
To generate those ideas I create user flow as the way they use the feature from home page until they reviewed their booking. It’s the picture how journey work.
Wireframe
Based on user flow I directly make medium-fidelity to visualize my ideas and I also make wireflow to connecting each other page. Here’s my wireframe as my represent ideas.
Consistency and Guideline by Design System
Design system is a collection of UI components which can be use without create new similar elements and bring into guideline which is design has been made to be consistent. You can see my design system style below here.
High-Fidelity Design
In this step, I have to aligning my own style and Traveloka’s style because I don’t want deviate far from Traveloka’s style. As we know that colors and some of components must have carry through a research. Basically, I proposed in my visual design to using flat illustration because illustration is more interactive and clean. The most part I liked of my design in the scope of experience and user-centered is Scan E-KTP or Passport.
Illustration
Scan E-KTP or Passport
Phase 4 — Usability Testing
To ensure the product is running well, we need to test the product through usability testing process. I approached 5 users with different method. First method, 4 users via Maze as Unmoderate Test. Second, 1 user via prototype as Moderate Test. I conducted them to do 4 different tasks and some questions. Based on my usability testing, this is the result:
Acctually, in real case we don’t need to iterations if tasks that we’re given working well or successed. Because it’s just case study, there are some users gave me concern about the design. So I do iteration to present the lessons.
Iteration 1 — user not triggered of CTA Tour Guide
Iteration 2 — user not aware card clickable
Final Wireflow
You can see my prototype here.
Lesson Learned
It’s my first project as an official student of UI/UX Designer Purwadhika School. They had taught me a lot of valuable things especially our lecture Mas Safrian Jayadi:
- Doing a research takes more energies and time than I expected — to merge with user we needed some alternative or indirective questions. So they could easily understand.
- Consistency in design is really important — we should do a lot of iterations in designing to be consistent and make them to your guideline.
- Critical Thinking and User-Centered — the most valuable things we should always remember as a designer.
Thank you for reading my project. I hope you get lessons and enjoyed from this case study. It’s an appriciation if you give me a feedback.
