Recipe Search Gallery
The interface effectively uses rich imagery and clear labels to engage users and facilitate quick scanning of recipes. However, the overlay text can sometimes clash with background images, reducing readability, and the dense layout might benefit from improved spacing or clearer filtering options.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast3
Content Readability & Clarity4
Visual Consistency, Imagery & Media1
Navigation & Structure0
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness1
Strategic DesignRecommended Fixes by Impact
0Critical
5Major
11Moderate
6Minor
Filtering tags have insufficient contrast
Major
Color & Contrast
The Problem
The white text on a light background filter button near the top ('Filters') and some small overlay text in the search bar appear to have low contrast, likely below WCAG AA standards, making them hard to read.
Why it Matters
Users with low vision or color blindness may struggle to read the filter label and placeholder text, reducing accessibility and usability.
How to Fix
Increase contrast by using darker text or a more opaque/darker background behind the text to ensure at least 4.5:1 contrast ratio.
Issue Highlights
Close Button 'X' on Recipe Cards Too Small
Major
Accessibility & Input Ergonomics
The Problem
The 'X' close buttons on top right of each recipe card appear to be smaller than recommended touch target size (less than 44x44 pixels), making them hard to tap accurately.
Why it Matters
Small tap targets can cause users to miss the intended target, causing frustration or errors when attempting to close or remove a card.
How to Fix
Increase the size of the close 'X' buttons to at least 44x44 pixels or add padding around the icon to provide a larger touch area.
Issue Highlights
Filters and Search Inputs Overlap with Recipe Cards
Major
Navigation & Structure
The Problem
The 'Filters' button and the 'Search recipes...' input are partially overlaid on top of recipe cards, causing a cluttered interface with competing interactive elements in close proximity and potentially overlapping.
Why it Matters
Users might find it difficult to distinguish and tap the intended target, leading to interaction errors and frustration.
How to Fix
Rearrange the filters and search input layout to have clear separation from the recipe cards, for example by placing them in a fixed header or sidebar area.
Issue Highlights
Top overlay notification overwhelms main content and disrupts visual hierarchy
Major
Strategic Design
The Problem
The Yumly app overlay at the top covers part of the first few recipe cards and draws focus away from the primary content, which is the recipe search and browsing. This overlay uses a large height and strong color contrast that competes visually with the content below.
Why it Matters
Users may be distracted or annoyed by the overlay blocking content and may miss the first recipes or key search affordances, reducing discoverability and satisfaction.
How to Fix
Reduce the size or opacity of the overlay or enable a close action that immediately hides it to avoid blocking the main content or impeding discovery of top results.
Issue Highlights
Search Input Has No Empty State or Suggestions
Major
Flow & States Completeness
The Problem
The search bar is visible but there is no indication of what happens if no recipes match the search or if the input is empty. There are no suggestions, recent searches, or prompts to help users when no results appear.
Why it Matters
Without empty state guidance, users can be left confused or frustrated when their search returns no results or when they are uncertain what to input next.
How to Fix
Implement an empty state for the search input that provides helpful messages, suggestions, or prompts to guide users towards successful searches.
Issue Highlights
Unlabeled Search Bar
Moderate
Content Readability & Clarity
The Problem
The search input field uses a faint placeholder 'Search recipes...' but lacks a formal label element, which may be ambiguous for accessibility tools.
Why it Matters
Screen reader and other assistive technologies may not announce the purpose of the input field clearly without an associated label, reducing accessibility.
How to Fix
Add a visible or screen-reader-only label associated with the search input for clarity and accessibility compliance.
Issue Highlights
Recipe cards are slightly misaligned horizontally
Moderate
Visual Consistency, Imagery & Media
The Problem
Some recipe cards appear shifted slightly left or right compared to the column grid, causing uneven horizontal spacing and disrupting the visual grid layout.
Why it Matters
Misalignment reduces visual cohesion and can make the page feel rushed or unprofessional.
How to Fix
Adjust card margins and padding so all recipe cards align precisely on the same vertical grid lines.
Issue Highlights
Tags and Labels Compete Visually with Recipe Titles
Moderate
Content Readability & Clarity
The Problem
The recipe tags (e.g., seafodpizza, viralrecipe) are in bright orange pill-shaped backgrounds and similar size to the recipe titles, causing them to compete rather than guide the user's eye. This weakens the hierarchy and can confuse users about the importance of these labels versus the main recipe name.
Why it Matters
Users may struggle to quickly identify the recipe names due to competing label prominence, causing slower scanning and potential misinterpretation of the UI elements.
How to Fix
Reduce the visual weight of tags by using smaller font sizes, lighter background colors, or placing them in less prominent positions relative to the recipe titles.
Issue Highlights
Filter Button and Search Bar Touch Targets Too Close
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Filters' button and the 'Search recipes...' input field are placed with very little horizontal spacing between them, making it difficult to tap accurately on smaller touch devices without accidental taps.
Why it Matters
Users may have difficulty accurately selecting either the filter button or the search input, increasing frustration and lowering usability, especially on smaller phone screens.
How to Fix
Increase the horizontal spacing between the 'Filters' button and the search bar or make their tap targets larger to reduce the chance of accidental taps.
Issue Highlights
Duplicate Search Input Elements
Moderate
Efficiency & Cognitive Load
The Problem
The screen shows two search input fields in very close proximity, which creates unnecessary repetition for the user when performing the same search action.
Why it Matters
Having multiple search boxes for the same task increases cognitive load as users wonder which one to use, potentially causing confusion and inefficiency.
How to Fix
Remove one of the search input fields to streamline the interface and reduce redundant steps.
Issue Highlights
No Clear Guidance After Recipe Selection
Moderate
Flow & States Completeness
The Problem
The screen shows a grid of recipe cards with no clear indication or prompt on what to do next after viewing or selecting a recipe. The search input is visible but no call-to-action or navigation cues guide users on how to proceed within the app.
Why it Matters
Users may get confused about the next step, increasing the risk they abandon the flow or miss key features like filtering or detailed recipe views.
How to Fix
Add clear next-step guidance such as instructional text, highlighted actionable buttons (e.g., 'View Recipe', 'Start Cooking'), or visual cues directing users on how to engage further with the recipes.
Issue Highlights
Product tag labels have borderline low contrast
Moderate
Color & Contrast
The Problem
Small white text on the orange background tags (like 'viralrecipe', 'seafodpizza', 'garlicpasta') have moderate contrast but the orange used is slightly muted and some text details are hard to read.
Why it Matters
Users with mild visual impairments or in bright environments may find these labels difficult to read, which affects clarity of key recipe attributes.
How to Fix
Use a brighter or more saturated orange background or pure white text to increase contrast to WCAG AA standards.
Issue Highlights
Undefined purpose of filter and search icons on overlay
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'Filters' and 'Search recipes...' icons on the semi-transparent overlay lack textual explanation beyond their labels and small icons, which may be unclear for some users regarding their interactive states.
Why it Matters
Ambiguous icons can increase user hesitation or confusion, impacting ease of interface use.
How to Fix
Add tooltips or clearer labels that appear on hover/focus to clarify icon actions.
Issue Highlights
No Clear Active State or Context Indication in Navigation
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The search and filter UI do not provide any clear indication of the user's current context or active state within the recipe collection, making it hard to understand if filters are applied or which section the user is in.
Why it Matters
Without orientation cues, users may feel lost or uncertain about their filtering status or navigation position, reducing engagement and motivation.
How to Fix
Add visible active states, labels, or breadcrumbs to clarify the current filtering options, search status, or location within the recipe collection.
Issue Highlights
Multiple Visible Recipe Tags Creating Choice Overload
Moderate
Efficiency & Cognitive Load
The Problem
Each recipe card shows multiple tags (e.g., 'seafoodpizza', 'viralrecipe'), adding to the number of items users must scan and consider when choosing a recipe.
Why it Matters
Too many visible tags and options per item increase decision complexity and slow down user selection.
How to Fix
Prioritize and limit the number of visible tags per recipe to the most important ones or group tags to reduce clutter.
Issue Highlights
Lack of clarity on safety of 'Open app' action
Moderate
Tone, Friendliness & Delight
The Problem
The prompt to 'Open in app for the best experience' with a prominent button labeled 'Open' lacks explanatory text about what will happen when clicked or potential impacts on user privacy or data, which may create hesitation or mistrust.
Why it Matters
Users may feel uncertain about app installation or linking personal data, reducing confidence in proceeding and potentially lowering conversion rates.
How to Fix
Add a short reassurance message near the 'Open' button explaining that the action is safe, non-intrusive, and respects privacy.
Issue Highlights
Inconsistent label casing in recipe tags
Minor
Visual Consistency, Imagery & Media
The Problem
Recipe tags such as 'seafoodpizza' and 'garlicpasta' are all lowercase and concatenated, while others like 'peri perichicken' and 'browniepudding' use inconsistent spacing and casing, leading to a lack of uniformity across tag styles.
Why it Matters
Inconsistent tag styling can confuse users and reduce perceived interface polish, harming trust and ease of scanning categories.
How to Fix
Standardize tag casing and spacing, for example using Title Case or lowercase consistently with proper word separation.
Issue Highlights
Variable calorie label styling and size
Minor
Visual Consistency, Imagery & Media
The Problem
Calorie labels such as '720 cal', '600 cal', and '520 cal' use the same secondary color but their background shapes and font size appear slightly inconsistent in height and spacing across recipe cards.
Why it Matters
Minor styling variations can distract users and affect visual harmony of the card content.
How to Fix
Harmonize font size, padding, and rounded corner radius on calorie labels uniformly across all cards.
Issue Highlights
Prominent App Banner Adds Visual Clutter
Minor
Efficiency & Cognitive Load
The Problem
The 'Yumly' app banner at the top uses bright colors and occupies significant space, distracting from the core recipe browsing content.
Why it Matters
Visual clutter reduces focus and increases cognitive load, making it harder to find and concentrate on key content.
How to Fix
Minimize or simplify the app banner's appearance or offer an option to dismiss it permanently.
Issue Highlights
Small Text in Metadata (Time and Calories)
Minor
Content Readability & Clarity
The Problem
The time durations and calorie counts below each recipe title appear to use a relatively small font size which could hinder readability, especially on smaller or lower-resolution devices.
Why it Matters
Users may have difficulty reading these important details quickly, potentially impacting the usability of filtering or decision making.
How to Fix
Increase the font size slightly or increase contrast to improve legibility.
Issue Highlights
Calorie and Time Labels on Cards Are Crowded
Minor
Accessibility & Input Ergonomics
The Problem
The calorie count and time labels at the bottom right of each recipe card are placed closely together horizontally, which could cause difficulty for precise tapping if these were interactive or intended for touch interaction.
Why it Matters
Crowded tap targets can reduce usability particularly for users with larger fingers or motor impairments.
How to Fix
If these labels are interactive, increase spacing between them or increase their touch target areas.
Issue Highlights
High-calorie dish labels lack tone balancing indulgence vs health
Minor
Tone, Friendliness & Delight
The Problem
Some meal cards with high-calorie counts (e.g., 900 cal for Biscoff Cheesecake) use bright red labels which may feel alarming but are not balanced by friendly or guiding language to frame the choice positively or neutrally.
Why it Matters
This visual tone may cause negative feelings in users sensitive about calories or dieting, reducing engagement or enjoyment of browsing.
How to Fix
Soften the calorie label colors or add friendly nutritional tips to balance tone and support user empowerment.
Issue Highlights