Tripkaikai
Tripkaikai: designed to help travellers plan a Bali day trip and book it with a local driver
Tripkaikai
- Industry
- Travel & Tourism
- Project timeline
- June 2026Ongoing maintenance
- What we did
- Research, UI/UX Design, Prototype, Development
- Design deliverables
- Booking Website UI, Mobile Web UI, Design System
- Engineering deliverables
- Booking System, Affiliate System, Back Office, E-Commerce, Payment Integration, SEO, Analytics
We gave Tripkaikai, a Bali tour operator with its own local drivers, a website where travellers compare day trips and book them directly.
Many guests had booked through resellers and arrived unsure who would pick them up, what the day looked like or what it would cost.
Now every trip shows its hours and price up front, the day reads hour by hour, and a written quote comes before payment.
Objective
Design a booking website where every trip reads the same way, the driver is part of the product and the quote comes before the payment.
The Challenge
Eight trips, all different
From Nusa Penida to the Jatiluwih rice terraces, each trip has its own length, stops and pickup time.
Planned the night before
Most travellers choose tomorrow's trip on a phone, often late, from a hotel room.
Trust after resellers
Guests wanted to know the driver, the plan and the final price before saying yes.
The Solution
One card for every trip
A photo, the length of the day and a starting price per person, in a fixed-width type people scan first.
The day, hour by hour
Seven stops from a 07:00 hotel pickup to the 17:00 drive back, with the packages right beside them.
Drivers with a name
Each driver has a region, languages and a short story, and the booking ends on WhatsApp with the same team.
Our development process.
Five phases in one month, from traveller questions to a booking website built and tested on phones.
One green, one typeface, a lot of air.
Geist for everything, Geist Mono for hours, prices and steps, and one forest green for actions.
Geist
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 & * @ ? ! / + ( , . : ; )
- Regular
- Medium
One family for headings, body copy and buttons.
Geist Mono
0 1 2 3 4 5 6 7 8 9 & * @ ? ! / + ( , . : ; )
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Durations, starting prices and step numbers.
Forest
- HEX
- #00563B
- RGB
- 0 | 86 | 59
- CMYK
- 100 | 0 | 31 | 66
Ink
- HEX
- #0C1A1D
- RGB
- 12 | 26 | 29
- CMYK
- 59 | 10 | 0 | 89
Body
- HEX
- #44555A
- RGB
- 68 | 85 | 90
- CMYK
- 24 | 6 | 0 | 65
Mist
- HEX
- #7F8D92
- RGB
- 127 | 141 | 146
- CMYK
- 13 | 3 | 0 | 43
Mint
- HEX
- #DAEAE2
- RGB
- 218 | 234 | 226
- CMYK
- 7 | 0 | 3 | 8
Line
- HEX
- #E5EBE8
- RGB
- 229 | 235 | 232
- CMYK
- 3 | 0 | 1 | 8
Cloud
- HEX
- #F3F5F4
- RGB
- 243 | 245 | 244
- CMYK
- 1 | 0 | 0 | 4
A homepage that plans the day for you.
Here you see the full homepage on desktop and phone. It opens with the most-loved trips and a clear price, explains how a day with a private driver works, then introduces the drivers by name.
Every price in plain sight.
This page lists all eight day trips with filters for what people care about: how long, how far and what it costs. Below, four plain rules explain what every price includes.
A tour page that reads like the day itself.
This is one tour page, the Bali Instagram tour. It reads like the day itself: ten hours with Made as the driver, who the trip suits, seven stops hour by hour and a written quote before anyone pays.
Booked in about a minute.
The booking page asks for three things, the trip, the date and the hotel for pickup, then a name and WhatsApp number. A WhatsApp button stays visible on the page.
Planned on a phone, the night before.
Every page stacks into one column: prices stay on one line, cards swipe, and the booking widget keeps its summary below the list.
The Result
Travellers can compare every trip by length and price, read the day hour by hour and see a written quote before they pay, then book it with the team that drives them.
For Tripkaikai, one card, one tour page and one booking flow cover every trip, so adding a new day out is a content task rather than a design project.
-
UX Research
- Traveller questions
- Competitor review
-
UX Design
- Site map
- User flow
- Wireframe
-
UI Design
- Desktop pages
- Mobile pages
- Design system
-
Prototyping
- Interactive prototype
-
Development
- Website build
- Booking flow
- Written quote
- QA on phones
