iPhone mockup with gray background displaying Travelmate App homepage interface
iPhone mockup with gray background displaying Travelmate App homepage interface
iPhone mockup with gray background displaying Travelmate App homepage interface

Partner

Naufal Mussyafa

📢 INTRO

In this competition, there are five themes to choose from, and I decided to create a travel app. After conducting some research, I discovered that most existing travel apps don't offer virtual reality features. This inspired me to explore the idea further and develop an app that allows users to experience destinations through immersive VR view making travel planning more exciting, interactive, and informative.

📢 INTRO

In this competition, there are five themes to choose from, and I decided to create a travel app. After conducting some research, I discovered that most existing travel apps don't offer virtual reality features. This inspired me to explore the idea further and develop an app that allows users to experience destinations through immersive VR view making travel planning more exciting, interactive, and informative.

📢 INTRO

In this competition, there are five themes to choose from, and I decided to create a travel app. After conducting some research, I discovered that most existing travel apps don't offer virtual reality features. This inspired me to explore the idea further and develop an app that allows users to experience destinations through immersive VR view making travel planning more exciting, interactive, and informative.

User persona profile for Travelmate travel planning app design
User persona profile for Travelmate travel planning app design
User persona profile for Travelmate travel planning app design

💁🏻‍♀️ USER PERSONA

This user persona represents someone who loves traveling and enjoys visiting popular, affordable destinations. They look for comfortable accommodation options, unique travel recommendations, and easy access to complete and reliable information to help with trip planning. They’re active on social media and often use online platforms for travel inspiration. However, they sometimes struggle to find accurate details and feel overwhelmed when choosing the right destination, accommodation, or activity that fits their budget and interests. This persona helps shape the app to be more helpful, clear, and enjoyable for travelers with similar needs.

💁🏻‍♀️ USER PERSONA

This user persona represents someone who loves traveling and enjoys visiting popular, affordable destinations. They look for comfortable accommodation options, unique travel recommendations, and easy access to complete and reliable information to help with trip planning. They’re active on social media and often use online platforms for travel inspiration. However, they sometimes struggle to find accurate details and feel overwhelmed when choosing the right destination, accommodation, or activity that fits their budget and interests. This persona helps shape the app to be more helpful, clear, and enjoyable for travelers with similar needs.

💁🏻‍♀️ USER PERSONA

This user persona represents someone who loves traveling and enjoys visiting popular, affordable destinations. They look for comfortable accommodation options, unique travel recommendations, and easy access to complete and reliable information to help with trip planning. They’re active on social media and often use online platforms for travel inspiration. However, they sometimes struggle to find accurate details and feel overwhelmed when choosing the right destination, accommodation, or activity that fits their budget and interests. This persona helps shape the app to be more helpful, clear, and enjoyable for travelers with similar needs.

User journey map for Travelmate app showcasing user travel experience flow
User journey map for Travelmate app showcasing user travel experience flow
User journey map for Travelmate app showcasing user travel experience flow

📍 USER JOURNEY

This user journey map shows the steps a traveler takes when looking for popular and affordable tourist spots. It starts with searching online and ends with using a travel app. Along the way, the user faces problems like unclear information, confusing app layout, and lack of personalization. These pain points can lead to frustration and hesitation. From this journey, we see opportunities to improve like giving complete travel info, making the app easier to use, and showing only the most important content. This helps us create a better and more helpful travel app experience.

📍 USER JOURNEY

This user journey map shows the steps a traveler takes when looking for popular and affordable tourist spots. It starts with searching online and ends with using a travel app. Along the way, the user faces problems like unclear information, confusing app layout, and lack of personalization. These pain points can lead to frustration and hesitation. From this journey, we see opportunities to improve like giving complete travel info, making the app easier to use, and showing only the most important content. This helps us create a better and more helpful travel app experience.

📍 USER JOURNEY

This user journey map shows the steps a traveler takes when looking for popular and affordable tourist spots. It starts with searching online and ends with using a travel app. Along the way, the user faces problems like unclear information, confusing app layout, and lack of personalization. These pain points can lead to frustration and hesitation. From this journey, we see opportunities to improve like giving complete travel info, making the app easier to use, and showing only the most important content. This helps us create a better and more helpful travel app experience.

iPhone mockup with gray background showing Travelmate App wireframe screen
iPhone mockup with gray background showing Travelmate App wireframe screen
iPhone mockup with gray background showing Travelmate App wireframe screen

🧐 WIREFRAME

To start the design process, I created wireframes to map out the structure and flow of the app. Wireframing helps visualize the layout, content placement, and user journey without focusing on the visual details yet. It’s a crucial step to ensure that each screen is functional, intuitive, and supports the app’s goals. By keeping things simple and focused, wireframes make it easier to test ideas, gather feedback, and build a solid foundation before moving on to the final design.

🧐 WIREFRAME

To start the design process, I created wireframes to map out the structure and flow of the app. Wireframing helps visualize the layout, content placement, and user journey without focusing on the visual details yet. It’s a crucial step to ensure that each screen is functional, intuitive, and supports the app’s goals. By keeping things simple and focused, wireframes make it easier to test ideas, gather feedback, and build a solid foundation before moving on to the final design.

🧐 WIREFRAME

To start the design process, I created wireframes to map out the structure and flow of the app. Wireframing helps visualize the layout, content placement, and user journey without focusing on the visual details yet. It’s a crucial step to ensure that each screen is functional, intuitive, and supports the app’s goals. By keeping things simple and focused, wireframes make it easier to test ideas, gather feedback, and build a solid foundation before moving on to the final design.

Travelmate mobile app interface mockup for travel booking and planning
Travelmate mobile app interface mockup for travel booking and planning
Travelmate mobile app interface mockup for travel booking and planning

🤩 HI FIDELITY

These high fidelity screens showcase the final design of the Travelmate app, which helps users easily search for flights, find nearby hotels, and explore travel options through a clean and user friendly interface. With features like location based hotel maps, detailed search filters, and access to previous bookings, the app aims to make travel planning more practical, personalized, and visually engaging.

🤩 HI FIDELITY

These high fidelity screens showcase the final design of the Travelmate app, which helps users easily search for flights, find nearby hotels, and explore travel options through a clean and user friendly interface. With features like location based hotel maps, detailed search filters, and access to previous bookings, the app aims to make travel planning more practical, personalized, and visually engaging.

🤩 HI FIDELITY

These high fidelity screens showcase the final design of the Travelmate app, which helps users easily search for flights, find nearby hotels, and explore travel options through a clean and user friendly interface. With features like location based hotel maps, detailed search filters, and access to previous bookings, the app aims to make travel planning more practical, personalized, and visually engaging.

Screenshot of Travelmate App prototype shown in Figma design workspace
Screenshot of Travelmate App prototype shown in Figma design workspace
Screenshot of Travelmate App prototype shown in Figma design workspace

🧩 PROTOTYPE

This prototype brings the Travelmate app to life by showing how each feature works through interactive user flows. It allows users to experience the full journey from browsing destinations, booking flights and hotels, to exploring map views and checking travel deals. The prototype helps visualize the app’s functionality, layout, and user experience before moving into development.

🧩 PROTOTYPE

This prototype brings the Travelmate app to life by showing how each feature works through interactive user flows. It allows users to experience the full journey from browsing destinations, booking flights and hotels, to exploring map views and checking travel deals. The prototype helps visualize the app’s functionality, layout, and user experience before moving into development.

🧩 PROTOTYPE

This prototype brings the Travelmate app to life by showing how each feature works through interactive user flows. It allows users to experience the full journey from browsing destinations, booking flights and hotels, to exploring map views and checking travel deals. The prototype helps visualize the app’s functionality, layout, and user experience before moving into development.

iPhone mockup with gray background displaying Travelmate suggested places menu

Suggested Place

iPhone mockup with gray background displaying Travelmate suggested places menu

Suggested Place

iPhone mockup with gray background displaying Travelmate suggested places menu

Suggested Place

iPhone mockup with gray background showing Travelmate room reservation feature

Room Reservation

iPhone mockup with gray background showing Travelmate room reservation feature

Room Reservation

iPhone mockup with gray background showing Travelmate room reservation feature

Room Reservation

iPhone mockup with gray background showing Travelmate virtual reality travel menu

Virtual Reality

iPhone mockup with gray background showing Travelmate virtual reality travel menu

Virtual Reality

iPhone mockup with gray background showing Travelmate virtual reality travel menu

Virtual Reality

iPhone mockup with gray background displaying Travelmate search menu interface

Search

iPhone mockup with gray background displaying Travelmate search menu interface

Search

iPhone mockup with gray background displaying Travelmate search menu interface

Search

iPhone mockup with gray background showing Travelmate destination collection screen

Destination Collection

iPhone mockup with gray background showing Travelmate destination collection screen

Destination Collection

iPhone mockup with gray background showing Travelmate destination collection screen

Destination Collection

iPhone mockup with gray background displaying Travelmate splash screen design

Splash

iPhone mockup with gray background displaying Travelmate splash screen design

Splash

iPhone mockup with gray background displaying Travelmate splash screen design

Splash

NEXT

Top 10 in National UX Challenge

iPhone mockup with gray background showing Pandai Education App homepage interface

NEXT

Top 10 in National UX Challenge

iPhone mockup with gray background showing Pandai Education App homepage interface

NEXT

Top 10 in National UX Challenge

iPhone mockup with gray background showing Pandai Education App homepage interface

Create a free website with Framer, the website builder loved by startups, designers and agencies.