Travel Trip Discovery
The interface excels at combining engaging visuals with clear, prioritized information that guides users effortlessly through travel discovery and planning. However, the dense use of bright highlights and multiple interactive elements could overwhelm some users, and the small text size may affect readability on smaller screens.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
5
Color & Contrast5
Content Readability & Clarity4
Visual Consistency, Imagery & Media1
Navigation & Structure2
Conversion & Actions3
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load3
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
0Critical
5Major
20Moderate
10Minor
Low contrast for light gray placeholder text in dropdown menus
Major
Color & Contrast
The Problem
The placeholder text 'Anywhere warm' and '$800 max' in the destination and budget dropdowns appear light gray on a dark blue background, resulting in low contrast likely below WCAG AA for normal text.
Why it Matters
Users, especially those with visual impairments, may struggle to read these dropdown values, affecting usability and form completion.
How to Fix
Use a lighter text color or a darker background for these inputs, or apply a stronger contrast color for placeholder text maintaining overall design.
Issue Highlights
Low contrast for trip map preview labels
Major
Color & Contrast
The Problem
The 'Trip map preview' and related small legend texts (e.g. '3 destinations', '5 days') are displayed in a lighter gray on a dark navy background, likely lacking adequate contrast per WCAG AA for normal text.
Why it Matters
This text might be hard to read for many users, impairing understanding of map information.
How to Fix
Increase text brightness or darken the background behind these labels to ensure text stands out sufficiently.
Issue Highlights
Multiple quick filter toggles add micro decision steps
Major
Efficiency & Cognitive Load
The Problem
The five small filter buttons (Flights, Stay, Food, Fun, Transport) are visible and likely require separate taps or toggles to refine the trip suggestions, adding multiple decision points for a single task.
Why it Matters
Each additional tap or filter increases the effort needed to complete the core task (finding trips), which may discourage use or lengthen task time.
How to Fix
Consolidate filters into a single expandable menu or provide smart presets for common filter combinations to reduce on-screen micro-steps.
Issue Highlights
Destination and Budget input fields lack clear affordance
Major
Strategic Design
The Problem
The 'Destination' and 'Budget' dropdown selectors have subtle visual cues and dark backgrounds that may not clearly communicate they are interactive inputs at first glance.
Why it Matters
Users might miss that they can edit or change these options easily, leading to confusion or reduced engagement when setting preferences.
How to Fix
Enhance input fields with stronger affordance, such as brighter borders, clearer dropdown arrows, or placeholder text styles that clearly indicate interactivity.
Issue Highlights
No empty state or guidance if no trips match criteria
Major
Flow & States Completeness
The Problem
The interface assumes trips are found, but does not show or indicate what happens if zero trips are found matching the user's criteria.
Why it Matters
Without an empty state, users may be confused if the app returns no results, leading to frustration or perception of app failure.
How to Fix
Add a thoughtful empty state UI with tips or alternative actions for when no trips meet search criteria (e.g., broaden search, adjust budget).
Issue Highlights
Low contrast for 'Ask Travel Genie' text
Moderate
Color & Contrast
The Problem
The phrase 'Ask Travel Genie' uses colors (tan, turquoise, gold) on a dark starry background. While mostly readable, the turquoise 'Travel' and gold 'Genie' may have insufficient contrast meeting WCAG AA standards for normal text, risking reduced readability.
Why it Matters
Users with low vision or color blindness may find it difficult to read this header text, reducing accessibility.
How to Fix
Increase the contrast by darkening the background behind these words or brightening the text colors, possibly adding subtle outlines or shadows for better separation.
Issue Highlights
Insufficient contrast for price details icons and text
Moderate
Color & Contrast
The Problem
The small icons and price texts (e.g., $246, $240) in the trip cards for Puerto Rico, Mexico City, and Miami use light gray on a dark transparent overlay. This results in low readability with contrast likely below WCAG AA standards for small text.
Why it Matters
Users may find it difficult to quickly read detailed cost information, reducing the effectiveness of the pricing cues.
How to Fix
Darken the background overlay behind these texts or use a brighter text color to ensure compliance with contrast standards.
Issue Highlights
Misaligned trip card names and prices
Moderate
Visual Consistency, Imagery & Media
The Problem
The place names on the trip cards are left aligned but the price and location information vary slightly in baseline alignment and spacing across cards, making the card content area look visually uneven.
Why it Matters
Misalignment reduces neatness and user confidence in design quality.
How to Fix
Adjust vertical spacing and horizontal alignment so all trip card text blocks align consistently by baseline and margin.
Issue Highlights
Low contrast for icon labels in bottom navigation bar
Moderate
Color & Contrast
The Problem
The labels beneath the icons in the bottom navigation (Trips, Explore, Profile) appear medium gray on a dark background, potentially causing insufficient contrast and making them hard to read.
Why it Matters
Critical navigation labels should be clearly readable to ensure all users can easily understand and use the navigation.
How to Fix
Brighten the icon labels or increase their contrast by adjusting the text or background colors.
Issue Highlights
Insufficient visual hierarchy in trip card details
Moderate
Content Readability & Clarity
The Problem
The pricing and city details on the trip cards (e.g. 'Puerto Rico', 'from $684') use similar font weight and size, making it hard to quickly distinguish main information from supporting details.
Why it Matters
Users might struggle to quickly scan and identify important trip information, which can slow decision-making.
How to Fix
Use a larger or bolder font for the main destination name and primary price, with smaller or lighter weight text for secondary details such as 'San Juan' and flight/hotel price breakdown.
Issue Highlights
Ambiguous '3 destinations' and '5 days' labels on map preview
Moderate
Content Readability & Clarity
The Problem
The labels '3 destinations' and '5 days' below the trip map preview lack context or a clear descriptive heading explaining what these numbers represent.
Why it Matters
Users could be uncertain whether '3 destinations' means stops, total places, or other trip details, and if '5 days' is trip length or something else.
How to Fix
Add a clear contextual heading such as 'Trip Summary' or 'Trip Details' above or adjacent to these labels to clarify their meaning.
Issue Highlights
Body text in Genie flying tip is very small
Moderate
Content Readability & Clarity
The Problem
The body text in the 'Genie flying tip' section ('Book on Tue or Wed ...') appears small compared to other text elements and may be difficult to read for some users.
Why it Matters
Smaller font size can reduce readability, especially on small screens or for users with impaired vision, decreasing tip engagement.
How to Fix
Increase the font size of the tip text to at least 14-16px equivalent and ensure sufficient line spacing for readability.
Issue Highlights
Inconsistent tag styles on trip cards
Moderate
Visual Consistency, Imagery & Media
The Problem
The trip cards use different background colors and shapes for their tags (BEST MATCH in green with rounded rectangle, GREAT VALUE in blue with rounded rectangle, VIBE PICK in purple with rounded rectangle). Though colors vary by meaning, the heart icon style on each card top right is consistent but not fully aligned in style with tags.
Why it Matters
Inconsistent styling within this set can cause visual distraction and reduce perceived polish of the product.
How to Fix
Standardize the tag style format and heart icon style for a consistent visual hierarchy and treatment across all trip cards.
Issue Highlights
Missing clear page or section title in main content area
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The top area uses a marketing phrase 'Reveal trips that fit' but does not explicitly indicate the current page or section, which may cause confusion about user's current location or task focus within the app.
Why it Matters
Users can get disoriented about where they are in the flow or app, which could reduce confidence and ease of navigation.
How to Fix
Add a clear, explicit page or section title near the top to show the user's current location or task context.
Issue Highlights
No Trust Signal to Assure Data Privacy for Budget and Destination Inputs
Moderate
Tone, Friendliness & Delight
The Problem
The app requests sensitive travel planning inputs such as destination preferences and budget without any visible trust indicators or assurances about data privacy or security.
Why it Matters
Users may hesitate to share personal travel information without confidence that their data is handled securely, potentially reducing engagement or causing abandonment.
How to Fix
Add visible trust signals or privacy reassurances near the input fields or call-to-action button, such as a short privacy note, lock icon, or link to data protection policies.
Issue Highlights
Small heart icons for trip favorites
Moderate
Accessibility & Input Ergonomics
The Problem
The heart icons in the top-right corner of each trip card (Puerto Rico, Mexico City, Miami) appear small and may be smaller than recommended touch target size (44x44 points).
Why it Matters
Small touch targets make it difficult for users to accurately tap the favorite icons, leading to frustration or errors.
How to Fix
Increase the size of the heart icons or increase their tap area with sufficient padding around them.
Issue Highlights
Cluttered interface with multiple bright highlights and icons
Moderate
Efficiency & Cognitive Load
The Problem
The screen is filled with many colorful labels, icons, glowing borders, and multiple areas competing for attention such as trip cards with distinct highlights, filter buttons, a packing progress chart, map preview, and a flying tip. This creates visual noise that can overwhelm users.
Why it Matters
Visual clutter causes cognitive overload, making it harder for users to quickly focus on the most important actions or information, which risks increasing task completion time or frustration.
How to Fix
Simplify the visual design by reducing the number of competing highlights and grouping related elements. Use a more subdued color palette for secondary information and limit glowing effects only to the primary action or top-priority elements.
Issue Highlights
No next step guidance after trip cards reveal
Moderate
Flow & States Completeness
The Problem
After revealing 3 trip options, the interface does not clearly indicate what action the user should take next (e.g., view details, book, or save). The heart icons suggest favoriting but lack labeling or tooltip for clarity.
Why it Matters
Users may be uncertain how to proceed with the trips shown, causing confusion or hesitation and risking flow abandonment.
How to Fix
Add clear call-to-action buttons or instructions near the trip cards for next steps such as 'View Details', 'Book Now', or 'Add to Favorites', and provide tooltip or label on the heart icon.
Issue Highlights
Genie mascot visually competes with main CTA
Moderate
Strategic Design
The Problem
The genie character to the right is large and colorful, drawing strong attention away from the 'Reveal trips' button on the left, potentially dividing user focus.
Why it Matters
Users may be distracted by the mascot and fail to immediately notice or interact with the primary call to action, reducing clarity of purpose.
How to Fix
Reduce the visual prominence of the genie mascot or reposition it to balance attention so the main 'Reveal trips' CTA clearly stands out as the primary interaction.
Issue Highlights
Crowded trip option cards with overlapping tap targets
Moderate
Navigation & Structure
The Problem
The three trip cards with price, icons, and badges are closely spaced with multiple interactive elements such as the heart icons and 'from' prices, which may cause difficulty in selecting the intended target.
Why it Matters
Users may tap the wrong element on the cards, leading to frustration or unintended actions.
How to Fix
Increase spacing or padding between interactive elements on the trip cards and group related tappable areas to reduce accidental taps.
Issue Highlights
Improve clarity and prominence of budget and destination inputs before CTA
Moderate
Conversion & Actions
The Problem
The inputs for 'Destination' and 'Budget' lack clear indication that these fields are required or adjustable before pressing the primary CTA 'Reveal trips.' This could cause hesitation in users whether information is complete or modifiable.
Why it Matters
Users may be unsure if the default or filled values will be used or if they can easily change parameters, potentially reducing interaction with the key CTA.
How to Fix
Add clearer input styling and labels to destination and budget fields, including placeholder or helper text and explicit dropdown icons or edit affordances to confirm these fields are active and user-editable.
Issue Highlights
Unqualified 'Best Match' and 'Great Value' Tags Could Mislead Users
Moderate
Tone, Friendliness & Delight
The Problem
The labels like 'Best Match' and 'Great Value' are displayed prominently on trip options without any explanation or transparency on how these rankings are determined.
Why it Matters
This may cause unrealistic expectations or mistrust if users perceive the app is making subjective claims without clear criteria or data backing.
How to Fix
Provide brief clarifications or tooltips explaining what these terms mean and how the app calculates or determines these rankings.
Issue Highlights
Trip cards and heart icon tap targets closely spaced
Moderate
Accessibility & Input Ergonomics
The Problem
The heart icons overlap visually very close to the edges of the trip cards; the gap between the card edges and heart icons appears less than recommended 8-10 points minimum spacing.
Why it Matters
Targets placed too close together increase the likelihood of accidental taps on adjacent controls, reducing accuracy.
How to Fix
Increase spacing or padding between the favorite icon and the trip card edges, or separate the two interactive elements visually and spatially.
Issue Highlights
No feedback or state shown for 'Reveal trips' button after interaction
Moderate
Flow & States Completeness
The Problem
The user interface does not show a loading or success state when 'Reveal trips' is pressed and trips appear. There is no clear indication that the trips were refreshed or can be further explored.
Why it Matters
Without feedback or further interaction options, users might think the app is unresponsive or stuck.
How to Fix
Include animated loading state or message when trips are loading, and provide options to refresh, sort, or filter trips after results appear.
Issue Highlights
User must remember packing checklist details without immediate access
Moderate
Efficiency & Cognitive Load
The Problem
The packing progress section shows counts for Essentials, Clothing, and Toiletries, but requires users to tap 'View checklist' to see details, relying on memory of what items remain to be packed.
Why it Matters
Requiring users to remember checklist contents adds mental load and may cause omission or mistakes in packing.
How to Fix
Provide a summary preview or quick expand of checklist items directly on this screen to reduce memory reliance.
Issue Highlights
Unlabeled icons on trip cards for flights and stay costs
Minor
Visual Consistency, Imagery & Media
The Problem
The small airplane and bed icons used on trip cards to indicate flight and stay prices lack explanatory text or legend, which may be unclear for some users.
Why it Matters
Ambiguous icons can confuse users about cost breakdowns, complicating decision-making.
How to Fix
Add a small label or legend explaining the flight and stay icons on or near the trip cards.
Issue Highlights
Packing progress area interaction unclear
Minor
Accessibility & Input Ergonomics
The Problem
The packing progress panel with progress bars and stats looks static with no strong indicators that it is interactive, despite a 'View checklist' link that may be confusing about the whole area’s interactivity.
Why it Matters
Users may be unsure whether to tap the progress bars or only the text link, causing potential uncertainty in UI interaction.
How to Fix
Clarify interaction areas by adding a distinct style to the 'View checklist' link and separating it visually from the progress bars or making the entire module a clear button.
Issue Highlights
No clear hierarchy between main headline and subline
Minor
Content Readability & Clarity
The Problem
The main heading 'Reveal trips' and 'that fit' use different colors but similar size and weight, which may cause mild ambiguity in emphasis and reading flow.
Why it Matters
Text emphasis is not optimized, potentially reducing impact of the callout message.
How to Fix
Increase the font size or weight difference between the 'Reveal trips' and 'that fit' lines to establish clearer visual hierarchy.
Issue Highlights
Unlabeled progress chart colors in packing progress
Minor
Content Readability & Clarity
The Problem
The packing progress uses three colored bars labeled Essentials, Clothing, Toiletries, but no legend or explanation for the color coding is visible.
Why it Matters
Users may be unsure if colors correspond to specific categories or levels of progress or importance.
How to Fix
Add a clear legend or color label near the progress bars or use distinct icons representing each category.
Issue Highlights
Unlabeled icons in navigation bar
Minor
Visual Consistency, Imagery & Media
The Problem
The navigation bar icons for Trips, Explore, and Profile do not include labels, unlike the Home icon which shows a label below. This inconsistency may confuse users about the meaning of some icons.
Why it Matters
Unlabeled icons increase cognitive load and may reduce usability for new users.
How to Fix
Add text labels consistently below each navigation icon or provide tooltips for clarity.
Issue Highlights
Trip map preview lacks clear interactive affordance
Minor
Accessibility & Input Ergonomics
The Problem
The 'Trip map preview' area includes pins and a flight path but no clear visual affordance indicating it is interactive or tappable.
Why it Matters
Users might expect to tap the map preview for more details but might not realize it is interactive without conventional affordances like a button border or shading.
How to Fix
Add a visible button style or a tappable cue (like a chevron or drop shadow) to the trip map preview area to indicate interactivity.
Issue Highlights
Excessive promotional characters and decorative animations
Minor
Efficiency & Cognitive Load
The Problem
The genie character with glowing, swirling effects occupies significant space and draws attention while adding no actionable value on this screen.
Why it Matters
Decorative elements draw visual attention away from core interactive elements and add to cognitive load, potentially distracting users from the main task.
How to Fix
Reduce size or opacity of decorative images or hide them during task flow to maintain focus on actionable content.
Issue Highlights
Make 'View deals' CTA more prominent or contextually linked to increase engagement
Minor
Conversion & Actions
The Problem
The secondary CTA 'View deals' below the packing progress and tip is small and low contrast compared to the primary 'Reveal trips' CTA, making it less noticeable.
Why it Matters
Users might overlook an important alternative action that could help them find value and engage with the app further.
How to Fix
Increase the size, color contrast, or positioning of the 'View deals' button. Consider adding contextual cues or grouping it with related info to draw user attention.
Issue Highlights
Playful Genie Character May Undermine Trust for Serious Booking Decisions
Minor
Tone, Friendliness & Delight
The Problem
The bright, cartoonish genie character with magical sparkles sets a whimsical tone which may feel incongruent with the seriousness users expect when making important travel purchase decisions.
Why it Matters
While fun imagery can delight users, a too playful visual tone around financial and travel commitments might cause users to doubt the app’s reliability or professionalism.
How to Fix
Balance the charm of the genie character with more straightforward, professional design elements in booking sections or add reassuring language to anchor user trust.
Issue Highlights
Filter category buttons use similar coloring causing poor differentiation
Minor
Strategic Design
The Problem
The filters for 'Flights', 'Stay', 'Food', 'Fun', and 'Transport' all use similar dark blue circular backgrounds with only icon color to differentiate, which can make scanning and selection less intuitive.
Why it Matters
Users might find it harder to quickly distinguish and select desired filters, slowing task completion or causing errors.
How to Fix
Use more distinct colors or shapes for each filter category button or add clearer labels to improve scanability and affordance.
Issue Highlights