Local Services Feed
The interface effectively uses circular category icons and clear section labeling to promote easy content discovery and user engagement. However, some text truncation and overlapping UI elements reduce readability and overall visual clarity on smaller mobile screens.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast3
Content Readability & Clarity3
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions0
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load3
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
2Major
17Moderate
7Minor
Small icon-only menu button (hamburger icon) lacks sufficient size
Major
Accessibility & Input Ergonomics
The Problem
The three-line hamburger menu icon on the top left is visibly smaller than recommended 44x44 pixel tap target size, making it challenging to tap accurately.
Why it Matters
Small touch targets can exclude users with motor impairments or cause repeated failed taps increasing user frustration.
How to Fix
Increase the tap area around the hamburger menu icon to at least 44x44 pixels by adding padding.
Issue Highlights
Explore Tab Post Feed Shows Posts but No Navigation or Interaction Options
Major
Flow & States Completeness
The Problem
The 'Explore' tab displays several posts with images and some interaction count (likes), but there is no visible option to refresh, filter further, or navigate to detailed post views.
Why it Matters
Users can view content but have no cues or controls to explore further, causing potential drop-off or frustration.
How to Fix
Include navigation affordances like tappable post titles, clickable images leading to detailed views, or 'Load More' buttons to indicate further exploration options.
Issue Highlights
Low contrast on inactive toggle button text
Moderate
Color & Contrast
The Problem
The text 'Favourite' in the toggle switch uses a light grey color on a white background, likely below WCAG AA contrast ratio of 4.5:1.
Why it Matters
Low contrast makes the inactive toggle state harder to read for users with visual impairments or in bright environments.
How to Fix
Use a darker grey or black for the inactive text to ensure a contrast ratio of at least 4.5:1 against white.
Issue Highlights
Insufficient hierarchy between headline and body text
Moderate
Content Readability & Clarity
The Problem
The headline 'Payal lahar makeup stu...' and the following description text appear visually similar in size and weight, reducing clarity in text hierarchy.
Why it Matters
Users may have difficulty quickly distinguishing the key headline from the supporting body text.
How to Fix
Increase font size or weight for the headline or use a clear visual distinction such as color or spacing.
Issue Highlights
Inconsistent text truncation and font styling in post title
Moderate
Visual Consistency, Imagery & Media
The Problem
The post title 'Payal lahar makeup stu...' is truncated inconsistently. The font weight of the truncated title seems bold, while the description below is normal weight, causing a visual imbalance.
Why it Matters
Inconsistent text styles and unclear truncation reduce readability and make the UI look unpolished, potentially confusing users about the importance or status of the text.
How to Fix
Use consistent font styles and consider adaptive text truncation with ellipsis or expandable text. Ensure truncation is visually smooth and consistent.
Issue Highlights
Hamburger menu icon is small and lacks label
Moderate
Navigation & Structure
The Problem
The hamburger menu icon on the top left is small and without a label, which may not clearly communicate its function as primary navigation for all users.
Why it Matters
Users may overlook or fail to understand the menu icon, leading to difficulty accessing main navigation and frustration.
How to Fix
Increase the size and touch target of the hamburger icon and consider adding a visible label or tooltip to clarify its purpose.
Issue Highlights
No clear active state or location indicator in horizontal category nav
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The horizontal category navigation at the top uses circular images and text but lacks a clear, consistent active or selected state to indicate the current category.
Why it Matters
Users may be unsure which category they are currently viewing, reducing navigation clarity and increasing cognitive load.
How to Fix
Add a distinguishable active state, such as a stronger visual highlight or border around the selected category circle.
Issue Highlights
Unclear action on '...See More' link
Moderate
Conversion & Actions
The Problem
The '...See More' link uses vague text without a clear call to action or button styling, making it unclear if it expands text or leads to another page.
Why it Matters
Users may be confused about what will happen when they tap the link, potentially reducing engagement with expanded content.
How to Fix
Replace '...See More' with a clearer button or link label like 'Read More' or 'Expand Description' and use distinct styling to indicate interactivity.
Issue Highlights
Small circular category buttons with small tap areas
Moderate
Accessibility & Input Ergonomics
The Problem
The circular category buttons (e.g. 'ALL', 'Sports & Fitness') appear to be around or slightly below recommended minimum touch target size of 44x44 pixels, which could make them hard to tap precisely.
Why it Matters
Touch targets that are too small increase user frustration and error rate, particularly for users with larger fingers or motor impairments.
How to Fix
Increase the size of circular category buttons to at least 44x44 pixels or add padding around them to increase their tap area.
Issue Highlights
Too many filter categories displayed horizontally
Moderate
Efficiency & Cognitive Load
The Problem
The horizontal scroll of multiple distinct filter categories (e.g., All, Sports & Fitness, Beauty & Care, Shopping, Food & Home Kitchen) creates multiple micro-decision points for users to evaluate which category to select.
Why it Matters
Users must scan through many options, increasing cognitive load and potentially leading to decision fatigue or slower task completion.
How to Fix
Consolidate categories with a dropdown menu or progressive disclosure to reduce on-screen choices and simplify interactions.
Issue Highlights
Multiple circular images add visual clutter
Moderate
Efficiency & Cognitive Load
The Problem
Several circular category icons with images and text underneath appear in close proximity, creating visual complexity and competing for user attention.
Why it Matters
This clutter can make it harder for users to focus quickly on their desired category or content, reducing task efficiency.
How to Fix
Simplify visuals by using fewer images or grouping categories more compactly, or add subtle visual hierarchy to guide attention.
Issue Highlights
Low contrast on light yellow badge text
Moderate
Color & Contrast
The Problem
The 'Make-Up Artist' badge uses pale yellow background with colored text that appears low contrast and may not meet WCAG AA contrast requirements.
Why it Matters
Users with low vision or color blindness may struggle to read this badge text.
How to Fix
Use a darker text color on the yellow background or a darker background with white text to improve readability.
Issue Highlights
Low contrast blue 'See More' link text
Moderate
Color & Contrast
The Problem
The '...See More' link is displayed in a light-blue color on white background, likely failing WCAG AA contrast ratio of 4.5:1.
Why it Matters
Users with visual impairments or in bright light conditions may have difficulty reading and identifying the link.
How to Fix
Use a darker blue or increase font weight or background shading to boost contrast.
Issue Highlights
Body text likely too small below 12px
Moderate
Content Readability & Clarity
The Problem
The descriptive text below the headline appears small and might be less than 12px, affecting readability.
Why it Matters
Small font sizes can cause strain and reduce readability, especially for users with visual impairments.
How to Fix
Increase the font size of the body text to at least 14px for better readability.
Issue Highlights
Dense bottom navigation with small space between icons
Moderate
Navigation & Structure
The Problem
The bottom navigation bar includes seven closely spaced icons and labels, which may be too dense for comfortable tapping especially on smaller screens.
Why it Matters
Users might accidentally tap wrong icons, leading to navigation errors and frustration.
How to Fix
Reduce the number of bottom navigation items or increase horizontal spacing and touch target sizes for easier tapping.
Issue Highlights
Tight horizontal spacing between circular category buttons
Moderate
Accessibility & Input Ergonomics
The Problem
The circular category buttons and their labels are closely placed horizontally. The spaces between these touch targets appear less than the recommended minimum 8-10 pixels separation.
Why it Matters
Closely spaced tap targets increase the risk of accidental taps on adjacent buttons, causing frustration and usability errors.
How to Fix
Increase horizontal spacing between each circular category button and label to at least 8 pixels or use invisible padding.
Issue Highlights
Ambiguous 'Favourite' and 'Others' toggle styling
Moderate
Strategic Design
The Problem
'Favourite' and 'Others' toggle buttons use a styling where 'Favourite' is lighter and 'Others' is darker, but the disabled look on 'Favourite' may confuse users about which state is active.
Why it Matters
Users may not clearly understand which filter is currently applied, leading to potential frustration and inefficient filtering of content.
How to Fix
Use clearer toggle states such as distinct colors or check marks to highlight the active filter and ensure the inactive one appears truly inactive.
Issue Highlights
Unclear Primary Action for User After Viewing a Post
Moderate
Flow & States Completeness
The Problem
The post detailed on screen shows content and images but lacks a clear, prominent call-to-action such as 'Book Now', 'Contact', or 'Share' to guide the user on what to do next.
Why it Matters
Without a clear next step, users may be confused about how to engage further, potentially decreasing user interaction or progression within the app.
How to Fix
Add a clear and visually prominent button or link that directs users on the next immediate action they can take with the post (e.g., booking the artist, sharing, saving).
Issue Highlights
Lack of clear page or section heading
Moderate
Strategic Design
The Problem
The screen does not prominently display a clear heading or title indicating the purpose or content type of the current screen or feed.
Why it Matters
Users may feel disoriented about what content they are seeing or where they are within the app, reducing user satisfaction and engagement.
How to Fix
Add a clear and prominent page heading above the scrollable categories and content list to anchor user understanding right away.
Issue Highlights
No Empty State or Guidance for 'Others' Tab Selected
Minor
Flow & States Completeness
The Problem
The 'Others' toggle is selected but the content area doesn't show any indication or guidance about what 'Others' includes or what users should do if no relevant posts appear.
Why it Matters
Users switching tabs might be unsure about what content to expect or how to proceed if the 'Others' category is empty or unclear.
How to Fix
Add an empty state message or icon explaining what 'Others' covers and suggestions for how to use or navigate from that tab.
Issue Highlights
Relative time '4 days ago' lacks date/time context
Minor
Ambiguous Date/Time/Timezone
The Problem
The label '4 days ago' is used without a reference date, timezone, or option to see an exact timestamp.
Why it Matters
Users might be unsure when the post was exactly made, leading to confusion especially across timezones.
How to Fix
Provide an option to see the full date and time or include timezone information.
Issue Highlights
Category filter circular icons misaligned vertically
Minor
Visual Consistency, Imagery & Media
The Problem
The circular category icons at the top (e.g., 'All', 'Sports & Fitness') are not aligned on the same vertical baseline, causing a visual unevenness in the horizontal navigation.
Why it Matters
Misalignment can make the UI feel disorganized and less professional, which can distract users and reduce trust in the app interface.
How to Fix
Adjust vertical alignment properties of the category icons so all are centered uniformly along a common baseline.
Issue Highlights
Heart icon for likes lacks accompanying label clarity
Minor
Visual Consistency, Imagery & Media
The Problem
The heart icon with the number '2' is used to show likes, but the icon is small and unlabeled in this context which may cause slight ambiguity for new users.
Why it Matters
Unlabeled or ambiguous icons can increase cognitive load, forcing users to guess icon meaning and reducing ease of interaction.
How to Fix
Add an accessible label or a tooltip on hover/tap to clarify that the heart icon indicates 'likes'. Consider increasing icon size slightly for clarity.
Issue Highlights
Like icon and like count are very close together
Minor
Accessibility & Input Ergonomics
The Problem
The red heart icon for like and the number '2' are closely spaced horizontally, possibly making it harder to distinguish tap areas or causing accidental taps.
Why it Matters
Tight spacing increases error rate and user frustration when trying to tap small adjacent controls.
How to Fix
Increase horizontal spacing or padding around the heart icon and count to clearly separate tap areas.
Issue Highlights
Toggle between 'Favourite' and 'Others' adds micro-decision
Minor
Efficiency & Cognitive Load
The Problem
The toggle allowing users to switch between 'Favourite' and 'Others' adds an additional layer of decision-making without clear differentiation or visual hierarchy.
Why it Matters
Users must choose between these two tabs to see content, which may interrupt the flow and add unnecessary mental effort.
How to Fix
Automatically prioritize favorites in the main feed or integrate filtering more seamlessly.
Issue Highlights
Ambiguous label for like count
Minor
Content Readability & Clarity
The Problem
The '2' next to the heart icon does not have a clear verbal or text label indicating it is the number of likes.
Why it Matters
Some users may not understand what the number represents, limiting clarity.
How to Fix
Add an accessible label such as '2 likes' beside or as a tooltip for the heart icon.
Issue Highlights