COLAB14 - Web App

Trippin'

Web App that’s gonna facilitate your trip itinerary planning. You plan. I help. We trippin’.

Problem Background  

Since the pandemic took a hold on our lives, many people had to hold off on their traveling, visiting family and friends and their vacations. Now a couple of years later, we are starting to see more people traveling more often than they would to make up for the “lost time” during the pandemic. However, planning trip itineraries with friends and family can be challenging, to keep everyone on track and make sure everyone knows where they are going and what they are doing at the destination. 

Gen Z and millennials are on the rise of traveling and they are very tech savvy. There is a lack of traveling technology apps that provide good itinerary planning and collaboration features to make every travel planner satisfied. We are here to bridge that gap and make traveling go as smoothly as possible so it feels like vacation since day 1. 

Research Insights & User Pain Points

By running a survey, we identified crucial pain points and then decided to do 3 interviews to help us develop further information. We found that our user pain points are: they don’t like searching for things to do once they’re at their destination, there is a lack of collaboration from others going on the trip, they want to be able to create a trip with fewer tabs with not having to go back and forth from looking at directions on maps, and our users do not like searching for destinations using different applications or tools. 


Feedback

To validate this problem with travelers traveling in groups, there needs to be an all in one application so people do not feel overwhelmed while planning and traveling. Trippin’ will allow users to easily share the trip once created to allow others in the group to participate in helping plan the trip, to create a detailed trip in advance so they can enjoy their time when traveling, give users the estimate time distance in between places automatically when added to the itinerary table, and users will be able to search for destinations in the same application with Google map integration.

Landing on the Solution

Based on our target users’ pain-points, we learned what were the parts of the itinerary planning process they thought were inconvenient and added extra time to be done. Thinking of that, the team brainstormed many ideas that could help solving the users’ problems, but we had to pick and prioritize the ones that were feasible with the time we had to build it and that would enable us to achieve the goals for the MVP.

  • Lessen the level of annoyance for the inconvenience of going back and forth to add information on the itinerary;
  • Help travelers spend less time on their itinerary planning (average time spent 8-9 hrs, take time down by at least 20%);
  • Tailor the user experience and features to travel information;

Explanation of the Solution

Trippin’ is a webapp that facilitates and makes it more convenient for users to plan and put together their trip itinerary, and collaborate in that planning with their travel buddies.

Tippin’ has 3 key features that we are launching with:

  1. Itinerary creation - When a user starts a new itinerary, they will input their trip info such as: name the trip, add destination + start and end dates, invite people to collaborate (if it’s a group trip). This will generate their itinerary page, where they can find and edit all that information, invite more people and put together the detailed itinerary with places they’ll be visiting day by day.
  1. Google maps integration - This feature will provide the map visualization of places and provide the time distance in between them, to help users plan with more efficacy how much they can do every day. 
  1. Collaboration - The collaboration features we have come up with will have to be implemented in parts because of time constraints we have available to work. For the first release, users that have been invited to participate in the itinerary will be able to view the plans. The idea in the future is to have them being able to make edits, have a live chat within the app and have a real-time live editing visualization (like we have on figma!).

Lofi & Hifi Mockups

Iterative Design Learnings

After moving from the Lofi to Hifi screens, we showcased and tested our prototype with users and got some encouraging feedback, showing that Trippin’ is taking the right path to achieve our goals. Described as friendly/fun, easy to use and functional/convenient, 100% of testers said that they would like to use Trippin’ to plan their next trip.

Some iterations related to the UI and UX have also been implemented after the rounds of testings based on the users’ feedback, such as the sign up/sign in process, the discoverability to add more than one place in the daily itinerary activities and information hierarchy.

Technical implementation

Where is it hosted? 

What is your tech stack?

  • Frontend: The client-side of the application is built with React, React Router,  Redux, TailwindCSS.
  • Backend: The API was built with Laravel, PHP, PostgreSQL database to persist user data, Eloquent ORM.


Technical challenges

What was the hardest part of development?

  • The hardest part of developing the Trippin’ project was implementing the collaboration feature for multi users, where a trip/itinerary could  be shared with other users to collaborate on it. Also figuring out how to implement the feature for editing and auto saving modes was a technical challenge because it was our first time implementing such a feature. On the frontend side, we had a challenge of building the PWA for iPhones as Apple does not natively support PWA out of the box on iPhones.

Does your app have any scaling issues?

  • Because we do not have a significant number of users now, we currently do not have any scaling issue.  But of course, as the app grows, challenges with data caching, database primary and foreign key indexing as well as background jobs for some features will be considered.

What are some key takeaways?

  • The key takeaways from working on Trippin’ had been learning new things in Laravel and using Eloquent ORM and above all how to integrate Google Maps API for realtime autocompletions. Also, working in a cross-functional team requires high-level communication between the developers, this is one thing we have learnt and will keep improving as developers. Making sure your team knows what features you are managing and when you reach a dead end is critical if you are to move forward as a team.

Future Steps

The team hasn’t decided about continuing or not the project yet, however we learned from speaking with our customers how Trippin’ is a good tool for the travelers who like to plan and map out their trips, as well as collaborate with their group to put together an itinerary that everyone enjoys. It provides convenience to the planning process and lessens the time spent on it.

If the team does decide to continue, we have already considered many ideas to refine the experience of what we have now and keep improving the product, adding more features to facilitate the user’s itinerary creation and planning, to provide a more in depth and seamless experience for Trippin’s users.

Learnings

Product Manager Learnings:

Natalia Lopez

Co.Lab was an experience that I am so grateful I got the opportunity to do. This experience helped me gain product management experience and what it is like, but it also helped me grow as a teammate.

I truly learned the importance of teamwork. People in my team taught me how to be a better communicator and teammate and I am truly grateful for that.

I learned that communication needs to happen within the whole group to make sure things are getting done effectively and everyone is on the same track. My technical skills have improved and I gained knowledge from the designers and developers!  

Designer Learnings:

Marcela Meira

Co.lab was a growth experience for me, as a designer and as a team member! I had the opportunity to improve and hone my technical skills, but above that, I had the opportunity to find myself being successful as a professional working in a collaborative environment.

I learned the importance of frequent communication, not only to keep the work flowing, but also to make sure everyone in the team is being heard, understood and included in the discussions, decisions and plans.

I have also learned a lot about prioritization when constraints arise during a project development.

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:

David Asem

Colab did not come without its challenges. These past eight weeks, I’ve been able to improve myself in numerous aspects which includes contributing more to idea brainstorming, working with the designer to communicate the technical feasibility of certain features within the timeframe we had and effective task prioritization.

I have also improved in time management and making myself available for important team discussions. I have also gained more experience in working with a diverse team across different time zones.

Communication is also one aspect I have been able to improve in during the program, I now feel better about explaining the technical aspects of building software with non-coders and not having to think they won’t really understand.

Technically, I have been able to try different technologies and concepts that are new to me and used them to achieve the desired result after discussing with senior engineers such as our mentor and other senior engineers. Also, we’ve been able to achieve end-to-end (server-to-client) integration.

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:

Wasiu (Shina) Abdulmaleek

&

The experience I have gained after signing up for Colab is far more than I expected. Within the duration, I have been pushed beyond my limits. I have gained new skills and have picked up new skills as well.

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

The biggest team learning was how to communicate is important. That’s the way we have to understand, to empathize and help each other. By communicating we can keep the work flowing, discuss changes, compromise and go in different directions when needed.