Local Offers Discovery
The interface excels in organizing offers into clear, distinct sections with consistent typography and easy navigation, enhancing user comprehension. However, the repetitive content and small tappable areas in offer cards could be improved to avoid redundancy and enhance touch experience.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast2
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure0
Conversion & Actions0
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics1
Efficiency & Cognitive Load3
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
1Major
13Moderate
3Minor
No action available for offers in list
Major
Flow & States Completeness
The Problem
The offers in the 'Going' and 'Deals from Your Favorite Store' sections appear tappable but do not have any visible buttons or interactive affordances beyond the 'See all' links, which may lead to dead ends if they do not clearly navigate to detailed offer pages.
Why it Matters
Users may tap an offer expecting to interact or proceed, but may find no way to continue, causing frustration and possible abandonment.
How to Fix
Ensure each offer card is a clear interactive element that leads to more information, redemption options, or next steps. Provide visual feedback such as highlighting on tap or an arrow icon indicating navigation.
Issue Highlights
Low contrast for 'Search offers or businesses...' placeholder text
Moderate
Color & Contrast
The Problem
The placeholder text in the search input appears as light gray on a white background, likely below the WCAG AA contrast ratio of 4.5:1 for normal text.
Why it Matters
Users with low vision or color blindness may have difficulty reading the placeholder text, making it hard to understand what to search for.
How to Fix
Use a darker shade of gray for the placeholder text to ensure sufficient contrast against the white background.
Issue Highlights
Weak visual hierarchy in section headings
Moderate
Content Readability & Clarity
The Problem
Section headings like 'Going', 'Deals from Your Favorite Store', and 'Featured Offers' use similar font sizes and weights, making it harder to distinguish the importance and grouping of content at a glance.
Why it Matters
Users may find it difficult to quickly scan and understand the structure of the content, potentially leading to decreased usability and engagement.
How to Fix
Increase the font size, weight, and/or spacing of section headings or add distinguishing styling (such as color or background) to create a clear visual hierarchy.
Issue Highlights
Inconsistent badge styles on offer cards
Moderate
Visual Consistency, Imagery & Media
The Problem
The badge showing the number '3' in the 'Going' section is a solid blue circle with white text, while the green checkmark badge on the offer image is a circular icon with a green background and white checkmark. These badge styles are inconsistent in shape, color, and iconography.
Why it Matters
Inconsistent badge styles can confuse users about the meaning and importance of these badges, reducing UI clarity.
How to Fix
Standardize badge styles for all badges on offer cards, using a consistent color scheme, shape, and icon style.
Issue Highlights
Unlabeled heart icon on featured offer image
Moderate
Visual Consistency, Imagery & Media
The Problem
The heart icon overlaid on the featured offer image is not accompanied by any label or tooltip to clarify its purpose (e.g., favorite, like).
Why it Matters
Users may be uncertain about what action or status the heart icon indicates, potentially leading to confusion or hesitation to interact.
How to Fix
Include a visible label, tooltip, or accessible description to clarify the icon's meaning and interactivity.
Issue Highlights
Excessive bottom navigation icons crowd screen
Moderate
Navigation & Structure
The Problem
The bottom navigation bar contains 7 icons tightly spaced horizontally, which can make it difficult for users to quickly find and tap the desired section, especially on smaller screens.
Why it Matters
Crowded navigation increases the risk of users tapping the wrong destination and reduces ease of use, impacting seamless interaction.
How to Fix
Reduce the number of primary navigation items or use grouping/overflow menus to declutter the bottom navigation bar.
Issue Highlights
Notification bell icon tap target too small
Moderate
Accessibility & Input Ergonomics
The Problem
The notification bell icon in the top right corner is visually small and may have a tap target smaller than the recommended minimum of 44x44 points.
Why it Matters
Small tap targets make it difficult for users to accurately tap, especially on smaller screens or for users with motor impairments.
How to Fix
Increase the tap target size of the notification bell icon by adding padding or enlarging the clickable area while keeping the icon size consistent.
Issue Highlights
Redundant Offers Displayed in Multiple Sections
Moderate
Efficiency & Cognitive Load
The Problem
The same offer 'Glam Gel Nails @ Flat 20% OFF!' appears in the 'Going' and 'Deals from Your Favorite Store' sections, causing unnecessary visual repetition.
Why it Matters
Displaying identical offers multiple times increases visual clutter and forces users to process repetitive information, potentially causing confusion and slowing decision-making.
How to Fix
Consolidate repeated offers into a single relevant section or differentiate the content or context to avoid redundancy.
Issue Highlights
Repeated identical offer cards reduce visual variety
Moderate
Strategic Design
The Problem
The 'Going' section and 'Deals from Your Favorite Store' section both show the exact same offer with identical images and copy, causing repetition without new information or visual variety.
Why it Matters
Repeated content decreases visual interest and perceived value of the page, potentially reducing user engagement and satisfaction.
How to Fix
Show distinct offers in each section or consolidate the repeated offers into one section to enhance clarity and interest.
Issue Highlights
Low contrast for grey heart icon on light background
Moderate
Color & Contrast
The Problem
The heart icon in the top-right corner of the featured offer uses a light grey color on a white circular background, likely resulting in insufficient contrast below WCAG AA for graphical objects (3:1).
Why it Matters
Users with low vision or color blindness may find it difficult to see or identify the heart icon's state or interactivity.
How to Fix
Use a darker color for the heart icon or provide a stronger background contrast to ensure it meets at least the 3:1 contrast ratio for UI components.
Issue Highlights
No clear active state in bottom navigation
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
While the 'Home' icon is highlighted in blue, other navigation icons lack a distinct active or hover state, and the current screen's context beyond the header is not emphasized within navigation.
Why it Matters
Users may not be fully sure which navigation section they are currently in, decreasing orientation and increasing cognitive load.
How to Fix
Enhance the active state distinctiveness for the current section and consider adding a breadcrumb or location indicator within the navigation area.
Issue Highlights
Heart icon on featured offer requires precision
Moderate
Accessibility & Input Ergonomics
The Problem
The heart icon overlaying the featured offer image in the lower center-right portion is quite small and may be difficult to tap accurately.
Why it Matters
Small interactive areas increase error rates and user frustration, especially on mobile where users interact with fingers.
How to Fix
Increase the tap area for the heart icon by adding transparent padding around the icon, ensuring the minimum touch size is met.
Issue Highlights
No clear next step after browsing offers
Moderate
Flow & States Completeness
The Problem
The screen shows offers in Ludhiana with multiple sections and 'See all' links, but it is unclear what happens after viewing or selecting an offer. There are no visible buttons or prompts guiding the user on the next action to take after browsing or viewing offers.
Why it Matters
Users may get confused about how to proceed to redeem an offer, learn more details, or navigate deeper into content, potentially reducing engagement.
How to Fix
Add clear calls to action such as 'View Details,' 'Redeem Offer,' or onboarding hints that highlight what users should do next after browsing offers.
Issue Highlights
No guidance for empty or filtered search results
Moderate
Flow & States Completeness
The Problem
The search field is visible but no empty state or guidance is shown if a search returns no results or if offers are unavailable in certain categories.
Why it Matters
Users entering search terms or filtering offers may be left confused and not know what to do next if no results appear.
How to Fix
Add an empty state message below the search input that explains when no offers match the search and provide suggestions or alternative actions.
Issue Highlights
Subheaders and detail text lack differentiation
Minor
Content Readability & Clarity
The Problem
Detail texts like 'The Nail Bar by Nav' and 'BRS Nagar' use similar gray tones and weights without clear distinction, reducing clarity between store name and location.
Why it Matters
Users might have to spend more effort to distinguish types of information related to offers.
How to Fix
Use different font weights, sizes, or colors to clearly differentiate between store name and location.
Issue Highlights
Misalignment between section titles and 'See all' links
Minor
Visual Consistency, Imagery & Media
The Problem
The 'See all' links on the right side of each section appear slightly vertically misaligned relative to their corresponding section titles on the left.
Why it Matters
Misalignment between related UI elements can reduce visual harmony and professional appearance, making the interface feel less polished.
How to Fix
Adjust vertical positioning of 'See all' links to align horizontally with the baseline or center of the section titles.
Issue Highlights
Similar 'See all' links lack contextual distinction
Minor
Strategic Design
The Problem
'See all' links appear in close visual proximity for multiple sections without contextual differentiation or clear hierarchy, making it harder for users to distinguish and prioritize actions.
Why it Matters
Users may get confused about which section they are navigating to, reducing ease of navigation and overall experience.
How to Fix
Introduce more visual hierarchy or spacing between the 'See all' links or use different styles to differentiate each section's call-to-action.
Issue Highlights