AI Travel Planning Dashboard
The interface boasts a visually engaging and intuitive design with clear categorization of travel planning aspects and vibrant imagery that enhances user appeal. However, improvements could be made in button contrast for accessibility and reducing information density to avoid cognitive overload on smaller mobile screens.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast0
Content Readability & Clarity4
Visual Consistency, Imagery & Media2
Navigation & Structure2
Conversion & Actions3
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load3
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
0Critical
5Major
16Moderate
7Minor
Input placeholder text is vague and non-actionable
Major
Conversion & Actions
The Problem
The input field placeholder says: 'Cheap flights, good food, safe area, nightlife' which is an example of input rather than a prompt or instruction for the user's action.
Why it Matters
Users may be confused about what specific information to enter since the placeholder does not provide clear guidance, potentially reducing form completion rates.
How to Fix
Replace the placeholder text with a clear, actionable prompt such as 'Enter your travel preferences or wish list.'
Issue Highlights
Unqualified safety claim in travel preferences
Major
Tone, Friendliness & Delight
The Problem
The input example 'Cheap flights, good food, safe area, nightlife' includes 'safe area' as a preference without qualifiers or disclaimers, which can mislead users about travel safety guarantees.
Why it Matters
Users may develop false trust that the app ensures or verifies absolute safety, which is impossible and could lead to dissatisfaction or risk if users rely on the app's judgment alone.
How to Fix
Add disclaimers or rephrase to emphasize that 'safe area' is based on general suggestions or user preferences, not guaranteed safety assurances.
Issue Highlights
Text input lacks explicit visible label
Major
Accessibility & Input Ergonomics
The Problem
The text input field under 'Tell Genie your vibe' has a placeholder but no visible label identifying it as an input field.
Why it Matters
Without a visible label, users may be confused about what to enter, and assistive technologies might not correctly identify the input's purpose.
How to Fix
Add a clear, visible label associated with the input field or use an aria-label to provide accessibility, and avoid relying solely on placeholder text.
Issue Highlights
Unclear action after 'Create my plan' button press
Major
Flow & States Completeness
The Problem
The screen shows a 'Create my plan' button but does not visually indicate what happens next, such as a loading indicator, confirmation, or transition.
Why it Matters
Users may be uncertain if their input was submitted successfully or if the app is processing their request, leading to potential confusion or repeated actions.
How to Fix
Add a loading state, success confirmation, or automatic navigation to the next screen after the 'Create my plan' button is pressed.
Issue Highlights
No guidance for empty saved trips section
Major
Flow & States Completeness
The Problem
If no trips were saved, this section lacks visible guidance, prompts, or call to action for users to add or create trips.
Why it Matters
Users might see a blank or empty space and be unsure how to add their first saved trip, reducing engagement.
How to Fix
Display a helpful message or button in the 'Your saved trip' area encouraging users to save or create their first trip.
Issue Highlights
Inconsistent Icon and Text Color in Navigation Bar
Moderate
Visual Consistency, Imagery & Media
The Problem
The bottom navigation bar shows the 'Home' icon and text in a gold color matching the app's accent, while 'Trips', 'Explore', and 'Profile' icons and text are gray. This style inconsistency within one component set can reduce visual harmony.
Why it Matters
Users may perceive the navigation bar as visually unbalanced, which can reduce the professional appearance and confuse users about which icon is active.
How to Fix
Apply consistent styling for all inactive icons/text and a unified accent style for the active icon/text, ensuring clear visual hierarchy and brand consistency.
Issue Highlights
Low contrast for input placeholder text in search box
Moderate
Color & Contrast
The Problem
The placeholder text 'Cheap flights, good food, safe area, nightlife' uses a gray color on a dark background. This contrast appears low and likely falls below WCAG AA standards for normal text.
Why it Matters
Low contrast placeholder text can be difficult to read for users with visual impairments or in bright environments, reducing usability.
How to Fix
Increase the contrast by using a lighter gray or white for the placeholder text or darken the background input field slightly to improve readability.
Issue Highlights
Low contrast for 'Done' status labels under icons
Moderate
Color & Contrast
The Problem
The 'Done' labels under the icons use a teal color on a dark background. The contrast is relatively low and may not meet WCAG AA contrast ratio of 4.5:1 for normal text.
Why it Matters
'Done' status text with low contrast can be hard to read for users with moderate visual impairments, reducing the clarity of task completion status.
How to Fix
Use a lighter, more saturated teal or switch to white or a brighter accent color to increase contrast against the background.
Issue Highlights
Date range lacks timezone context
Moderate
Ambiguous Date/Time/Timezone
The Problem
The date range 'May 20 – May 28, 2026' does not specify any timezone, which can be ambiguous for travel planning that spans multiple time zones or international contexts.
Why it Matters
Users may misinterpret the itinerary dates without knowing the timezone, leading to potential scheduling confusion.
How to Fix
Add a clear timezone indication or clarify that the dates are in the traveler's local time or destination time.
Issue Highlights
Multiple clickable elements densely spaced without clear differentiation
Moderate
Navigation & Structure
The Problem
The bottom navigation bar and the segmented controls for itinerary, budget, map, and packing are visually close and have multiple taps with small spacing, increasing the risk of mis-taps.
Why it Matters
Users may accidentally tap the wrong target when navigating or selecting options, reducing usability and increasing frustration.
How to Fix
Increase spacing and visual separation between interactive elements, and ensure each clickable item is distinct and easy to hit reliably on small screens.
Issue Highlights
Small icon-only buttons in top right corner
Moderate
Accessibility & Input Ergonomics
The Problem
The menu icon in the top left and the bell notification icon in the top right are small touch targets with little padding around them, likely smaller than the recommended 44x44 points.
Why it Matters
Small tap targets are harder to accurately activate, increasing errors and frustration for users, especially on mobile.
How to Fix
Increase the tappable area of these icons by adding padding around the icon or using larger button containers.
Issue Highlights
Multiple Trip Detail Categories Presented Equally
Moderate
Efficiency & Cognitive Load
The Problem
The interface shows multiple trip detail categories (Itinerary, Budget, Map, Packing) all with similar visual weight and 'Done' status indicators, which can create competing decision points about where to focus next.
Why it Matters
Users may feel overwhelmed deciding which trip detail category to interact with or confirm completion first, increasing cognitive load and slowing down task flow.
How to Fix
Prioritize or collapse less critical categories by default, or guide users step-by-step through trip detail completion to reduce simultaneous decisions.
Issue Highlights
Primary button 'Create my plan' lacks visual affordance
Moderate
Strategic Design
The Problem
The 'Create my plan' button uses a color gradient but has a flat design that does not strongly stand out or provide clear affordance as actionable.
Why it Matters
Users might be uncertain about the button's clickability or miss it as the call to action, leading to lower conversion to generate travel plans.
How to Fix
Enhance the button with subtle shadows, highlights, or microinteractions to increase its perceived interactivity and prominence.
Issue Highlights
Unlabeled Bottom Middle Navigation Icon
Moderate
Visual Consistency, Imagery & Media
The Problem
The bottom center button uses a unique stylized snake or dragon icon without an accompanying label, unlike other navigation icons with text labels.
Why it Matters
Users might be confused about the button's purpose, increasing cognitive load and reducing discoverability.
How to Fix
Add a clear text label under the icon consistent with other navigation items or replace the icon with a more recognizable symbol.
Issue Highlights
No clear location or page title in main content area
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The screen shows multiple sections like saved trips and travel intel without a distinct location or section title indicating where the user currently is within the app.
Why it Matters
Users may be unsure what main function or feature they are currently using, causing confusion and disorientation in navigation.
How to Fix
Add a clear page or section heading near the top of the main content area indicating the user's current location or role in the app.
Issue Highlights
Primary button label 'Create my plan' lacks clear outcome context
Moderate
Conversion & Actions
The Problem
The button label 'Create my plan' is somewhat generic and may not clearly communicate the immediate result or benefit of pressing it.
Why it Matters
Unclear CTA labels can reduce user confidence and lead to hesitation or drop-off in conversion.
How to Fix
Make the CTA more specific or benefit-oriented, for example: 'Generate Your Travel Itinerary' or 'Get My Travel Plan Now'.
Issue Highlights
No trust signal or confirmation for ‘Create my plan’ action
Moderate
Tone, Friendliness & Delight
The Problem
The prominent 'Create my plan' button initiates a major action without visible trust signals, reassurances, or confirmation prompts to help users feel confident about proceeding.
Why it Matters
Users may hesitate or worry about data use, privacy, or implications of the AI-generated plan, reducing satisfaction or increasing support requests.
How to Fix
Add a brief note about AI privacy, data use, or an easy undo/modify option near the button or at confirmation to build trust and reduce anxiety.
Issue Highlights
Bottom navigation icons are spaced closely
Moderate
Accessibility & Input Ergonomics
The Problem
The bottom nav icons for Home, Trips, Explore, and Profile are placed near each other with minimal spacing between tap areas.
Why it Matters
Tightly spaced navigation buttons can lead to accidental taps on adjacent icons, confusing users and causing navigation errors.
How to Fix
Increase horizontal spacing between navigation icons or increase padding within each tap target for easier discrimination.
Issue Highlights
Multiple Data Input and Interaction Points Before Creating a Plan
Moderate
Efficiency & Cognitive Load
The Problem
Users are prompted to 'Tell Genie your vibe' by typing preferences, and below can interact with multiple categories and saved trips before clicking 'Create my plan,' potentially fragmenting focus and workflow.
Why it Matters
Having multiple interactive areas before the main action increases the number of micro-steps and scattered attention, which may frustrate users seeking quick plan generation.
How to Fix
Simplify initial input to just the vibe field and create plan button, postponing other category interactions for after the main plan is generated.
Issue Highlights
Genie input field blends into background
Moderate
Strategic Design
The Problem
The text input field for 'Tell Genie your vibe' uses a dark background with low contrast placeholder text which can make it hard to distinguish as an interactive input area.
Why it Matters
Users may not easily identify where to provide their travel preferences, reducing engagement in the primary task of generating a travel plan.
How to Fix
Increase contrast of the input field background and placeholder text, and consider adding subtle borders or shadow to clearly define the input boundary.
Issue Highlights
Packing checklist progress lacks next step or action
Moderate
Flow & States Completeness
The Problem
The packing checklist progress is shown at 72%, but no clear interaction or button is provided to update, view items, or continue packing.
Why it Matters
Users might be unsure how to proceed with managing or completing their packing list, potentially leaving the task incomplete.
How to Fix
Provide a button or link to open and interact with the packing checklist directly from this screen.
Issue Highlights
Left Edge Misalignment Between 'Your saved trip' Title and Trip Card
Minor
Visual Consistency, Imagery & Media
The Problem
The gold star icon and text 'Your saved trip' appear left-aligned differently than the Bali Reset Trip card below, creating a subtle off-grid alignment.
Why it Matters
Off-grid alignment breaks visual hierarchy and can make the interface appear less structured.
How to Fix
Align the starting x-coordinate of the 'Your saved trip' label and the trip card to follow a consistent left margin.
Issue Highlights
Highly Decorative Genie Lamp Graphic Distracts from Input Area
Minor
Efficiency & Cognitive Load
The Problem
The large, visually striking genie lamp graphic with glowing smoke near the text input and call-to-action button adds visual flair but creates distraction and competes with the main user input area.
Why it Matters
Visual distractions near key input areas increase cognitive load and may delay or confuse users about where to focus their attention.
How to Fix
Reduce the size or opacity of the genie lamp graphic near the input, or move it to a less prominent location to maintain branding with less distraction.
Issue Highlights
Low contrast for subtitle text 'One wish. Every detail. Sorted.'
Minor
Color & Contrast
The Problem
The subtitle uses white or near-white text on a dark background but is relatively small and appears slightly muted, potentially affecting contrast for some users.
Why it Matters
Lower contrast subtitles can be harder for users with mild visual impairment to read quickly, diminishing content clarity.
How to Fix
Increase font weight or use pure white to improve contrast and readability.
Issue Highlights
Misaligned 'Done' Status Text and Checkmark Icons in Task Summary
Minor
Visual Consistency, Imagery & Media
The Problem
The 'Done' status text and checkmark icons for 'Itinerary', 'Budget', 'Map', and 'Packing' do not seem perfectly vertically or horizontally aligned within their respective boxes, causing inconsistent spacing and visual imbalance.
Why it Matters
Misalignment increases cognitive load as it disrupts the clean flow of information, making the UI look less polished.
How to Fix
Align the 'Done' text baseline and checkmark icons consistently with respect to each task label and use a standard grid spacing.
Issue Highlights
Hamburger menu icon lacks visible label or active state
Minor
Navigation & Structure
The Problem
The top-left hamburger menu icon is present but has no visible label or indication that it is active or selected, which may obscure its purpose to new users.
Why it Matters
Users might not recognize it as a navigation element immediately, potentially delaying access to primary navigation options.
How to Fix
Add a visible label or tooltip for the hamburger menu and consider an active state highlight when the menu is engaged or available.
Issue Highlights
Light, playful color theme contrasts with serious travel safety context
Minor
Tone, Friendliness & Delight
The Problem
The glowing lamp and whimsical styling around 'Your AI travel genie' suggest playful magic, which may conflict with serious travel concerns like safety and budget planning.
Why it Matters
A mismatch in tone can confuse users about the reliability or seriousness of the AI's travel guidance, potentially undermining trust.
How to Fix
Balance playful elements with some calming or professional design aspects or wording to signal reliability alongside delight.
Issue Highlights
Mode completion indicators risk clutter and confusion
Minor
Strategic Design
The Problem
The 'Done' indicators with check marks for Itinerary, Budget, Map, and Packing are small and visually similar with low contrast, which might make it difficult for users to quickly assess progress.
Why it Matters
Users may misinterpret which sections are complete or overlook these progress markers, leading to uncertainty about their travel plan status.
How to Fix
Increase visual distinction for completion indicators, such as using bolder icons, color differentiation, or grouping them more clearly with section headers.
Issue Highlights