Redesigning a Travel Planner with AI
Building Smart Features and Scalable Systems from the Ground Up
AI
Mobile App
Company / Product Summary
This mobile-first trip planning app serves modern travelers looking for intuitive tools to plan and personalize travel experiences. Initially built as a static itinerary viewer, the app offered limited flexibility. As competition increased and generative AI matured, the team set out to reinvent the product as an intelligent travel assistant capable of dynamically creating itineraries, suggesting experiences, and refining plans through natural conversation.
To support this shift, the product required a complete UX overhaul - not just visually, but structurally. New interaction models were needed to accommodate conversational flows, real-time content updates, and multi-modal navigation across chat, map, and timeline views. At the same time, the design had to remain intuitive for users unfamiliar with AI tools. This meant rethinking how users discover, edit, and trust AI-generated plans - while ensuring the system remains flexible, transparent, and easy to override.
AI Integration
Designed UX to support multi-step AI queries, clarifications, and system states (“thinking”, “suggesting”, “fallback”).
Aligned UI with AI confidence levels and failure modes.
Component System
Built modular Figma components with auto-layout and naming synced to React structure.
Maintained parity via Storybook integration.
Tokens & Design System
Introduced semantic tokens for color, spacing, motion (e.g., delay.ai-typing).
Ensured consistent behavior across chat, map, and card views.
Accessibility
Met WCAG AA standards: keyboard nav, screen reader support, contrast compliance.
Testing
Prototypes tested via UserTesting.com and staging.
Focused on AI reliability, flow clarity, and edge case handling.
Users & Audience
Targeted at independent, experience-driven travelers aged 25–40 — including remote workers, solo travelers, and tech-savvy couples. These users often plan international trips lasting 3–10 days. They want tailored suggestions without spending hours researching or managing spreadsheets. Most are mobile-first users, expect personalization, and are open to AI assistance — but only if it feels trustworthy, optional, and clear.
The Problem
The existing product wasn’t scalable or intelligent - users could manually build trips, but not explore, adapt, or receive suggestions based on context or interest. AI had the potential to unlock hyper-personalized, dynamic planning, but the legacy UX was incompatible. The project aimed to redesign the app to:
Seamlessly integrate conversational AI into core user flows
Build flexible systems that adapt to AI outputs
Create a design foundation that could scale alongside AI capabilities
My Role
As Senior Product Designer, I was hired to lead the integration of AI features and to modernize the entire UX system to support a new planning paradigm. I focused on:
Designing all AI-driven experiences end-to-end
Auditing and rebuilding the component system from the molecular level
Establishing scalable design tokens and accessibility standards
Aligning the design with product and AI strategy through weekly working sessions
Collaboration included:
Product manager (feature prioritization and AI capabilities)
AI integration lead (data flows, prompts, system behavior)
Frontend engineers (component integration and accessibility)
Researcher (usability testing and behavioral analysis)
Design lead (design system alignment)
Discovery & Product Audits
Conducted a full UX and flow audit, mapping where users dropped off or hit friction (especially in trip creation, editing, and sharing).
Ran a component inventory audit to flag inconsistencies, duplicates, and missing states.
Led AI readiness workshops with product and AI leads to understand limitations (e.g., prompt structure, latency, fallback behavior).
Mapped current state information architecture, identifying gaps in navigation, state management, and hierarchy.
Testing, Research & Iteration
Designed and tested early low-fidelity wireframes using usertesting.com to validate AI chat use cases and edge-case scenarios.
Prototyped and tested AI chat interactions to gauge user expectations around tone, transparency, and control.
Created variants for visualizing AI outputs (timeline vs. map vs. card format) and tested comprehension and engagement.
Facilitated weekly working sessions with engineering and AI teams to align on structure, feasibility, and data states.
Design System: Foundation & Integration
1) Introduced molecular design principles to rebuild the UI from the ground up:
Atoms: Color tokens, type scale, spacing, shadows, interactive states
Molecules: Input groups, trip cards, filter chips, chat bubbles
Organisms: Day planners, editable itineraries, map views, AI response threads
2) Created a robust design token system:
Semantic tokens for accessibility (e.g., color-bg-surface-primary, color-text-muted)
Sizing tokens with mobile-first breakpoints
Motion tokens to standardize loading, transitions, and chat feedback
3) Integrated all new components into Figma libraries and built a centralized documentation hub using Notion + Storybook references.
4) Collaborated with devs to implement Figma ↔️ code parity for consistent naming, props, and states.
Designing AI Experiences
1)Designed multi-modal AI interactions, allowing users to plan via chat, card selection, or map overlays — depending on their preference.
2)Built flexible flows for:
“Start from scratch” trip planning via chat
“Add to trip” using AI suggestions contextualized by location and preferences
Iterative refinement (“Make this day more relaxing”)
3)Designed AI feedback patterns:
System typing indicators and “thinking” states
Explanation layers (“Why this recommendation?”)
Undo, refine, and escalate controls
4) Created error and fallback UX to handle AI limitations (e.g., ambiguous requests, timeout, unsupported destinations).
Accessibility Improvements
Updated color palette to pass WCAG AA contrast standards.
Ensured all interactive components were:
Keyboard navigable
Properly labeled with aria-roles
Compliant with focus management and screen reader structure
Introduced dynamic text resizing, voiceover testing, and ensured all animations could be disabled for motion-sensitive users.
Outcomes & Learnings
Quantitative Results:
AI chat usage grew to 65% of all planning sessions within 30 days
42% decrease in average time-to-itinerary compared to the legacy flow
35% reduction in front-end bugs related to inconsistent component states
Achieved full WCAG AA compliance for all new screens
Qualitative Learnings:
AI wasn’t just a feature, but it changed how users thought about planning. We had to reframe the app around “conversational exploration” instead of “task completion.”
Trust and transparency were essential - users needed to feel they could challenge or refine AI suggestions at any time.
The modular design system allowed the dev team to ship new features 2x faster and reduced regressions significantly.
Accessibility and performance improvements were not just compliance efforts: they led to visibly improved usability for all users.
Working sessions between design, AI, and engineering led to fewer handoff delays and stronger technical alignment across sprints.
TL;DR – What I Brought to This Project:
Led AI integration for the entire product UX, from conversation logic to fallback flows
Rebuilt the product’s design system using molecular principles, scalable tokens, and documentation
Conducted audits, testing, and collaboration rituals that made the product more intelligent, inclusive, and scalable
Selected work
[2022 -2025]
