UX Designer | December 2025 - February 2026
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. We participated in recurring live presentations and sprint demos, which provided a platform to showcase our iterative design process and receive cross-functional feedback.
Team
Bradley Diep | Designer
Monica Shin | Designer
Tony Briely | Developer
Jeremy Fischer | Developer
Hector Suzao | Developer
My Role
UX/UI Design
UX 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 deadline of creating an MVP.
User Testing
After the developers created the MVP, Monica and I conducted 5 moderated usability tests over Zoom. We focused on whether participants could navigate the 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.
6:53
Average Task Duration
5/5
Participants would use a finalized version of AllorAI
4
Errors on Average Found by Participants
4
Participants enjoyed AllorAI's travel planning approach
User Feedback & Iteration Strategy
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.
Results & Reflection
The hackathon concluded with a final project retrospective via livestream. Available members from both teams came together to share insights on our successes, address 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 our team’s achievement and the collective progress made by all the participants in the hackathon.
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 team. By working alongside Monica and our development team, 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 filled a vital gap in my professional journey, and I'm incredibly grateful for the opportunity to have pushed my creative boundaries through such a rewarding experience.