Internship Project
2024
This redesign transforms Travelio's outdated, overcrowded interface into a clean, interactive travel booking experience. By introducing intuitive hooks like one-tap filters, live price animations, and swipe to compare, users can discover, customize, and book accommodations effortlessly.
Solo Project
Daffa Nazhiiff Muttahar
UI/UX Designer
Duration
2 Months
04 Nov - 21 Dec 2025
Tools
Figma
Miro
What is Travelio for?
Travelio is a property tech platform for short-to-long-term residential stays. It connects property owners with guests by providing fully furnished apartments, houses, and villas on daily, monthly, or yearly terms.
Integrated with automated maintenance and contactless check-in, the system reduces traditional friction for a seamless accommodation experience.
Problem
Travelio's UI felt painful dense text walls, buried CTAs, tiny touch targets, and zero delight. Users struggled to scan properties, compare prices, or understand availability. The interface screamed "2008 desktop site trapped in mobile,"
Crowded Interface
Dense text walls and 50+ tiny elements per screen made property scanning impossible
Confusing Checkout
Buried CTAs, unclear total costs (hidden fees), and non-linear payment flow caused 60% cart abandonment
Poor Comparison Flow
No side-by-side property view—users had to tap through 5+ screens to compare prices/amenities
De-Cluttered Discovery
Replaced 50+ tiny elements with interactive property cards (60% hero image, 3-line key info max) and one-tap filters ("Beachfront", "Pet-Friendly") with live price animations.
Swipe-to-Compare Hub
Introduced horizontal swipe carousel showing 3 properties side-by-side (price/rating/amenities), eliminating 5+ screen taps—users now compare in seconds.
Transparent Linear Checkout
Live cost calculator (base + taxes + fees auto-summed), prominent pulsing "Book Now" CTAs, and calendar heatmap for best-price dates, reducing cart abandonment friction.
Design Process
Auditing Current App
A comprehensive UX audit of the current Travelio interface was conducted to isolate major friction points across the navigation flows, address interface clutter, and evaluate overall layout clarity.
Analyzing Similiar Apps
A granular competitive benchmarking of market-leading hospitality platforms was executed to map out industry-standard interaction patterns.
Search Bar
Category/Filter
Detail Information
Payment Overview
Empathy Mapping
To structuralize user behaviors, cognitive friction, and core motivations within the rental property ecosystem, an empathy mapping framework was established.
This synthesize phase successfully uncovered critical user pain points, including severe decision fatigue from overlapping text walls, massive comparison inefficiencies between listings, and financial anxiety regarding hidden service fees.
Affinity Mapping
Clustering qualitative insights into critical pillars: financial transparency, interface congestion, and visual verification to prioritize design fixes.
User Journey Mapping
Mapping the end-to-end rental lifecycle to isolate behavioral friction and conversion drops from discovery to post-check-in stages.
Site Map
Re-architecting the information design into a flat hierarchy to eliminate navigation complexity and accelerate property discoverability.
Mockups
Transforming architectural blueprints into high-fidelity screens, enforcing consistent spacing rules, modern grid layouts, and interactive component behaviors.
User Testing
Conducting scenario-based usability tests to validate property booking flows, price transparency, and neutralize conversion barriers for potential tenants. The feedback helped refine navigation and clarified how announcements and events were displayed.
Design Systems
Color Palette
A minimalist palette combining cohesive corporate blues for trust with tactical warm orange accents to establish prominent visual hierarchy and high-converting CTAs.
Primary
Neutral
Accent
Typography
Clash Display
AaBbCc
The fluffy kitten chased the red laser dot
0123456789
Applied exclusively to major headers to inject a bold, modern visual character, establishing an immediate premium and sophisticated product aesthetic.
Satoshi
AaBbCc
The fluffy kitten chased the red laser dot
0123456789
Utilized for body copy and metadata to ensure maximum legibility, clean fluid scaling, and razor-sharp readability across all mobile viewports.
Conclusion
Rental platforms often suffer from interface congestion and obscure pricing elements. This redesign successfully streamlines property discovery while building solid upfront financial transparency.
Reflection
Real Validation is Key
Scenario-based testing ensures cognitive friction is minimized across the discovery and booking loops, keeping the solution user-centric.
Balancing Structure & Aesthetics
Merging a modular information architecture with premium typography enhances lifestyle engagement without sacrificing transactional utility.