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,"
Visual Inconsistency
Inconsistent styles created a confusing navigation.
Unclear Contrast
Weak contrast made key actions harder to spot, reducing clarity.
Slow Performance
Heavy and unoptimized components slowed down responsiveness. Without proper optimization, users experienced laggy interactions and longer loading times.
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.
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.
Competitor Analysis
To gain deeper insights, I reviewed existing competitor platforms and gathered feedback from peers who frequently purchase in-game credits. These findings highlighted the need for:
Competitor A
Competitor A excels in usability and user satisfaction, offering a smooth experience for users. However, its feature set is only average, and pricing is less competitive compared to others.
Competitor B
Competitor B stands out with strong feature completeness and audience fit. Yet, its usability feels less intuitive, pricing is higher, and overall satisfaction from users remains moderate.
Competitor C
Competitor C provides affordable pricing and fits casual gamers well. Still, its features are limited, and user feedback reflects a mixed level of satisfaction compared to other competitors.
User Persona
After spotting opportunities from the competitor analysis, I wanted to zoom in closer to the user themselves. That’s why I built a user persona—capturing who they are, what drives them, and where they struggle. This step helped me keep the design grounded in real user needs rather than assumptions.
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.
User Flow
As patterns from the journey began to take shape, I wanted to see how everything connects. The sitemap refined the flow uncovered during the journey mapping, outlining a structured path that balances clarity and function. Each section was designed to minimize friction and guide users toward completing their goals efficiently.
Scenario 1:
A new user discovers Nazzh Store and creates an account to start their first top-up journey
Scenario 2:
User continues their unfinished payment process by transitioning from web to mobile
Sketch
Following the user flow analysis, I proceeded to the sketch phase as an early visual exploration. The objective of this step was to define the layout structure, content placement, and key interaction elements before moving forward to wireframes.
Part 1
This sketch illustrates the initial flow starting from user login and onboarding, continuing to product exploration. The objective is to help users quickly find and select the game they want to top up.
Part 2
This part continues the journey from entering the game ID to selecting the top-up amount, confirming payment, and completing the transaction. The process ends with users submitting a review.
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
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.
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.