Design Summary
The UI frame presents a clean and modern design with a clear visual hierarchy for primary elements. Key strengths include intuitive navigation, appealing food imagery, and consistent use of design elements. However, there are several minor and one major accessibility concern related to text contrast, particularly for the "Deliver now" status and some secondary information. Improving text legibility and the prominence of certain interactive elements would significantly enhance the user experience and accessibility.
Design Frame
Run Your Own Audit in Figma
Install Floto for Figma"Deliver now" text
The "Deliver now" text is a very light gray on a white background, which likely fails WCAG contrast guidelines, making it difficult for users with visual impairments to read.
💡 Recommendation:
Significantly increase the contrast of the "Deliver now" text against the white background to meet accessibility standards.
"Deliver now" text
The "Deliver now" text is very light gray and small, making it less prominent than the address below it, which could lead to users overlooking the delivery status.
💡 Recommendation:
Increase the font size or darken the color of the "Deliver now" text to improve its prominence and readability.
"Popular Dishes" heading and "See All" link
The "Popular Dishes" heading and "See All" link are not strongly aligned with the content below them, creating a slight visual disconnect. The "See All" is also quite small and blends in.
💡 Recommendation:
Adjust the vertical alignment of the "Popular Dishes" heading and "See All" link to better align with the content cards. Increase the visual weight of "See All" to make it more noticeable.
Category icons and labels
The spacing between the category icons and their labels ("Nigiri", "Sushimi", etc.) is a bit tight, especially for longer labels, which could impact readability.
💡 Recommendation:
Increase the vertical spacing between the category icons and their text labels to improve readability and visual comfort.
"Deliver now" text
The "Deliver now" text is very light gray and small, making it less prominent and harder to read at a glance.
💡 Recommendation:
Increase the font size or darken the color of the "Deliver now" text to improve its prominence and readability.
"See All" link
The "See All" text next to "Popular Dishes" is small and uses a light red color, which makes it less noticeable as an interactive element.
💡 Recommendation:
Increase the font size or bold the "See All" text, and consider a darker shade of red or a different color to improve its visibility as a call to action.
Rating and delivery time text in dish cards
The rating and delivery time text (e.g., "4.8 • 25 mins") within the dish cards is quite small and light gray, potentially making it difficult for some users to read quickly.
💡 Recommendation:
Increase the font size and darken the color of the rating and delivery time text to enhance readability.
"See All" link
The "See All" text is a light red on a white background. While it might pass minimum contrast, it's not highly legible and could be improved for better accessibility.
💡 Recommendation:
Darken the red color of the "See All" text to improve its contrast and legibility.
Rating and delivery time text in dish cards
The rating stars are red, which is a strong color, but the numerical rating and time text are light gray, reducing their contrast and legibility, especially for users with low vision.
💡 Recommendation:
Darken the gray color used for the numerical rating and time text to improve contrast and readability.
Notification bell icon
The notification bell icon has a small red dot, which is a common pattern, but the dot is very small and could be missed by some users, especially if they have visual acuity issues.
💡 Recommendation:
Slightly increase the size of the notification dot or ensure it has sufficient contrast to be easily noticeable.
Overall color palette
The overall color palette is quite muted with a dominant white and light gray, with red as an accent. While clean, it could benefit from a slightly more vibrant or distinct secondary color to add more character without being overwhelming.
💡 Recommendation:
Consider introducing a subtle secondary accent color or slightly enriching the existing palette to add more visual interest and brand personality.
"See All" link
The "See All" link, while present, is visually understated due to its small size and light color, making it less clear as a primary call to action for viewing more popular dishes.
💡 Recommendation:
Increase the visual prominence of the "See All" link through size, color, or weight to make it a clearer call to action.
Microphone icon in search bar
The microphone icon in the search bar is small and its functionality might not be immediately obvious to all users without prior experience with voice search.
💡 Recommendation:
Consider slightly increasing the size of the microphone icon or adding a subtle label/tooltip on hover/focus to clarify its function.
Dropdown arrow next to address
The dropdown arrow next to the address "248 Tokyo Lane" is small and could be more prominent to clearly indicate that the address is selectable/editable.
💡 Recommendation:
Increase the size or contrast of the dropdown arrow next to the address to make its interactive nature more apparent.