COLAB15 - WEB APP

TravelBuddy

TravelBuddy is a web app that allows travellers to collaboratively plan their itineraries, all in one place.

Summary

TravelBuddy is a web app that allows travellers to collaboratively plan their itineraries, all in one place. TravelBuddy asks users to input details about their trip, and provides relevant itinerary ideas that match with the group’s inputs.

With TravelBuddy, travellers can vote on activities that they’d like to add to the itinerary, giving the group an easy, informative and gamified method to trip planning. 

Problem Background 

Trip planning contains several moving pieces: booking flights, finding accommodations, choosing itineraries, managing budgets, and more. In 2015, Expedia explained that customers visit an average of 38 sites on average before booking - and this is just for flights and accommodations - imagine activities! Additionally, 52% of Americans highlighted that they prioritize the time they devote to travel research over all the other factors in the booking process. 

Travel is complicated to book, and consumers have so many choices. 

Travel apps do exist, like Travefy and Splitwise, however they are targeted toward travel professionals, or other pain points such as splitting expenses. There are no platforms that assist with consolidated and collaborative itinerary planning. 

Problem Statement

Research Highlights 

The endless websites and constant research create emotional pain points for users, as they may spend hours building the perfect itinerary, creating feelings of stress and anxiety, and reducing the pleasure associated with planning a trip. In fact, 64% of survey respondents agreed that they dread the travel planning process, and “virtually-exploring” the destination prior to visiting. 

Take a look at some user insights that further highlighted some pain points:
- “I really don’t enjoy researching about the places to visit”
- “I don’t enjoy when we can’t decide and have different opinions”
- I hate how long the research takes, there’s no single place to find everything, you have to use multiple sources (TikTok, Google, Eater, etc)

On the other hand, these are some user insights that showcase what made their previous trips so successful and memorable:
- “The people I was with:) planning together with friends is so much fun - I like the collaboration aspect, so you can get excited together!”
- “Proper planning for sure”
- “Planned with a group, took the stress off of one person” 

Solution Explanation 

The key driver of our solution is collaboration. We created a platform that allows users to plan their trips alongside their friends, and with the voting functionality, users can ensure that there is fairness across the board. 

All users that have not previously used the app are prompted to register using a First Name and Email address. The group admin, or user one, creates a trip on the app by entering the destination, start date, and end date. Once the trip is saved, the admin is able to invite friends to the group via an invite link. Once all TravelBuddies have joined the group, the admin can initiate the “Voting” period. Now, all TravellBuddies of the group are able to view itinerary ideas for the inputted location, and must cast 3 votes on their favourite itinerary ideas. Once all Travellers have casted their votes, all TravelBuddies can see which itinerary items were highest ranked within the group. 

Lo-Fi Wireframe 1
Lo-Fi  Wireframe 2
High Fidelity 1
High Fidelity 2
High Fidelity 3

Design Iterations  

After user testing we added some microinteractions and graphic elements to our prototype, such as swipes for onboarding screens, color identifications of bottom states and logotype so users better understand and navigate the product.

Iteration 1: Microinteractions

As some users pointed out that the interface is sometimes overwhelming, we’ve switched to the concept of clean design and decluttered the interface, softly navigating and informing users. We’ve reduced color usage, number of elements on one screen, revisited our texts in order to make the product as simple for the user as possible at this stage.

“The simplest way to achieve simplicity is through thoughtful reduction.” - John Maeda, The laws of simplicity

Iteration 2: Declutter 

We’ve reworked the concept of voting after users’ feedback and replaced it inside a trip card without adding an additional tab specifically for voting. That saved space in designs and made it more logical for users as now all information about the trip is stored in one place.

Iteration 3: Voting

Design Handoff for Developers

For better communication a design system was created with comments about certain interface elements and their values, that helped the team to stay aligned.

Handoff

Implementation Details

Travelbuddy’s frontend currently sits in one of netlify’s awesome servers. Deploying on netlify is a breeze, most people who have used the solution would share a similar experience. 

Travelbuddy’s backend was built on using Nestjs and Postgresql for the database service. We chose this stack considering scalability,efficiency and control over data types.

The backend service was hosted using Digital Ocean, which allows the frontend developers and users to connect to the backend and access the different features of the application.

We chose a web app considering its relative ease of access, and the individuality of our engineering team. NextJS & typescript was an easy choice as our frontend UI library due to its performance and type safety. The user interface architecture is centered around reusability (components that are used in multiple screens are composed to smaller units) and extensibility (components are flexible enough to allow extending new properties & attributes).

The hardest part of development has to be staying up late for meetings to align product and development, also time spent writing code and debugging.

Our application is hosted on-cloud, so we do not foresee major scaling issues

Future Steps 

With our user testing and research, we were able to identify future features to be added. Some examples are: 

  • Adding a feature that allows accurate geographical distance between each user and the trip location
  • Adding a feature that allows for the itinerary items to be displayed in a calendar function, completing the end-to-end planning process
  • Minor customizations to each trip such as adding a group name, a variable number of votes per traveller, and more. 

We also spoke with many users about expanding beyond the travel planning process, and into the travel inspiration space. With this, we would dive further into inspiring beginner travellers to get out there, and explore the world! Potential features could look like: 

  • Create a “favourites” tab of itinerary ideas that users find interesting. This would inspire users to book a new trip, and they could refer to this list when building future itineraries 
  • A community feature, where users can view trips that other travellers have completed. After completing a trip, travellers can add reviews about what they liked, what stood out, and choose to make it publicly available. This would inspire and inform others, when planning a trip for the same destination! 

Learnings

Product Manager Learnings:

Sanaa Kahloan

Building a 0 to 1 Product taught me a lot about the grit and consistency required to be a successful PM. 

  • Prioritize ruthlessly, scope flexibly: Especially when building from 0 to 1, it is crucial to understand that you will not accomplish all the features you’ve brainstormed, and that’s okay. Your MVP will change, and grow into the Product you’ve envisioned, however you must be realistic with yourself in regards to your team’s skill level and time constraints. That’s what iterations are for! 
  • Communicate early and often: I’ve learned the importance of consistent communication. Facilitating the right communication practices (stand-ups, retro’s, etc.) heightens the entire team’s learning experience and progress. 
  • Invest time in understanding the problem space: User research should never end, and it is up to the PM to ensure you are creating a solution to a problem that actually needs solving. It’s easy to get excited about building something, but you must share your ideas with potential customers, do the research on what people need, and ensure your solution is fulfilling that gap. 

Designer Learnings:

Mariia Kraisman

My key learning was about understanding how the collaboration between designer and developers work. That has taught me a lot. 

  • How to structure Figma file so that you can find an object you are asked about easily
  • A simple design system is a must even in a small project or MVP as it help to handoff designs faster
  • Build proper connections between screen so that it would be crystal clear for everyone

And the most pleasant part - in this team I finally felt as a designer, my opinion was important and taken into consideration. That is an amazing feeling that I am going to take with me from Co.Lab experience.

Designer Learnings:

Jo Sturdivant

  1. Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
  2. Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
  3. Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Ayodeji Akinborewa

Being involved in building the product from 0 was a unique experience. In my time in Co.Lab, I learned:

  • Setting up a scalable frontend architecture and tooling to help collaborative development. 
  • How to communicate with people from different backgrounds, experiences, and within different timezones.
  • Overall, coming together to build something has been a wonderful experience, and I am very thankful for it. 

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

Chukwuemeka Nkwo

&

My time in Co. Lab and working with my team-mates taught me a lot like

  • I learnt how to collaborate and work with team-mates in different timezones and this has been an experience i had always wanted
  • Give me deeper understanding of the backend architecture 

Developer Learnings:

Maurquise Williams

&

  1. Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
  2. Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
  3. Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning

As a team, we learned the importance of effective asynchronous communication. Given that our team comes from different areas of the world and time zones, strong communication is a must when engaging in frequent sprints and a short deadline. This means ensuring all team members are engaged in having a clear understanding of the product idea and priorities, and feel empowered to ask questions and raise issues as early as possible.