Overview

Simplifying & enhancing group travel planning experience with an intuitive mobile app

Everyone enjoys travelling whether it is exploring new destinations, connecting with loved ones, or taking a break from the everyday work. But travel planning can often be frustrating and stressful, especially when you're in a group. After intensive user research, UX/UI design, and development, we have built a mobile app for group travel planning by making it more fun and collaborative, reducing the information overload and simplifying the overall process. The project, as a part of 1.5 years of MSc in Creative Digital Media and UX from TU Dublin, allowed us to enhance our UX skills while continuously improving the MVP via user testing.

Objective - Simplification

To simplify the process of planning a trip

The Away App offers an intuitive and user-friendly platform with minimum necessary functionalities to plan a group trip. The intention is to reduce the number of steps required to create a flexible trip itinerary. Since we want the experience to be stress-free and intuitive, our interface takes inspiration from their existing mental models of commonly used apps. It allows multiple ways to accomplish a task, without the need to memorize the steps to perform a task.

Objective - Collaboration

To make group travel planning a collaborative experience

When a single person is given the task of planning the entire trip for the group, it can be overwhelming for them to make all the decisions, incorporate everyone's preferences, and avoid raising a conflict with any member. Our app allows multiple group members to modify and suggest decisions within a single trip plan in real time, thereby sharing the workload of planning the trip. They are able to invite their friends to join a trip. They can add places to the group's itinerary and wishlist, and chat with each other to discuss their travel plans which will help in reducing the number of communication channels required to plan a trip.

Objective - Digestible

To reduce information overload and help users find places to visit

A centralised hub of travel related content so that users won't have to leave the application and hop on to multiple platforms to look for the perfect travel destinations. The authenticity of content will allow users to place more trust in them and thus make quicker decisions. Taking a step further, the curated selection of editorial content will be re-formatted into a custom template that would extract the necessary information such as location data and present them to our users. This will transfer the effort of extracting data from travel articles from the users to the software. It'll help in reducing the cognitive effort required to read multiple articles, and help them make quicker decisions.

Objective - Personalisation

To allow users to personalise their profile & make personal collections

The Away App allows users to create a profile that will store their personal information such as their name, profile picture, and other details. It also allows them to create a travel board of places they want to visit. They can also create a list of their favourite places. This allows them to enhance their travel experiences and help them plan their future trips.

Problem Identification

Based 20+ interviews, communication, coordination, and consensus in a group travel were major problems

Through interviews and listening, we identified a number of pain points that our users require us to solve in our design. These include diverging preferences, information overwhelm, miscommunication and time wasted when planning a group trip.

Some of the questions we asked people were:

• Why do you generally travel? Why do you enjoy it?
• What problems have you recently faced when travelling?
• What problems do you face when planning a trip?
• Do you feel group trip planning is stressful? If so, why?
• How do you decide where to travel?

Some of the common responses we received:

• Different people in a group have different preferences.
• Group decisions are difficult to organise and manage.
• Overwhelming amount of travel information out there.
• Coming to a consensus is difficult.
• Building a travel itinerary is a tedious task.

Problem statement: People travelling in groups need a simple and efficient application in order to coordinate with group members and ensure they are satisfied with the trip itinerary.

UX Stage 1: Initial Ideas

At first, we set out to resolve multiple problems with travel planning. We were so wrong.

Using FigJam's digital whiteboard, we employed 'Crazy 8s' to categorise user treatments and created sketches across Pre-Trip, During Trip, and Post-Trip stages. Ideas ranged from an algorithm-based preference page to a detailed explore page featuring travel guides and vlogger profiles. During the brainstorming phase, we maintained a broad focus, later refining our concepts based on user feedback. Realising some ideas required technical expertise beyond our scope, we conducted further interviews, identifying group travel planning as a primary concern. This led to a valuable lesson: focusing on core issues rather than attempting to solve every problem.

UX Stage 2: Building User Personas

Based on UX Research, we identified 3 personas: Trip Organiser, Tripmate, and Solo Traveler

UX Stage 3: Competitor Analysis

Studying how similar travel planning apps worked helped us identify the gaps in their offerings

TripAdvisor, Wanderlog, Lambus, and Culture Trip were our main competitors offering solutions to travel planning. After thorough study, testing, and reviews we identified their strengths, interaction patterns, visual design, and areas of improvements. While we were inspired by some of their features like high quality content and itinerary builder, we realised that there was overwhelming content, complexities, and inconsistent experience.

UX Stage 4: Low-Fidelity Paper Prototype

Sketch prototypes allowed us to refine interactions quickly without caring about design or content

Using smartphone mockups, we sketched mobile frames, added static UI elements with placeholder content, and incorporated interactive layers with sticky notes and colour-coded paper. The resulting paper prototypes were scanned, imported into Figma, and connected to simulate interactions. User testing in the college libraries revealed positive feedback on the trip planning features, with some challenges identified in the explore section's navigation and wishlist integration.

UX Stage 5: Low-Fidelity Digital Prototype I

Users liked multiple features for planning but demanded simplicity and clarity in navigation

We transitioned from raw prototypes to our first digital prototype in Figma, focusing primarily on refining the trip plan creation process. The user flow for this stage involved landing on the Explore page, moving to the Trips page to add a new trip, filling out the trip details form, entering the chat section to discuss and decide on a place, exploring recommendations within the trip, adding a poll, and finalizing the plan section.

Feedback highlighted the need for clarity in the trip details form, questions about adding friends, and a desire for an app-free trip planning option. Users appreciated the ability to explore destinations without leaving a trip plan but expressed confusion about the labelling of "Explore" in navigation.

UX Stage 6: Paper Prototyping Session

Moderated user testing made us realise the complexity involved in existing prototype sketches

We conducted intensive user testing sessions using highly detailed paper prototypes to refine both the Explore and Plan sections of our group travel planning application. Moderated user testing sessions provided valuable insights.

Key learnings from the user testing sessions included the importance of providing context and task lists for users to comprehend detailed sketches. Users, unfamiliar with travel planning apps, took time to establish a mental model. Silent observation of behaviour patterns and encouraging users to think out loud proved helpful in understanding their experience. The prototypes were perceived as complex, prompting the realisation of the need to balance necessary features and hide unnecessary ones until required.

UX Stage 7: Low-Fidelity Digital Prototype II

To tackle complexity, we just had to focus on the user flow of adding places to the itinerary

We transformed our detailed paper prototype sketches into a low-fidelity digital prototype, focusing specifically on enhancing the user flow for finding destinations, exploring them, and seamlessly adding them to the itinerary. Feedback on this highly focused user flow was positive, highlighting its usability, navigation, and intuitiveness. Users appreciated the concept of the 'Saved List' for decision-making and suggested adding indications of which user added each location to consider everyone's preferences. The approach of focusing on a simple micro user flow to understand how users complete a single task proved effective.

UX Stage 8: Low-Fidelity Digital Prototype III

Once the primary user flow was resolved, we designed features for exploring travel content and personalisation

We expanded our low-fidelity digital prototype by detailing the Explore, Trips, and Profile sections. Employing Google's Material Design Guidelines, UX psychological laws, and fundamental design principles, our focus was on creating a minimalist, usable, and aesthetically pleasing experience aligned with our refined user persona.

The user flow for this stage included actions such as exploring the Explore section, creating travel boards in the Profile section, and initiating a new trip in the Trips section. Detailed steps involved searching for destinations, saving places, and navigating through different sections to plan a trip.

User testing conducted in cafeteria settings received positive feedback, with users expressing satisfaction with the prototype's ability to alleviate the stress of planning a group trip. Feedback suggested enhancements, such as category tags for places and articles, improved navigation options, and clarifications on certain features.

UX Stage 9: High-Fidelity Digital Prototype

Creating a design system & figma UI prototypes helped us reduce development time by over 60%

The process began with establishing a brand identity that reflects adventure and exploration for travel enthusiasts. A mood board was created, encompassing typography, colours, photographs, and iconography. A design system was established within Figma, drawing inspiration from Google's Material Design system. High-fidelity wireframes were created using the design system and component library. A minimalist layout with ample white space, clear spacing, and distinguishable interactive elements was focused on.

Feedback included preferences for top title navigation, saving articles in the Explore section, displaying full addresses in the Android version, adding multiple locations in the trip details form, editing trip details after submission, and options to save and share trip plans.

Building a Data Model

Mapping out the data flow helped us resolve data complexities before developing UI components

Since our app had a complex relationship between different datasets, we had to map out the data model. This helped us understand the relationships between different datasets and how they would interact with each other. We also had to consider the limitations of the database we were using and how we could optimise the data model to work with the database. Collaborative features were possible with sharing datasets between users.

Mobile App Development

Focusing on developing key features without styling helped us iterate & validate UI quickly

After the UX/UI was completed to a certain stage, we started developing it. After technical research & evaluating capabilities, we decided to go for React Native, Expo, and JavaScript for Frontend and Firebase for Backend. We developed the most important features to test the main use cases without applying any styling. After usability testing and validation, we applied the final styling and refined the overall UX.

Feedback & Iteration

Simplifying nested navigation & creating multiple ways to add places improved task completion

After conducting usability testing with 20+ users, we discovered that people had difficulty in creating an itinerary and wishlist because of complex navigation, unclear prompts, and lack of multiple pathways. So, we redesigned the user flow by simplifying the navigation, using clear words, and creating a modal to allow them to quickly add places to either itinerary or wishlist or both, resulting in an intuitive interaction.

Use Case

Users can create a group trip by inviting their trip-mates and entering trip details

Use Case

User adds one place to their wishlist and to a day in the itinerary within a trip

Primary Use Cases

Users build their group trips with itinerary planner, wishlist, and a group chat

Secondary Use Cases

Users explore destinations, customises their profile and save their favourite places to their travel boards

Quantitative User Testing

53.8% of participants felt they completed the task of creating an itinerary very quickly

Towards the final stages of the development process, we introduced a questionnaire to gather quantitative feedback. This method facilitated remote testing with users which enabled us to gather a larger number of responses in a short amount of time. We designed the questionnaire using Google Forms, including five questions based on the System Usability Scale (SUS).

61.5% of users rated the application as useful while 38.5% of users rated it as very useful, signifying a positive response to the applications usability. 53.8%, felt they completed the task very quickly, while an additional 30.8% reported achieving the task quickly. Among all features, the map garnered the highest number of respondents voting it as a very useful feature, with 18 votes. However, it's noteworthy that all 26 respondents voted either very useful or useful for the itinerary, underscoring its pivotal role in the application. 53.8% of users rated the app as very satisfying, while 30.8% rated it as useful, indicating a high overall satisfaction level among the respondents.

Design Stage - Challenges & Lessons

Design challenges emphasised research, consistency, and user-centric feature prioritisation

User-Centered Design
Ensuring that the app's design aligns with the diverse needs and preferences of users was a continuous challenge. The lesson learned was the importance of conducting thorough user research to understand user behaviors and preferences.

Information Architecture
Organizing and presenting a vast amount of travel & trip plan information in an intuitive and user-friendly manner presented challenges. The lesson here was to prioritize clear and concise information presentation.

Visual Consistency
Maintaining a consistent visual identity throughout the app, including fonts, colors, and imagery, was challenging. The lesson was to create a detailed style guide to enforce consistency.

Navigation Design
Creating an intuitive navigation structure that accommodates multiple features and content areas was challenging. The lesson was to continually iterate on navigation based on user feedback.

Balancing Functionality and Simplicity
Striking the right balance between offering advanced features and keeping the user interface simple and easy to use was a challenge. The lesson was to prioritize features that truly enhanced the user experience.

Development Stage - Challenges & Lessons

Development challenges emphasised prioritisation, integration, and optimization

Feature Prioritization
Determining which features to develop first and which ones to postpone or omit was a constant challenge. The lesson was to align feature development with the core user needs and project goals.

Third-Party Integrations
Integrating external services and APIs required careful planning and often involved unexpected challenges. The lesson was to thoroughly research and test third-party integrations.

Complex Data Model
Creating a robust and scalable data model to support the app's features was a challenge. The lesson was to plan and design the data structure before starting development.

Performance Optimization
Balancing performance with rich functionality was an ongoing challenge. The lesson was to employ efficient coding practices and continuous performance testing.

User Feedback Integration
Effectively incorporating user feedback into development without causing delays or scope changes was a challenge. The lesson was to implement structured feedback channels and prioritise user-driven improvements.