Tourlander
Owned application consisting of a unique platform that offers immersive self-guided tours,
allowing to explore destinations at your own pace.
Enhancing User Experience for Autonomous Travel Exploration
This UX/UI design case study focuses on reimagining the travel experience through an innovative platform that empowers users to explore captivating destinations autonomously.
The project aims to create an engaging and intuitive interface that seamlessly integrates multimedia-rich self-guided tours, expertly curated by passionate guides. By combining cutting-edge user experience design principles with interactive multimedia content, the platform transforms travel into a personalized, immersive, and educational adventure.
Through careful research, iterative design, and meticulous attention to user needs, this case study demonstrates how thoughtful UX/UI design can redefine the way travelers discover, engage, and connect with the world around them.
Project Overview
UX/UI Design
User Research
Figma
Code
Angular
Firebase
Role
Design Thinking Process
Emphatize
Define
Ideate
Design
Test
Research
What is the main goal of the service we are designing?
Who are the target users or customers?
What are the needs and desires of the users that we must satisfy?
What are the key tasks or actions that users need to perform on the product or service?
What are the emotions or experiences that we want to evoke in users when interacting with the product or service?
What are the main limitations or technical restrictions that we must take into account in the design?
How can we differentiate ourselves from the competition and provide a unique experience to users?
The main objective of the service we are designing is to provide users with an immersive and flexible travel experience that empowers them to explore captivating destinations at their own pace. Through an intuitive and engaging platform, we aim to offer self-guided tours that are enriched with multimedia content and expert insights, curated by passionate local guides.
The service seeks to redefine how travelers engage with their surroundings, fostering a deeper connection to culture, history, and authentic experiences while promoting autonomy and accessibility.
Define
Problem Definition
There is a need to provide users, both those who wish to go on a tour autonomously and the tourist guides who wish to offer their services, an application that allows them to create and enjoy a wide variety of tours always available for their consumption.
This application must address users' challenges, such as:
lack of time to keep up with an organized tour service,
the need to adapt to mobility limitations or other disabilities,
offer different languages,
encourage the pursuit of autonomy and creativity,
efficient business management,
differentiation in a competitive market.
Furthermore, it should provide an emotionally rewarding experience, and should meet the needs for reliable information, customization possibilities, and effective interaction between the tour guide and users, thus promoting a unique and memorable tourism experience.
Key Points
Key points to address:
1. Custom content creation: Provide freelance tour guides with an intuitive and efficient tool to create personalized routes and multimedia content that adapts to the interests and needs of users.
2. Price Management and Reviews: Facilitate self-employed tour guides in setting rates and access to a review system, ensuring efficient management and the possibility of improving, standing out and creating a reputation.
3. Accessibility and adaptability: Ensure that the application is accessible to people with different levels of mobility and that it offers options tailored to individual needs, such as alternative routes, accessible multimedia content or language selection/integrated translator.
4. Differentiation and promotion: Offer self-employed tour guides effective marketing tools to promote their services, differentiate themselves from the competition and attract new users interested in personalized tourist experiences.
Objectives
Some objectives will allow the success of the application design to be measured and evaluated, based on the solution to the identified problem and the improvement of the experience of users.
1. Improve user satisfaction with the tourist experience: Obtain an average user satisfaction rating of at least 4.5 out of 5 in the evaluations of the tours carried out through the applicationr.
2. Improve accessibility for users with physical or mental disabilities: Implement adapted route options and accessible multimedia content for users with disabilities, achieving an accessibility rating of 4 out of 5 from users.
3. Increase the number of freelance tour guides who use the application: Increase by 20% the number of freelance tour guides who use the application to offer their services.
4. Increase the diversity of the tours offered: Increase the variety of tours available in the application by 30%, including different themes, approaches and levels of difficulty.
Style Guide
In selecting yellow and blue as the primary colors for our website, it's been carefully considered both the essence of the tours platform and color psychology.
Yellow, representing optimism, energy, and adventure, aligns seamlessly with the adventurous spirit of our platform, igniting enthusiasm for exploration and discovery. It embodies the vibrant experience our users seek.
Complementing yellow, blue evokes feelings of trust, serenity, and reliability. Given that our platform deals with travel and exploration, trust is paramount. Blue instills a sense of reliability and credibility, ensuring users feel secure and confident in their journey planning and bookings.
Together, these colors create a harmonious balance, blending the excitement of adventure with the trust and dependability needed for a smooth, enjoyable tour-planning experience. The combination sparks an emotional connection that resonates with our users, inviting them into a world of safe and exhilarating explorations.
Wireframe
User Personas
Mockups & User Flow
Navigation Menu
Logo and Home button: redirect to Homepage
Tours: dropdown designed to show accessibility, type and country filters as top priority according to the research
Contact: scroll to form in Homepage
Login: activates pop-up for login or register link and redirection to Register page
Language: selector of 3 languages to enforce inclusivity and facilities
Landing section
In the design of the landing section, several key principles have been considered:
Visual Appeal: Visually engaging, with a harmonious color palette, high-quality images or graphics, and an attractive layout.
Clarity and Simplicity: Clear and concise message.
Call to Action (CTA): Includes a CTA button that encourages users to start exploring available tours.
Brand Consistency: Style aligns with the overall brand identity, including logo placement, color schemes, and visual elements.
Homepage
3-step instructions provided are a set of clear and detailed guidelines that outline how to start using the website to visualize and purchase tours with supporting information such as differences between standard or creator user.
Search bar with country selection dropdown
Highlighted tours carousel: Tour card designed to include title and short description, a "save" button, customer reviews and accessibility options (language, wheelchair, media content available)
Get the App CTA section
Contact form
Subscribe to newsletter section
Login pop-up and Register page
Email / Password and Google options for user account.
Forgot password hyperlink
User type (Standard or Creator) selection toggle with description at the left
Password Management: Password visibility toggles for users to view their entered passwords and password strength indicators during registration to encourage strong password creation.
Location & Tour Selection
Ways of finding tours and user flow:
From "Tours" dropdown in the top menu - Select continent will redirect to Country page to select a city
Clicking "Tours" dropdown in the top menu - Redirect to the Continent Selection page to explore destinations or use the search bar
Typing country or city in the search bar in Homepage or Continent Selection page will redirect either to the Country page or directly to the Tour Selection page
Once the country or city has been selected, it will redirect to the Tour Selection page where there is a detailed filters section including accessibility, type, language, transport, rating and duration options to ensure users can easily find and suit their needs.
Then, tours are shown as cards, including the title, description, guide/creator name, descriptive icons and "Save" and "View" buttons.
Tour Preview & View after payment
When a tour is selected from its respective "View" button in the card, it redirects to a Preview of the journey with a map and the content *restricted*.
A mobile view and a "Get the App" pop-up is shown as it reinforces the usability and the goal of the app, which is providing the content on-the-way.
Users can read reviews from other users and read more about the guide who created the content before proceeding to payment through a sticky "Pay" button.
Once the payment has been completed, the user will gain unlimited access to all the content, with different media option and translate button to play the same content. A sticky section with every Stop of the journey is at the right so it's easily to click and follow the content.
Architecture
For website hosting, we leverage Firebase Hosting service, ensuring a straightforward and secure deployment process. Firebase takes care of SSL certificate provisioning for all domains, eliminating the need for manual configuration.
Addressing our core requirements of user and tour data storage, we opt for Firebase's non-relational database, Cloud Firestore, efficiently handling data in JSON format.
For multimedia file storage within tours, we utilize an object storage system, Cloud Storage, accessed via specific URLs corresponding to file locations.
Firebase handles user authentication seamlessly, with Firebase Auth offering various authentication methods and generating a UID for each authenticated user.
Additionally, within the Google Cloud platform, we integrate Google Maps APIs, enabling interactive map functionalities, location searches, and route planning.
One significant advantage is the automatic scalability of services, ensuring resources are dynamically allocated, eliminating the need for manual provisioning and guaranteeing continuous availability for our application.