Project Overview

Wayfarer is an AI-driven travel platform that inspires and guides users in discovering new destinations and providing personalized traveling plans. This project focuses on designing a user-friendly and visually engaging homepage to enhance the user experience.

Wayfarer - Travel Homepage UI Design

Responsibility

  • UI Design

  • Visual System

Credits

Personal Project

Timeline

  • 5 Weeks

  • Spring 2025

  • Users struggle to find key travel details due to disorganized content and unclear section prioritization.

  • Users feel disconnected from the platform’s text-heavy homepage.

  • Users struggle to find relevant destinations, and the platform cannot provide enough information, leading to frustration.

Problem

  • A structured layout using bold headlines, proper spacing, and grid-based alignment with key sections ensures users can quickly access content.

  • Clear the immersive page sections with high-quality travel imagery, organized hierarchy, and clean features to spark curiosity.

  • More multi-step preference forms allow users to input their information and collect the information from users.

Solution

Goals

Homepage Design: Inspire Exploration at First Glance

The homepage is the first impression of Wayfarer and the primary way users explore the platform. I aimed to create a visually engaging and easy-to-use experience that helps users find destinations quickly.

I focused on clear navigation, well-structured content, and standout CTA buttons to do this. So, key features here include a large hero image to grab attention, social proof to build trust, and a clean, grid-based layout that makes browsing smooth and enjoyable.

To enhance personalization, I want to design multi-step forms that efficiently collect user preferences. I divided choices into simple steps to improve engagement and minimize text input.

Clear progress indicators may reduce frustration, and this design can predict options and eliminate confusion. This structured approach would attract users and may simplify trip planning and guide them toward Wayfarer’s customized travel recommendations.

Multi-Step Questionnaire: Personalized Travel Recommendations

I looked at the homepage designs of Expedia and Airbnb to understand different content structures. Expedia offers a wide range of products, making its homepage rich but complex. In contrast, Airbnb focuses on customized and appealing content to create a more curated experience.

Wayfarer provides AI-driven, personalized travel services, so my goal here is to showcase products simply and effectively while ensuring an easy-to-follow questionnaire and registration process. This method may improve usability and help users quickly access tailored travel recommendations without feeling overwhelmed.

Research

Wireframes

Structuring Clear and Engaging User Flow

I sketched low-fidelity sketches to establish content structure. The aim is to finalize frameworks so that users can quickly catch key information. For the multi-step form, I focus on clear yet delightful interactions and sketching ideas that balance usability and accessibility before refining and testing the effectiveness.

Visual Design

Iterating a Cohesive and Engaging Brand Identity

Color System: Balancing Technology & Warmth

  • The primary colors I chose here are light and deep blue to represent technology and AI, which also can align with Wayfarer’s tech-driven approach. The secondary colors are soft red and pink, which is a complementary color to blues. I wish to add warmth and contrast to enhance visibility, particularly in CTA buttons. CTA buttons should avoid neutral tones, making interactions intuitive and accessible.

Gradients: Smooth and Modern Feel

  • I put gradients here with smooth transitions and a futuristic feel without appearing too mechanical. Then, I imagine that when users use the Nav Bar, Hero section, and section dividers, a rhythmic flow across the page may increase visual interest and depth to them.

Icons: Simplifying Information

  • I love my icon design here. Icons help explain complex ideas simply and clearly. For example, in my icon design process, "Our advanced AI algorithms analyze your preferences and travel history to suggest unique travel destinations," "AI algorithms" and "suggest" were visually highlighted in the icon to make the idea more straightforward to understand. So, I designed the icon(the first one on the left) to convey this brief meaning.

Typography: Modern, Clean, and Readable

  • I selected typography that combines Schibsted Grotesk for bold clarity and Inter for smooth readability. Both sans-serif fonts share a modern, geometric structure, ensuring a clean, tech-forward look ideal for a travel platform. Their clear letterforms may improve navigation and create a flawless reading experience.

Multi-step Design

Interactive prototype to the questionnaire-based forms

The Multi-Step Design in this section includes four forms to gather user preferences and data for AI-powered travel customization. In the final stage of the project, I intentionally designed a content hierarchy to prioritize inputs and optional selections so that the form could maintain a clear flow. Each step guides users progressively to ensure clarity, engagement, and ease of completion, leading to a smooth final submission process.

Results

A Brand-Driven UX Approach

After working on this project, I realized it was more than just designing a homepage. It was a chance to explore branding, user experience, and interaction design. As a personal project, I more focused on creating clear navigation, a well-structured layout, and intuitive interactions for an AI-powered travel platform. This experience helped me better understand visual identity, multi-step form usability, and CTA design to make the user journey smoother and more friendly.