SoraPath AI

CASE STUDY

AI-Powered Travel Planner

THE PROBLEM

Breaking Tab-Hell: Designing a Unified Workspace for Travel Planning

How I designed and hand-coded a responsive, AI-powered travel workspace to turn a chaotic, multi-tab planning process—juggling maps, blogs, and spreadsheets—into a single, cohesive interface

. Built using React, Tailwind, and Python to solve real-world cognitive fatigue validated by budget solo travelers.

SoraPath AI

An AI-powered travel planner that creates personalized itineraries in minutes.

MY ROLE

Solo Product Designer & Prototype Engineer

stack

Figma, React, Tailwind, Python

AI RECOMMENDATIONS

Living Root Bridge

3.5km from Center · 4.4/5.0

BUDGET OVERVIEW

Total estimated cost

₹ 31,324

AI Recommendations

Personalized attractions based on your travel style and preferences.

Smart Budgeting

AI-powered cost estimation and budget breakdown in real-time.

Optimized Routes

Intelligent route planning for the best travel experience.

Personalized Itineraries

Day-wise plans crafted around your interests and pace.

All-in-One Planning

Everything you need, in one AI-powered platform.

Scroll to explore the full journey

SoraPath AI

CASE STUDY

AI-Powered Travel Planner

THE PROBLEM

Breaking Tab-Hell: Designing a Unified Workspace for Travel Planning

How I designed and hand-coded a responsive, AI-powered travel workspace to turn a chaotic, multi-tab planning process—juggling maps, blogs, and spreadsheets—into a single, cohesive interface

. Built using React, Tailwind, and Python to solve real-world cognitive fatigue validated by budget solo travelers.

SoraPath AI

An AI-powered travel planner that creates personalized itineraries in minutes.

MY ROLE

Solo Product Designer & Prototype Engineer

stack

Figma, React, Tailwind, Python

AI RECOMMENDATIONS

Living Root Bridge

3.5km from Center · 4.4/5.0

BUDGET OVERVIEW

Total estimated cost

₹ 31,324

AI Recommendations

Personalized attractions based on your travel style and preferences.

Smart Budgeting

AI-powered cost estimation and budget breakdown in real-time.

Optimized Routes

Intelligent route planning for the best travel experience.

Personalized Itineraries

Day-wise plans crafted around your interests and pace.

All-in-One Planning

Everything you need, in one AI-powered platform.

Scroll to explore the full journey

SoraPath AI

CASE STUDY

THE CATALYST

A $250 Trip to Meghalaya That Took 2 Months to Plan

How a real budget planning crisis exposed the massive fragmentation in travel tools

01 THE PERSONAL SPARK

I planned a budget solo trip to Meghalaya . But the planning process was exhausting. I spent weeks jumping between YouTube videos, Google Maps, local homestay blogs, and Excel sheets to calculate route distances and costs . Drowning in cognitive fatigue, I realized travel planning is fundamentally broken and decided to build SoraPath AI to solve my own friction.

02 VALIDATION OVER JARGON

Instead of inventing fake, over-polished user personas for the sake of academic completeness, I ran deep Q&A sessions with 3 real solo budget travelers. Their feedback confirmed my pain point was universal: travel planning is broken because users are forced to manually bridge the gap between separate, disconnected tools just to make a single cost-or-time decision.

KEY INSIGHT

Travel planning wasn't hard because of one problem. It was difficult because users had to switch between multiple disconnected tools before making a single decision.

This insight shaped the foundation of SoraPath AI to simplify, automate, and manually bridge end-to-end traveler experience.

DECISION STORY 1

Designing for Information Density

How I structured a modular, three-pane layout to solve "tab-hell" while preventing cognitive fatigue.

01

02

03

01

PLANNING ZONE

Set the foundation for your trip.

  • Trip Preferences

  • Summary Cards (Cost, Distance, Duration, Best Time)

02

DECISION ZONE

Make informed travel decisions.

  • Route Overview (Map)

  • Budget Breakdown

  • AI Recommendations

03

EXECUTION ZONE

Plan your days with confidence.

  • Nearby Suggestions

  • Itinerary Snapshot

  • Weather Outlook

ONE UNIFIED WORKSPACE

From research to ready-to-go plan, SoraPath AI keeps everything organized so you can focus on the journey, not the planning.

DECISION STORY 2

Demystifying AI through Financial Transparency

How I designed an interactive, real-time budgeting engine that transforms AI planning from a mysterious 'black box' into a transparent, user-controlled collaborator.

Our AI analyzes your trip, destination costs and preferences to build a realistic and optimized budget plan.

BUDGET BREAKDOWN (MEGHALAYA TRIP)

The Trust Deficit (The Friction)

The AI Trust Problem During my 3 user Q&A sessions, I discovered a major psychological barrier: travelers don't trust automated AI recommendations because they don't understand the financial math behind them. They worry about hidden costs, expensive transport estimates, and unrealistic homestay prices. To build a product users would actually trust, the UI had to provide immediate, visual proof of how every Rupee is allocated.

The Budget-Comfort Slider (The Solution)

The Interactive Budgeting Engine To solve this, I designed and coded an interactive budgeting engine. Instead of forcing users to accept a static cost estimate, I introduced a responsive 'Budget vs Comfort Level' slider. Moving the slider dynamically recalculates the entire itinerary in real-time—instantly swapping high-end homestays for budget-friendly rooms and private cabs for shared transport, while keeping the user in full control.

Real-Time Verification (The Loop)

Immediate Visual Feedback I mapped the slider's parameters directly to a live, categorized pie chart. This gives travelers total financial transparency over their expenses (Transport, Stay, Food, Activities) at a glance. By allowing users to visually verify how their choices impact their wallet, SoraPath AI reduces checkout anxiety and drives higher booking intent.

HOW I OPTIMIZED THE BUDGET

1. User Intent Capture

Designing lightweight, friction-free input forms to collect travel style preferences

  1. Real-Time Processing

Leveraging Python on the backend to dynamically parse destination seasonality and travel modes

  1. Smart Resource Mapping

Structuring the UI layout to instantly adapt when budget-conscious parameters are triggered

4. Frontend Integration

Coding the responsive comfort sliders in React to ensure zero-latency visual feedback

5. Frictionless Handoff

Outputting a beautiful, shareable, budget-aligned itinerary ready to print or book

DECISION STORY 3

The Functional Evolution: Low-Fi Logic to React Code

How I used iterative wireframing to map out multi-state system layouts, and translated Figma components directly into a responsive, hand-coded React frontend.

Design is an evolution.

Each iteration brought us closer to a solution that is simpler, smarter and more delightful for the user.

1. Homepage

Introducing the product value and key actions.

LOW FIDELITY WIREFRAMES

2. Planner (Unloaded)

Structuring the planning workspace and flow.

3. Planner (Loaded)

Presenting the final plan in a comprehensive dashboard.

Refined Layout

Clear value proposition, better hierarchy and focused CTAs.

HIGH FIDELITY WIREFRAMES

Improved Hierarchy

Persistent sidebar, clear steps and better information architecture.

Added AI Features

Rich dashboard with map, insights, budget summary and day-wise itinerary.

01

Homepage Clarity

Slashed layout clutter to prioritize a clean value proposition and a single-action search input, helping users start planning in under 3 seconds.

02

Empty-State Guidance

Designed an intuitive 'unloaded' dashboard using helper prompts to onboard travelers and explain exactly how the AI starts building itineraries.

03

High-Density Coding

Translated the complex, 3-pane loaded layout into responsive React/Tailwind flexboxes, ensuring map and budget views scale smoothly on mobile.

DECISION STORY 3

The Functional Evolution: Low-Fi Logic to React Code

How I used iterative wireframing to map out multi-state system layouts, and translated Figma components directly into a responsive, hand-coded React frontend.

Design is an evolution.

Each iteration brought us closer to a solution that is simpler, smarter and more delightful for the user.

1. Homepage

Introducing the product value and key actions.

LOW FIDELITY WIREFRAMES

2. Planner (Unloaded)

Structuring the planning workspace and flow.

3. Planner (Loaded)

Presenting the final plan in a comprehensive dashboard.

Refined Layout

Clear value proposition, better hierarchy and focused CTAs.

HIGH FIDELITY WIREFRAMES

Improved Hierarchy

Persistent sidebar, clear steps and better information architecture.

Added AI Features

Rich dashboard with map, insights, budget summary and day-wise itinerary.

01

Homepage Clarity

Slashed layout clutter to prioritize a clean value proposition and a single-action search input, helping users start planning in under 3 seconds.

02

Empty-State Guidance

Designed an intuitive 'unloaded' dashboard using helper prompts to onboard travelers and explain exactly how the AI starts building itineraries.

03

High-Density Coding

Translated the complex, 3-pane loaded layout into responsive React/Tailwind flexboxes, ensuring map and budget views scale smoothly on mobile.

DESIGN SYSTEM

Building a Consistent Design Language

A scalable design system that keeps every screen consistent, accessible, and easy to expand across the product.

Built with design tokens, reusable components and clear guidelines to ensure a seamless experience for users and faster iteration for me.

COLOR PALETTE

Semantic & Neutral Colors

Primary

Primary

#16A34A

Hover

#00692C

Light

#AAD351

Muted

#169B48

Dark

#032D1A

Neutrals

White

#FFFFFF

Off-White

#F5F5F5

Charcoal

#111827

Muted Text

#64748B

Border

#E5E7EB

Symantics

Alert

#DC2F33

Warning

#C98A1C

Info

#1E67B9

Purple

#6C5DA3

Alert BG

#FCF1F0

TYPOGRAPHY

Sora for Headings (H1,H2) * Inter for everything else

H1 Heading

Sora • 60/70 • Bold

H2 Heading

Sora • 48/56 • Bold

H3 Heading

Inter • 46/49 • SemiBold

H4 Heading

Inter • 38/42 • SemiBold

H5 Heading

Inter • 32/38 • SemiBold

H6 Heading

Inter • 26/30 • Medium

H7 Heading

Inter • 22/26 • Medium

B-1 (Body Large)

Inter • 18/24 • Regular

B-2 (Body Base)

Inter • 16/24 • Regular

B-2 Medium

Inter • 16/24 • Medium

B-3 (Body Small)

Inter • 14/18 • Regular

B-4 (Caption)

Inter • 12/18 • Regular

B-5 (Tiny)

Inter • 10/15 • Regular

Button Text

Inter • 14/18 • SemiBold

Label / Tag

Inter • 14/18 • Medium

Chip / Tag

Inter • 12/15 • Medium

DESIGN PRINCIPLES

Consistency

Unified visual language across every screen for a seamless experience.

Scalability

Reusable tokens and components make it easy to build and extend features.

Accessibility

Clear typographic hierarchies, high-contrast semantic colors, and a soft charcoal base (#111827) to prevent eye strain during extended travel planning sessions

Modularity

Flexible components and layouts that can be mixed, matched and adapted anywhere.

Reliability

Design decisions that support clarity, error prevention and user trust.

DESIGN SYSTEM

Building a Consistent Design Language

A scalable design system that keeps every screen consistent, accessible, and easy to expand across the product.

Built with design tokens, reusable components and clear guidelines to ensure a seamless experience for users and faster iteration for me.

COLOR PALETTE

Semantic & Neutral Colors

Primary

Primary

#16A34A

Hover

#00692C

Light

#AAD351

Muted

#169B48

Dark

#032D1A

Neutrals

White

#FFFFFF

Off-White

#F5F5F5

Charcoal

#111827

Muted Text

#64748B

Border

#E5E7EB

Symantics

Alert

#DC2F33

Warning

#C98A1C

Info

#1E67B9

Purple

#6C5DA3

Alert BG

#FCF1F0

TYPOGRAPHY

Sora for Headings (H1,H2) * Inter for everything else

H1 Heading

Sora • 60/70 • Bold

H2 Heading

Sora • 48/56 • Bold

H3 Heading

Inter • 46/49 • SemiBold

H4 Heading

Inter • 38/42 • SemiBold

H5 Heading

Inter • 32/38 • SemiBold

H6 Heading

Inter • 26/30 • Medium

H7 Heading

Inter • 22/26 • Medium

B-1 (Body Large)

Inter • 18/24 • Regular

B-2 (Body Base)

Inter • 16/24 • Regular

B-2 Medium

Inter • 16/24 • Medium

B-3 (Body Small)

Inter • 14/18 • Regular

B-4 (Caption)

Inter • 12/18 • Regular

B-5 (Tiny)

Inter • 10/15 • Regular

Button Text

Inter • 14/18 • SemiBold

Label / Tag

Inter • 14/18 • Medium

Chip / Tag

Inter • 12/15 • Medium

DESIGN PRINCIPLES

Consistency

Unified visual language across every screen for a seamless experience.

Scalability

Reusable tokens and components make it easy to build and extend features.

Accessibility

Clear typographic hierarchies, high-contrast semantic colors, and a soft charcoal base (#111827) to prevent eye strain during extended travel planning sessions

Modularity

Flexible components and layouts that can be mixed, matched and adapted anywhere.

Reliability

Design decisions that support clarity, error prevention and user trust.

Reflection & Future Vision

Every product is a journey of learning, iteration and growth. Here's what I learned while building SoraPath AI and where it's heading next.

1. BIGGEST CHALLENGES

Designing for Information Density

Balancing a single-screen dashboard integrating maps, interactive timeline cards, and real-time budgets without causing cognitive fatigue

AI with User Control

Preventing the AI from feeling like a rigid 'black box.' I had to design transparent controls (like the Comfort Slider) so users collaborate with the AI rather than blindly trusting a static output

Building a Recommendation Engine

Formulating a scalable logic to parse travel preferences and map API variables, ensuring that complex itineraries load without layout shifts

Maintaining Consistency

Aligning my high-fidelity Figma component library directly with custom Tailwind CSS variables to guarantee visual parity during frontend coding

2. KEY LEARNINGS

Users do not trust blind automated suggestions. Designing clear, real-time interactive feedback loops (like the budget pie chart) is what actually builds product trust

Hand-coding the responsive layouts in React made me a better designer. Understanding container rules forced me to structure highly disciplined Figma systems

A rigorous design system prevents layout tech-debt. Grounding SoraPath’s interfaces on strict tokenized variables saved me weeks of frontend implementation time

Structural spatial hierarchy is the ultimate UX solution. Correctly dividing the workspace into distinct planning, decision, and execution zones solves planning anxiety better than any layout animation

3. FUTURE ROADMAP

PHASE 1

Foundation

Hotel Booking APIs

  • Flight Integration

  • Detailed Destination Database

  • Currency & Visa Info

Short Term

PHASE 2

Collaboration

Collaborative Trip Planning

  • Shared Itineraries

  • Group Budgeting

  • Real-time Sync

Mid Term

PHASE 3

Intelligence

Real-time Weather Adaptation

  • Live Budget Tracking

  • Offline Mode

  • Smart Notifications

Long Term

PHASE 4

AI Evolution

Multi-city AI Planner

  • AI Travel Assistant

  • Voice-based Planning

  • Predictive Suggestions

Future Vision

AI ENHANCEMENTS IN FOCUS

Smarter recommendations with personalization

Conversational AI for trip planning

Real-time data for better decision making

Context-aware suggestions across the journey

PROJECT AT A GLANCE

Role

Product Designer & Full-Stack Developer

Duration

Jan 2026 – June 2026

(6 Months)

Platform

Desktop-first

Web Application

Tools & Technologies

Figma, React, Tailwind, Python, FastAPI, OpenAI, Gemini, Map APIs, JSON Data

Focus Area

Product Design, AI Recommendation Engine

, Itinerary Generation

My Contribution

End-to-end product design,

AI system architecture,

Frontend implementation & Backend APIs

SoraPath AI was designed to transform travel planning from hours of fragmented research into one intelligent, personalized experience.

Designed & Developed by

Sourav Haldar

Crafting meaningful experiences that solve real problems

Thank You

Thank You

Thank you for taking the time to explore the SoraPath AI case study.

I hope this gives you a clear picture of how research, design thinking, and AI can come together to build meaningful travel experiences.

Create a free website with Framer, the website builder loved by startups, designers and agencies.