Personalized Travel Plan

To better understand our target user's needs, we implemented three phases in our research:

1. Competitive Analysis
2. Surveys
3. Interviews

Then, we conducted a survey to understand what users want and how they behave. This helps us make products and services that focus on their needs, making sure they're at the center of everything we do.

So, we created a survey using Google Forms and distributed it to around 100 individuals who could be potential users, asking them to fill it out.

Surveys

Competitive Analysis

First by comparing other websites that offer similar services like recommendation AI plans, we learned several valuable insights:

• Determine what unique value propositions we offer to stand out from the competition.

• Wonderplan: Filtering & UX Writing
  Tripadvisor: Details about attractions
  OpenAI: Modern AI website with a dark vibe
  Airbnb/Expedia: Designing search box

Interview

In the next step we did interview to figure out:

1. How can we foster trust in AI and encourage travelers to connect with others, sharing their activities and experiences with a travel companion.
2. How they respond to similar platforms and what their expectations are from similar platforms.
3. How do individuals discover attractions and what detailed information need about them.

Then we take a close look at how competitor websites are designed.

These help us make our website easier to use and understand.

Define

Persona

Site Map

User Flow

Design

We begin our low-fidelity frames with hand sketching to visualize our ideas and enhance communication within our team.
Following this, we create mid-fidelity wireframes to outline our page layouts and grid system. We then engage in several rounds of iterations before finalizing the content.

Sketches

Mid-Fidelity Design

Challenges & Solutions

Challenge 1:
Because our platform offers multiple features, our initial challenge was to make it clear to users what the platform does and how they can navigate it easily.

Solution 1/1:
We created a search box in the hero section that highlights all the platform's capabilities, allowing users to quickly find what they're looking for.
Solution 1/2:
We designed an interactive animation after the hero section to guide users through the necessary steps based on their needs.

Challenge 2:
The next challenge was making sure users understood they could customize the AI travel plans. Users needed to know that the recommended plans weren't set in stone, and they could change them as they liked.

Solution 2:
We've made each activity card closable and draggable, featuring an easy interaction icon (Up & Down). Plus, we've introduced a filter system, allowing users to refine their options and find what they need more easily.

Challenge 3:
Our challenge was to provide users with more information about each activity plan generated by AI so they could decide if they were interested in it.

Solution 3:
We categorized the information based on user preferences and provided the most important ones upfront for users to see at first glance, while displaying other details such as more pictures, ticket prices (if applicable), reviews upon clicking each activity.

Home Page

Travel Plan Page

Activity details PopUp

UI Design Direction

While creating a mood board, we also incorporated the Material Design system for icons and other elements. This ensured consistency and coherence throughout the design process.

Testing

Usability & Iteration

Phase one

In the initial design phase, we crafted several homepage variations, which were subsequently tested with users. Following user testing and iterative adjustments, our findings from eye-tracking research revealed that users typically follow either a Z or F pattern. Taking this into account, we selected the final version for further development in subsequent stages.

Phase Three (A-B Testing)

1. After sketching various designs for the search box in the homepage hero section, which serves as the website's primary search feature, we developed two versions of the high-fidelity prototype. Subsequently, we utilized user feedback from A-B testing to refine and finalize the design. It was found that 80% of the users were able to navigate through Version B and complete their given tasks without any mistaken clicks, accomplishing the task 50 seconds faster than with Version A.

2. In another round of A/B testing, we created two versions for the sharing feature on the website. Through this process, we discovered that having "Share" as a call-to-action (CTA) was more convenient for users to access compared to using it solely as an icon. Out of 8 users, 5 preferred the version with "Share" as a CTA.

Version One

Final Version

Phase Two

We conducted testing with 10 participants, each participant was assigned task to complete:

• Task: Users were instructed to utilize the AI planning feature to generate a personalized itinerary for their upcoming trip.
  They started on the homepage. After scrolling down to explore the platform, they looked for a search option to find their AI plan. Through iteration and feedback, we designed the final version to make it easier for users to navigate.

Version one

Version two

Version three

Final version

Self-improvement UI iterations on “Homepage”

Final

Deliver

Reflection

What did I learn?

• Balancing what users want with what stakeholders need for marketing.

• During the project, I got better at technical skills like using AI algorithms to give users personalized recommendations.

• Communicating well with team members and guiding through tough situations.

• The most valuable lesson I learned during this project was not fixating on being right from the beginning, but rather embracing the learning process and adapting as you progress.

What can we do next?

We can enhance trip planning by creating a "My Trip" page where users can access all their trip options. Also evaluating the current design and testing it with elderly users to check accessibility.