Automated Itineraries in Under 7 Minutes
AllorAI • Product Designer • Dec. 2025 - Feb. 2026
Desktop App
Travel & AI
Hackathon
Hackathon: 2nd Place
AllorAI (pronounced Allora AI) is a travel planning application featuring a specialized AI agent that generates personalized itineraries. The platform streamlines the planning process by tailoring travel suggestions to each user's unique interests and preferences.
As my first hackathon experience, I entered with a mix of anticipation and a strong drive to challenge my design limits. The event was hosted by Gridiron Survivor, an apprenticeship program that equips self-taught designers and developers with essential work experience to help them succeed in tech. Supported by sponsors like GitKraken, Frontend Mentor, and Zephyr Cloud, the hackathon mirrored a real-world production environment. Throughout the event, the 2 participating teams took part in recurring live presentations and sprint demos, which provided a platform to showcase our iterative design process and receive cross-functional feedback.
The efforts of my team resulted in us earning 2nd place, validating our user-centered approach. More importantly, the experience sharpened my ability to design with AI workflows, bridge the gap between design and code, and deliver a production-ready concept under tight time constraints.
Team
Bradley Diep | Designer
Monica Shin | Designer
Tony Briely | Developer
Jeremy Fischer | Developer
Hector Suazo | Developer
My Role
Product Design
Product Research
Tools
Figma
FigJam
Adobe Illustrator
Google Workspace
Figma MCP
Visual Studio Code
GitHub
Research
Problem
How do we design a desktop app with an AI travel agent that helps users build their own itinerary?
Users are generally hesitant to let AI take control of their travel plans because of the lack of transparency in its recommendations.
Planning a trip is a high-stakes financial and emotional investment.
Goal
What do we accomplish through this project?
Make the AI feel like a competent assistant rather than just a "search bar with a personality".
Guide the user through one decision at a time and prioritize the user's subjective preferences.
Alleviate the stress of trip planning.
Pain Points
Planning Becomes a Chore
Even with AI tools, travelers often find themselves with dozens of open tabs trying to check flight prices and cross-referencing hotels to stay at. The process of planning a trip feels like a part-time job rather than something exciting to look forward to.
Outdated Logistics
AI might confidently suggest a location to travelers that may actually be under construction, closed for years, or much more costly than anticipated.
Algorithmic Funneling
AI tends to recommend the most "popular" spots because they appear most frequently in its training data. This means travelers can miss out on some amazing experiences and "hidden gems".
Competitor Analysis
To inform our design strategy, we conducted a competitor analysis of existing travel applications. This helped us understand the current market and provided a strategic foundation for our own design decisions.
After researching our competitors, we decided that our app should focus on balancing AI integration with user agency. Therefore, we needed to design where and how much AI would be involved in the trip-planning process. Our goal was to ensure the AI assists rather than dictates, while providing transparent, budget-conscious options that adapt to each traveler's unique priorities.
Early Designs
Low-fidelity Designs
With my fellow designer, Monica, we ideated and sketched various interface concepts to define the app’s visual and functional direction.
Mid-fidelity Designs
After synthesizing our initial sketches into mid-fidelity wireframes in Figma, we met up with the developers on our team to evaluate technical feasibility. The discussions we had regarding scope and resource constraints led us to prioritize a Minimum Viable Product (MVP) focused on a core user flow: planning a simplified trip with the assistance of Allora, our AI chatbot. By iterating closely with the developers, we balanced our creative goals with functional limitations to establish a structural foundation for AllorAI.
The following wireframes represent our refined iterations, showcasing the final structural decisions before moving into high-fidelity design.
Landing Page
Selling Points:
The landing page features 3 cards that display Allora AI’s core value propositions, immediately introducing users to the platform's unique benefits.
Input Form:
Below the selling points is an input form that helps narrow down the trip-planning process by having users input important parts of their trip like the destination and dates.
Chatting with Allora
Once users submit their input form, they will begin chatting with Allora to determine their trip budget priorities. Allora acts as the principle travel agent that helps users plan their trip step-by-step. By emulating text conversations, Allora is positioned as an assistant.
Allora:
On the left side of the chat, Allora summarizes the users' choices and instructs them on next steps.
The Users:
On the right side of the chat, users select choices on flights, lodging, and other preferences based on what they want to focus their budget on.
Selecting Experiences
When users are finished planning their flights, lodging, and trip budget, they'll move on to planning the rest of their trip by selecting experiences they want to encounter.
Experience Filters:
Users can click on different filters to see specific experiences rather than all the results.
Experience Cards:
Showcase general information on each experience in a condensed but briefly informative format.
Budget Overview:
Helps users keep track of what they’re spending on (flights, hotels, pinned experiences).
Travel Tips:
Allora provides information about the destination for additional knowledge and precautions.
Logo Design
Logo Design Process
I used Google Gemini to get inspiration for a couple logo ideas to define the branding of AllorAI.
Prompt:
“Generate different versions of a logo named Allora AI".
Prompt:
“Make the logos have a travel theme".
From the logos that were generated, I decided to choose the one on the top right as the basis for AllorAI's logo and created some variations in Adobe Illustrator.
AI-Generated Logo Choice
AllorAI Logo (Final Version)
To reinforce the brand’s travel identity, the final logo features a plane flying around a globe. By blending terrestrial tones of blue and green with a dynamic gradient, the design evokes a sense of world exploration and high-tech sophistication to mirror the 'intelligence' of a modern AI assistant.
AllorAI Logo Variations
Final Designs
Style Guide
We extended the logo’s color palette throughout the UI and paired it with minimalist sans-serif typefaces. This combination establishes a modern, high-tech aesthetic that aligns with the AI-driven nature of the platform.
Header Typeface
Montserrat
Body Typeface
Figtree
High-fidelity Designs
While the designs remained functionally consistent with previous iterations, some of them underwent significant refinements, and additional screens were added to better support the user journey.
Landing Page
To enhance the accuracy of the AIlora’s recommendations, we refined the input form to require airport codes and a destination city. Moving away from the "from" and "to" fields reduces search ambiguity, allowing Allora to generate more precise travel results.
Allora Chat Messages
To provide clear visual cues during the chat, we implemented state-driven colors: previous messages transition to indigo, while active prompts are highlighted in turquoise to show that they are interactive.
Selecting Experiences:
Filters to Tabs
Why the Tab Change:
To streamline the browsing experience, we transitioned from filter buttons to a categorized tab system. This provides a much cleaner interface for discovering experiences, making the options feel organized rather than overwhelming.
Tab Counter:
To provide immediate visual confirmation, each tab includes a dynamic counter. When a user pins an experience card, the corresponding tab reflects the selection in real-time (Ex: Activities 1). This serves as a reminder of their choices and ensures all selections are automatically synced with the budget overview.
Review Page
Upon completing the trip-planning process, users are directed to the Review Page. After entering a custom name for their trip, they are presented with a detailed summary of their selections. This serves as a vital validation step, ensuring every selection perfectly aligns with their travel goals and budget.
Saved Trips Page
By logging in, users can view their saved trips. Each trip is easily identified through key metadata, including a cover image, trip title, travel dates, and the original planning date.
To maintain focus on the MVP, advanced features like editing and sharing remain as planned future enhancements. A known limitation in our current MVP causes trip duplication for users who save an itinerary without logging in first.
Handoff & User Testing
Designer Handoff
To streamline the handoff, we provided detailed annotations for every finalized screen to clarify functionality. To accelerate development during the hackathon, we implemented an AI-assisted workflow using the desktop Figma MCP (Model Context Protocol) server to bridge the gap between design and development.
By connecting the server to Visual Studio Code, I leveraged GitHub Copilot and Claude Haiku 4.5 to extract design context directly from our frames and convert them into functional code. This integration significantly reduced development time, allowing us to pivot quickly and meet our MVP deadline.
Traditional Manual Workflow
VS
1-2 hours
Estimated time required to manually build each individual component
Figma-to-Code Workflow
~ 1 hour
Total time taken to convert 15 custom UI components using the AI-assisted workflow
15-25 hours
Estimated total duration to manually convert a batch of 15 custom UI components
14-24 hours
Total development and handoff time saved
93% - 96%
Total reduction in component conversion time
User Testing Overview
After the developers created the MVP, Monica and I conducted usability tests on Zoom. We focused on whether participants could navigate AllorAI to successfully plan a trip, ensuring our MVP met real-world user needs. These Zoom sessions allowed us to gather direct insights into user navigation and identify any friction points.
Parameters
Study Type: Moderated Usability Study
Location: United States | Remote
Participants: 5 participants
Length: 20 minutes
Results & Overall Findings
6:53
Average Task Duration
5/5
Participants would use a finalized version of AllorAI
4
Errors on Average Found by Participants
4/5
Participants enjoyed AllorAI's travel planning approach
An interesting result from our usability study was that users could generate a fully customized, multi-day itinerary with estimated logistics in just 6 minutes and 53 seconds. According to Expedia Group research, travelers spend over 5 hours researching trips on average. In comparison, AllorAI saves users roughly 4.8 hours of planning friction, achieving a 97.8% reduction in total trip planning time.
While overall reception was positive, the usability tests revealed needed improvements for AllorAI:
Conciseness
Participants noted that Allora’s message bubbles felt very text-heavy, which slowed their progress. We identified that Allora's responses being more concise.
Affordance & Clarity
The use of a pin icon caused confusion participants associated pinning with "saving for later" rather than "adding to itinerary."
Planning Duration
Feedback showed that trip planning is rarely a single-session task. Evolving the MVP to support long-term planning states rather than a linear, one-time flow would be ideal.
Due to the rapid nature of the hackathon, we were unable to implement design changes following our usability tests. However, the high-quality feedback we gathered was instrumental in defining a future roadmap for AllorAI.
Mitigation & Growth
Risk Mitigation
To ensure current and accurate results, AllorAI relies on a multi-agent API verification architecture. This approach integrates live APIs to eliminate raw AI guesswork and ground the generated data in real-time information.
AllorAI Agent Architecture
Data from live APIs is fed directly to specialized micro AI agents, which collectively power the primary supervisor agent. This supervisor agent analyzes the intent behind each user message and routes it to the appropriate specialized agent. Ultimately, the supervisor agent acts as AllorAI's core conversational interface, managing the end-to-end trip planning experience.
APIs:
-
Amadeus: Real-Time Flight & Pricing Verification
-
Google Places: Live Location & Status Validation
-
Wikipedia: Contextual Safety & Summary Check
Sending Data
Micro AI Agents:
-
Hotels
-
Flights
-
Restaurants
-
Selfie Spots
-
Nature
-
Activities
Scaling & Monetization
Freemium Tiered Subscription (SaaS)
-
Free Tier ($0/month): Designed for casual travelers, offering standard 3-day itinerary generation, basic AI personalization, standard response times, limited multi-city complexity, and essential export options like sharing a read-only link.
-
AllorAI Pro ($9.99/month): Designed for frequent travelers, unlocking advanced agent features such as deep multi-city route optimization, hyper-specific dietary and accessibility constraint mapping, real-time weather-triggered itinerary pivots, and collaborative group planning boards.
High-Intent Lead Generation & Referral Fees
Even when AllorAI doesn't process the final booking, it generates high-value commercial intent. When the AI recommends a specific hotel, restaurant, or flight, users can click a direct action button such as "Reserve". This redirects them through an affiliate link, allowing AllorAI to earn cost-per-click (CPC) or referral fees. By acting as the ultimate automated researcher, the platform bridges the gap between trip planning and booking platforms by passing on warm, conversion-ready leads.
B2B Destination Marketing & Sponsored Placements
Tourism boards and boutique experience providers can partner with AllorAI to feature their regions, hotels, or events directly within the AI's contextual recommendation engine. This model transforms the conversational agent into a curated platform for destination marketing. It drives high-relevance visibility for vendors while preserving a seamless, non-intrusive experience for the user.
Hackathon Results & Reflection
The hackathon concluded with a live-streamed project retrospective. Available members from both teams came together to share insights, discuss areas for improvement, and reflect on our technical learnings. In the end, my team secured 2nd place in the competition. I'm very proud of what my team and I achieved together, as well as the collective progress made by every participant in the event.
Participating in this hackathon was a transformative milestone in my design career, providing my first opportunity to navigate a product development lifecycle within a cross-functional environment. By working alongside my teammates, I deepened my technical expertise in Figma while discovering the power of AI-driven workflows to bridge the gap between design and code.
Our weekly scrum sessions highlighted the importance of communication and rapid iteration in building a complex product like AllorAI. It was inspiring to see a group of strangers unite to build a functional prototype from scratch. This hackathon accelerated my professional growth, and I'm incredibly grateful for the opportunity to push my creative and technical boundaries through such a rewarding experience.