Category
Category
UI/UX Design, Mobile App
UI/UX Design, Mobile App
Responsibility
Responsibility
UI/UX, Flow Design, Prototyping
UI/UX, Flow Design, Prototyping
Tools
Tools
Figma, FigJam
Figma, FigJam
Travelink - Mobile Travel Platform
Travelink - Mobile Travel Platform
Travelink - Mobile Travel Platform
Travelink is a mobile travel platform that helps users plan and book trips from finding a destination to booking flights, hotels, and tour packages all within a single app, with an experience that's simple, fast, and personal. This case study walks through the thinking behind each design decision, from user research all the way down to the interaction details on the payment screen.
Travelink is a mobile travel platform that helps users plan and book trips from finding a destination to booking flights, hotels, and tour packages all within a single app, with an experience that's simple, fast, and personal. This case study walks through the thinking behind each design decision, from user research all the way down to the interaction details on the payment screen.
Problem insights
Problem insights
Problem insights
This research surfaced three core problems that consistently showed up when users tried to plan a trip through typical travel apps:
Hard to compare prices due to a complicated UI; the app feels cluttered with promotions and banners.
Long, frustrating booking process.
Lack of transparency around additional fees
This research surfaced three core problems that consistently showed up when users tried to plan a trip through typical travel apps:
Hard to compare prices due to a complicated UI; the app feels cluttered with promotions and banners.
Long, frustrating booking process.
Lack of transparency around additional fees
Target users
Target users
Target users
Research focused on highly mobile users with limited time to plan trips manually, real time updates, personalized, budget friendly recommendations, and saved trips with easy booking.
Research focused on highly mobile users with limited time to plan trips manually, real time updates, personalized, budget friendly recommendations, and saved trips with easy booking.
Key features
Key features
Key features
Onboarding & sign up
Onboarding & sign up
A branded splash screen and concise onboarding communicate Travelink’s core value.
For sign up, users can choose phone OTP, Apple/Google login, or email registration, with social login prioritized for a faster entry. This reduces friction and avoids lengthy forms before users can explore the app.
A branded splash screen and concise onboarding communicate Travelink’s core value.
For sign up, users can choose phone OTP, Apple/Google login, or email registration, with social login prioritized for a faster entry. This reduces friction and avoids lengthy forms before users can explore the app.
Homepage
Homepage
The homepage supports two user needs by goal driven search and browsing for inspiration. A prominent search bar and quick access categories help users with a specific destination in mind, while Popular Destinations and Recommended for You offer personalized discovery through category filters.
The homepage supports two user needs by goal driven search and browsing for inspiration. A prominent search bar and quick access categories help users with a specific destination in mind, while Popular Destinations and Recommended for You offer personalized discovery through category filters.
Search & filter
Search & filter
This flow directly addresses the pain point of complicated price comparison by separating search parameters into focused layers:
Recent Searches & Suggestions for provides a fast entry point for repeat or ongoing searches.
Filters that placed in a bottom sheet to keep the results page clean while offering control over category, star rating, and price range.
Favorites, separates saved options from recently viewed assets, supporting different comparison needs.
The price slider with explicit values also lets users filter by budget precisely, without trial and error.
This flow directly addresses the pain point of complicated price comparison by separating search parameters into focused layers:
Recent Searches & Suggestions for provides a fast entry point for repeat or ongoing searches.
Filters that placed in a bottom sheet to keep the results page clean while offering control over category, star rating, and price range.
Favorites, separates saved options from recently viewed assets, supporting different comparison needs.
The price slider with explicit values also lets users filter by budget precisely, without trial and error.
Detail screen
Detail screen
The detail page surfaces key trip information and policies upfront, helping users evaluate options.
About Trip stays concise with “See more,” while Check Availability uses inline date tabs for quick comparison without losing context. Lightweight bottom sheets handle secondary actions like sharing.
The detail page surfaces key trip information and policies upfront, helping users evaluate options.
About Trip stays concise with “See more,” while Check Availability uses inline date tabs for quick comparison without losing context. Lightweight bottom sheets handle secondary actions like sharing.
Flights booking
Flights booking
The flight booking flow breaks complex parameters into small, users can compare dates and prices directly from results, while filters keep technical options separate. Visual seat selection and separate baggage/passenger steps make decisions easier, with a running subtotal keeping costs transparent throughout the flow.
The flight booking flow breaks complex parameters into small, users can compare dates and prices directly from results, while filters keep technical options separate. Visual seat selection and separate baggage/passenger steps make decisions easier, with a running subtotal keeping costs transparent throughout the flow.
Booking detail and payment
Booking detail and payment
The payment screen provides transparent, all in pricing with a clear breakdown of subtotal, tax, service fee, and discounts. And How to Pay instructions are shown inline for virtual account payments, while a cancellation confirmation prevents accidental exits from the payment flow.
The payment screen provides transparent, all in pricing with a clear breakdown of subtotal, tax, service fee, and discounts. And How to Pay instructions are shown inline for virtual account payments, while a cancellation confirmation prevents accidental exits from the payment flow.
Booking confirmation
Booking confirmation
Designing success and failure states equally, ensuring users are never left at a dead end. Booking Failed provides a clear explanation with actionable next steps by Change Payment Method or Try Again, and successful bookings lead directly to View My Booking.
Designing success and failure states equally, ensuring users are never left at a dead end. Booking Failed provides a clear explanation with actionable next steps by Change Payment Method or Try Again, and successful bookings lead directly to View My Booking.
My booking
My booking
The History, Ongoing, Scheduled, and Canceled tabs give users a clear overview of all bookings in one place, eliminating the need to check separate emails for status updates.
The History, Ongoing, Scheduled, and Canceled tabs give users a clear overview of all bookings in one place, eliminating the need to check separate emails for status updates.
Profile and settings
Profile and settings
The profile page organizes settings into Account Preferences, App Preferences, and Others, making navigation easier than a single long list.
The profile page organizes settings into Account Preferences, App Preferences, and Others, making navigation easier than a single long list.
Project impact
Project impact
Project impact
All three core pain points from research are directly answered by traceable design decisions, not just a visual redesign without a clear rationale.
The flight booking flow is broken into small stages, each with one decision and a transparent running subtotal.
The consistent navigation and filter pattern across Search, Flights, and other pages builds a mental model users learn once and reuse throughout the app.
Failure scenarios are designed on par with success scenarios, reducing the risk of users feeling stuck when a transaction doesn't go smoothly.
A consistent design system keeps 50+ screens feeling like one coherent product rather than a collection of pages designed in isolation.
All three core pain points from research are directly answered by traceable design decisions, not just a visual redesign without a clear rationale.
The flight booking flow is broken into small stages, each with one decision and a transparent running subtotal.
The consistent navigation and filter pattern across Search, Flights, and other pages builds a mental model users learn once and reuse throughout the app.
Failure scenarios are designed on par with success scenarios, reducing the risk of users feeling stuck when a transaction doesn't go smoothly.
A consistent design system keeps 50+ screens feeling like one coherent product rather than a collection of pages designed in isolation.