Discover
Personalize Travel Plan
To better understand our target user's needs, we implemented three phases in our research:
1. Competitive Analysis
2. Surveys
3. Interviews
1.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.
Then we take a close look at how competitor websites are designed.
Wonderplan: Filtering & UX Writing
Tripadvisor: Details about attractions
OpenAI: Modern AI website with a dark vibe
Airbnb/Expedia: Designing search box
These help us make our website easier to use and understand.
2.Surveys
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.
3.Interview
In the next step, we did interviews to figure out:
1. How we can 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 individuals discover attractions and what detailed information need about them.
Define
Meet the User
After conducting interviews, Tara, a user persona was identified for travel planning. Tara is a photographer with a passion for traveling the world and capturing stunning photos. The website will be designed based on the Persona's needs and preferences.
How Users Navigate Our Site?
Through card sorting, we gained insights into how to organize the various sections of our website, allowing us to create the initial version of our site map. However, as the design process progressed, including user testing and competitive analysis, the final version of the site map was developed and refined.
Mapping The User Journey
The journey Tara takes to explore the website and plan her next trip.
Design
Sketches
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.
Mid-Fidelity Design
Challenges & Solutions:
After thoroughly analyzing our research data and understanding users' needs and challenges, we focused on finding ways to address their concerns through our design. Here are the potential solutions we developed:
Challenge 1:
Because our platform offers multiple features, our initial challenge was to make it clear to users what it does and how they can navigate it easily.
Solutions:
We created a search box in the hero section that highlights all the platform's capabilities, allowing users to find what they're looking for quickly.
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 ensuring users understood they could customize the AI travel plans. Users needed to know that the recommended plans weren't set in stone and that they could change them as they liked.
Solutions:
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 AI-generated activity plan so they could decide if they were interested in it.
Solutions:
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.
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.
MoodBoard
UI Kit
Color Accessibility:
The contrast between the foreground and background colors of the primary and secondary buttons was tested on websites that evaluate color blindness, ensuring their acceptability.
Testing
Usability & Iteration
Phase 1
We crafted several homepage variations in the initial design phase, 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. Considering this, we selected the final version for further development in subsequent stages.
Phase 2
We conducted testing with 10 participants, each participant was assigned a 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. We designed the final version through iteration and feedback to make it easier for users to navigate.
Version 1 before usability
Version 3 after usability
Version 2 after usability
Final version after usability
Phase 3 (A-B Testing)
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.
In another round of A/B testing, we created two versions of 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.
Self-improvement UI iterations on “Homepage”
Deliver
Reflection
What did I learn?
Balancing what users want with what stakeholders need for marketing.
During the project, I improved at technical skills like using AI algorithms to give users personalized recommendations.
Communicating well with team members and guiding them 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.
