Hostel Booking App
UI Design
A mobile booking app UI project for backpackers travelling in Thailand, combining hostel discovery, map-based navigation and room booking in one experience. The project explores how to make finding and booking accommodation simple and convenient, from browsing hostels to completing payment.
This project focuses exclusively on UI design. It was developed as a Figma-based exercise during the early stages of my UX Master’s Degree, without a user research phase.
- Problem: Backpackers often need to find a safe hostel quickly in an unfamiliar city, sometimes with an unstable internet connection.
- My role: Solo UI designer: user flow, design system and interactive prototype prepared for developer handoff.
- Tool: Figma.
- Outcome: A booking flow from onboarding to payment, with the happy path, alternative paths and error states. Not tested with users yet.
01 PROJECT OVERVIEW
I designed a responsive prototype for a Hostel booking app prepared for handoff, including workflow conventions, accessibility considerations and descriptions of interactions and behaviours. The different steps of the experience are represented, from the three-step onboarding process to the payment page, including the happy path, alternative paths and error states.
This project focused on designing a responsive UI and efficient user flows for a hostel booking app.
02 GOALS
During my trip in 2024, I used the Hostelworld app, which inspired me to imagine an alternative product dedicated to a specific country: Thailand. This concept would allow the future integration of useful travel features such as visa information, weather forecasts, luggage storage locations, simple expressions to communicate easily and cultural rules travelers should not break.
The target audience is travelers aged 20 to 45 who enjoy independent travel.
03 METHODOLOGY
I first mapped the main user journey and alternative paths before designing the interface and defining the key interactions.
- I created a moodboard
- I mapped the flow
- I selected a design system
- I designed the prototype
04 USER FLOW & BOOKING JOURNEY
Before designing the interface, I mapped the complete booking journey, from onboarding to payment confirmation, including the happy path, alternative paths and error states. This allowed me to anticipate edge cases and ensure every screen had a clear entry and exit point before touching the execution.
05 SOLUTION & OUTCOMES
- Feeling of Belonging
The first step was to display inspirational quotes, because many young travelers use this type of app. The messages acknowledge that traveling can be intimidating and gently support users as they begin their journey, helping build their confidence. The onboarding photos speak to travellers in general, so they are not specific to Thailand. The country appears on the next screen: “Book a hostel in Thailand!”
Then users can sign up or log in with Facebook or Google. The process needs to be as quick as possible.
My idea was to design an app dedicated to hostels where users can easily book a place near them using a map organized by neighborhood or area. Hostels are also places where people meet and socialize, which can be an important expectation for many travelers. The map helps travellers understand where hostels are located, while the cards provide a quick overview of each option. Combining both views allows users to explore the area and compare hostels before making a choice. Reading reviews about the atmosphere and services helps reassure backpackers and ensures they arrive somewhere safe.
Users can also save their favorite hostels and find them later in their profile. This feature allows them to keep track of places they enjoyed or revisit hostels where they had positive experiences and made connections.
- Quick Booking
- After login, users can select a city directly from the map or explore hostels through the cards.
- They can either choose a precise area using chips or the map at the very bottom of the page.
- Users then select the hostel that suits them best. The interface displays the right amount of information to prevent cognitive overload and allow users to quickly scan the different hostel options.
- Users can book a room and complete the payment process, which can either be confirmed or rejected.
I included successful and failed payment states to show how the interface responds to different outcomes. These screens help define what users see after submitting a payment and what they can do if it fails.
- The TH logo allows users to return to the homepage at any time during the process.
Users may also experience unstable internet connections while traveling, which reinforces the need for a simple and efficient booking process. Sometimes they plan ahead, while at other times they urgently need to find a place to sleep.
- Accessibility & Readability
I used a limited number of typefaces and aimed for readability; contrast on photo backgrounds would need checking.
Users can activate notifications to receive reminders for check-in and check-out times. When traveling, people can easily lose track of time due to jet lag, fatigue, or busy schedules. Notifications can also inform users about available rooms or events happening nearby or in the hostels where they are staying.
Travelers may also be tired or need to quickly book a room for safety reasons, so the entire process has to remain extremely intuitive. Although Thailand is not considered an unsafe country, reassurance remains important. In 2025, Thailand ranked as the 8th safest country for solo female travelers.
06 WHAT I WOULD IMPROVE
If I had to rethink this prototype:
Visual consistency: I would redesign the login, sign-up and payment screens to better match the overall visual design, while keeping them simple and easy to use. I would also improve the visibility of key elements.
Search and navigation: I would reconsider the double carousel used for neighbourhoods and hostels. Instead, I would explore a search bar where users could enter a street or area, while giving more space to the map. Since travellers may not know local place names, map-based navigation and GPS could make it easier to find hostels, provided GPS works reliably.
Booking journey: I would make the booking flow smoother and more complete, covering more steps and possible situations.
Hostel cards: I would redesign the hostel cards to make information clearer and help users compare their options.
User profile: I would add a profile section where users could manage their personal information and bookings.
Additional features: If the prototype were developed further, I would integrate the travel information and practical tools for travellers mentioned earlier.
- Usability test: I would test this prototype as it wasn’t tested with users yet.
