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
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,"
The homepage feels too crowded
Too many banners and promotional sections appear at once, making it hard for users to focus.
Product information isn’t easy to scan
Important details like price, variants, and specifications are not clearly structured, which slows users down.
The checkout flow feels confusing
Users need to go back and forth to review shipping costs, discounts, and payment details, making the process feel less smooth.
More focused homepage
The layout is simplified by reducing visual clutter and highlighting the most important features.
Clearer information structure
Product details are reorganized so users can quickly scan key information like price and variants without extra effort.
Straight through transaction flow
The payment flow is redesigned to be more linear and transparent, so users can clearly see the total cost
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.
Bottom Navigation Bar
Wallet Overview Header
Search Bar
Category Filter
Service Grid Menu
Store Information Header
Promo Overview Header
Analyzing Similiar Apps
A granular competitive benchmarking of market-leading hospitality platforms was executed to map out industry-standard interaction patterns.
Bottom Navigation Bar
Wallet Overview Header
Search Bar
Category Filter
Service Grid Menu
Store Information Header
Promo Overview Header
Empathy Mapping
To structuralize user behaviors, cognitive friction, and core motivations within the rental property ecosystem, an empathy mapping framework was established.
Current Website SiteMap
This gave us valuable insights on how we can improve content organization and hierarchy, navigation structure, and content gaps or redundancies to inform our design decisions and improve overall user experience.
Updated Website SiteMap
Promo pages that were previously split across multiple subpages are now consolidated into a single structured flow. The Homepage service grid is reorganized into clearer service categories.
Wireframing
I moved forward with transforming rough ideas into low-fidelity wireframes. The goal of this stage was to define layout hierarchy, navigation structure, and core functionality before moving into visual design.
Prototyping
Instead of starting with low-fidelity prototypes, I moved directly to high-fidelity prototyping to accelerate validation. Since the layout and structure were already defined, hi-fi flows enabled faster usability testing and clearer feedback.
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
Accent
Accent
Accent
Accent
Neutral
Typography
Clash Display
Satoshi
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.