Project Summary

This project focused on enhancing a travel app by implementing a centralized trip feature, redesigning the homepage for greater user personalization, and ensuring UI consistency across the app.

My role was to lead the design efforts, adapting the app to provide a seamless, engaging user experience that supports travelers in organizing, accessing, and managing their trip details efficiently, from planning stages through to completion. The design changes aimed to boost user engagement and satisfaction by offering a visually appealing and easy-to-navigate interface.

🌧️ Problems

Lack of Centralization in Trip Planning Users face significant challenges with scattered trip-related information, lacking a centralized platform to organize and access details such as hotel / experiences and personal notes. This disorganization leads to a cumbersome and stressful planning process.

Need for a More Personalized User Experience Travelers require a platform that not only stores their information but also proactively assists in managing their itinerary, upcoming trips, and reminders in a user-friendly and engaging manner.

🎉 Solutions & Contributions

Comprehensive Trip Management in Native App To address travelers' pain points, we built a trip feature where users can add all bookings to their itineraries, whether booked with us or elsewhere, including customized events. To improve the experience, we added a notes section for users to add personalized information for each event. Users can also edit trips and explore stays and activities. Events can be organized with drag-and-drop cards and viewed in more detail on a map. Booking with Travelpass takes just two steps, enabling quick travel planning.

Enhanced User-Centric Homepage I We added personalized trip info, recommendations, and trip reminders on the home page. To increase engagement, we included larger images, quick access to explore more stays and experiences, and one-click access to their trip details.

UI Consistency Update Across the App I redesigned the rest of the pages to match the home page's focus on larger images and a minimalistic look, creating a consistent and visually appealing experience throughout the app.

User Personas

Wireframe

When Planning Trips, user needs...

• Centralized Planning

• Flexible Trip Planning

A floating 'Add' button enables quick item addition, enhancing planning flexibility.

Immediate access to trip dates, locations, and booked hotels and activities, all in a single glance. (Centralized Planning)

Integrated search allows users to find Travelpass inventory items (hotels and experiences)or create their own custom entries. (Flexible Trip Planning)

For example, users can search for hotels available in Travelpass's inventory.

• Distance Clarity: Users should easily see the distances and relationships between locations on their itinerary, either on a map or through displayed data, with the list showing the distance in miles between places.

• Reminders and Notes: The ability to add personal reminders or notes to bookings or activities for improved trip management.

• Booking Visibility: Users need clear information on whether activities or accommodations are booked, with easy access to booking options for a smoother trip planning process.

A feature that allows users to visualize all the locations related to their trip on a map, helping with spatial planning and proximity assessments.

Booking and Customization: Users can book directly from the app, with indicators for booked and custom events. Notes can be typed in each added items

Navigate to the event immediately from the itinerary.

What Users Want On The Home Page of a Travel Management App

• Personalization and relevance

The homepage enhances personalization by displaying the user's name and trip countdown (e.g., "Pack your bags, Elizabeth! Your trip to NYC is in 13 days").

It includes practical details like weather and travel dates. Large image (background and trip cards)sparks excitement and guide attention to key information.

I identified that users needed an efficient way to access upcoming trip . By adding trip cards on the home page for immediate access, users can easily swap cards to see what's upcoming and click the 'See All' button to view all planned travel.

• Easy access to upcoming trip details, including destinations and dates.

See all upcoming and past trips on the My Trip page (click 'See All' to access this page).

Color Palette

How did I add value?

My design streamlines trip planning with an intuitive interface. Integrated geographical locations aid decision-making, while a two-step booking process boosts conversion rates. Users can manage events, access booking details, customize events, and add notes during travel.

Design

Communication

Business

Our communication with developers and QA is smooth and transparent, enabling seamless collaboration within our remote team toward our shared goal of creating a product we’re proud of. I successfully delivered the final designs for the trip feature two weeks ahead of schedule.

Since its launch, the trip planning feature has been actively used by Travelpass employees, providing valuable testing and feedback. This internal adoption has allowed for iterative improvements, ensuring the product evolves to meet real user needs effectively. These insights have been crucial in refining the platform, enhancing its usability and preparing it for a successful external rollout.

Trip Feature Integration

The trip feature allows users to plan trips effortlessly, both before and during their travels. Travelers can create and customize trips, including naming them, adding hotels, experiences with TravelPass, and custom events. In the future, they'll also have the option to share their trips on social media.

Add Event

Drag & move events

Slide event to delete

By clicking the PLUS icon on the timeline, users can add hotels, events, and customize their trip timeline. When users search for accommodations, they can choose a hotel from TravelPass or use the Google API.

See events on map

By clicking the Map icon on the timeline, users can click through pin to see event details.

Benefits:

This feature allows users to see the proximity of their selected hotels or experiences to the trips they have added.

Benefits:

One modal fits all 3 kinds of events. The feature allows users to easily add any event they want on a single modal. User can also see the recommended events that Travelpass offers.

Drawers

This is a summary of the booked events. Users can quickly see an overview of the event information, and if they need to see the full details, they can click "view details."

Trip feature integration leads to a 20% increase is sign-ups.

Benefits:

Quick glance on the info of their bookings, allow users adding notes to be reminded what not to miss before the start time. We want users to feel that they have everything they need on the event when they open one of these drawers.

Trip timeline

Add stays

Booked hotel drawer

Experience pin highlighted

Users can choose to add hotels or experiences to the timeline and also book them through Travelpass when they are on the drawer page.

Hotels drawer (no booked yet)

Experiences drawer (no booked yet)

Design Solutions

I've upgraded the UI with larger, captivating travel images and added personalization features for different users, such as displaying user profile photos, the latest trip status, a CTA to create a trip, and tailored recommendations on hotels and experiences to enhance user exploration.

Home Page Redesign

Reduced project costs by delivering ahead of schedule, achieving a 2-week lead time.

Consistency in App UI

Align the rest of the app pages with homepage design, ensuring a modern and adventurous UI style (adding more imagery) throughout all pages.

Experience Detail Page Slide-In: This occurs when users click on one of these cards.

Hotel Detail Page Slide-In: This occurs when users click on one of these cards.

View all city experiences: Shows city-specific recommendations when users click the button.

Display the timeline of the upcoming tripwhen the user selects one of the upcoming trip cards.

Hotel search + book

Prototype

< Search hotel

Press hotel card then transition to hotel details.

Hotel map search >

Map search to view different pricing

Experience search + book

Experience Data Comes from ...

All Travelpass Experiences are curated using activities and experiences from Viator.

Ask the AI chatbot for questions related to your travel.

QA discussions with the developer

During this process, we discovered the necessity of trimming certain functions to enhance user experiences. It involves exploring various solutions that will optimally serve both UI and UX in an app.

For instance, the discussion depicted in this screenshot revolves around reducing the number of background images to six to expedite app loading.

Voting for the images that we believe will best suit the homepage.

Where is your next adventure ?