Wayfarer - Travel Homepage UI Design (Mobile)

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.

Responsibility

  • UI Design

  • Visual System

  • Icon Design

  • Branding

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

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

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

  3. 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 serves as Wayfarer’s brand identity and user entry point. I aimed to create an immersive, intuitive experience that quickly guides users. I ensure users can easily explore destinations by optimizing navigation, content hierarchy, and CTA placements.

Key features include a visually striking hero section, social proof for credibility, and a structured layout that balances aesthetic appeal with usability. A grid-based design enhances clarity, making travel discovery cohesive.

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

Clear progress indicators reduce frustration, while predefined options eliminate confusion. This structured approach keeps users engaged and simplifies trip planning, guiding them effortlessly toward personalized 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 personalized and engaging content, creating a more curated experience.

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

Research

Wireframes

Structuring Clear and Engaging User Flow

I sketched rough layouts to establish a clear and intuitive content structure. The aim is to finalize frameworks so that users can quickly grasp key information. For the multi-step form, I focus on clear yet engaging interactions, sketching ideas that balance usability and accessibility before refining and testing their effectiveness.

Visual Design

Color System: Balancing Technology & Warmth

  • The primary colors, light, and deep blue represent technology and AI, aligning with Wayfarer’s tech-driven approach. The secondary colors, soft red and pink, complement the blues, adding warmth and contrast, particularly in CTA buttons to enhance visibility. CTA buttons avoid neutral tones, making interactions intuitive and accessible.

Iterating a Cohesive and Engaging Brand Identity

Gradients: Smooth and Modern Feel

  • Gradients add smooth transitions and a futuristic feel without appearing too mechanical. Used selectively in the Nav Bar, Hero section, and section dividers, they create a rhythmic flow across the page, enhancing visual interest and depth.

Icons: Simplifying Information

  • 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 into the icon to make the idea more straightforward to understand.

Typography: Modern, Clean, and Readable

  • I selected typography 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 enhance navigation and create a seamless reading experience.

Multi-step Design

Interactive prototype to the questionnaire-based forms

The Multi-Step Design includes four forms to gather user preferences for AI-powered travel customization. As the final stage of the project, the design prioritizes content hierarchy, balancing essential inputs and optional selections while maintaining a clear flow. Each step guides users progressively, ensuring clarity, engagement, and ease of completion, leading to a smooth final submission process.

Results

A Brand-Driven UX Approach

This project was more than just designing a mobile homepage. It was an exercise in branding, user experience, and interaction design. As a personal project, it focused on designing a clear navigation flow, structured content hierarchy, and intuitive interactions for an AI-driven travel platform. Through this process, I deepened my understanding of visual identity, multi-step form usability, and CTA optimization, ensuring a smooth and user-friendly user experience.