Design Summary
The UI frame presents a clean and modern checkout experience with a clear primary call-to-action. However, it suffers from significant accessibility and usability issues, primarily due to very low contrast text for product descriptions and summary details, making crucial information difficult to read. The purpose of the edit icon in the header is also ambiguous, potentially causing user confusion. While the layout is generally good, improvements in typography, contrast, and clarity of interactive elements are needed to enhance the user experience and accessibility.
Design Frame
Run Your Own Audit in Figma
Install Floto for FigmaProduct descriptions
The product descriptions have extremely poor contrast against the white background, making them almost unreadable. This is a significant accessibility barrier.
💡 Recommendation:
Immediately increase the contrast ratio of the product descriptions to meet WCAG AA standards for text legibility.
Product descriptions (e.g., 'Crispy nori cubes packed with rice...')
The descriptions for 'Temaki Sushi' and 'Oishi Sushi' have very low contrast against the white background, making them difficult to read, especially for users with visual impairments or in bright conditions.
💡 Recommendation:
Increase the contrast of the product descriptions to ensure readability for all users, adhering to accessibility guidelines.
Subtotal and Delivery Fees labels and values
The 'Subtotal' and 'Delivery Fees' labels, along with their corresponding values, have insufficient contrast, making them difficult to read.
💡 Recommendation:
Improve the contrast of the subtotal and delivery fees text to ensure better readability for all users.
Edit icon in header
The edit icon in the top right corner is ambiguous. It's unclear what it allows the user to edit at this stage of checkout (e.g., order items, delivery address, payment method). This can cause confusion or hesitation.
💡 Recommendation:
Clarify the function of the edit icon, perhaps by adding a label or tooltip, or by replacing it with more specific actions if editing is allowed.
Checkout page title and Checkout section title (bottom)
The 'Checkout' title at the top and the 'Checkout' section title at the bottom have the same font size and weight, which can cause slight confusion about which 'Checkout' refers to the page title and which refers to the summary section.
💡 Recommendation:
Differentiate the visual weight or size of the page title from the section title to improve clarity.
Delivery time '30-45 mins'
The '30-45 mins' delivery time is placed next to the 'Checkout' section title, but its visual connection to the overall order or the 'Total' is not immediately clear. It feels a bit orphaned.
💡 Recommendation:
Relocate the delivery time to a more logical position, perhaps closer to the 'Total' or within a dedicated delivery information section, to clarify its context.
Item prices (e.g., '$22', '$28')
The price for each item (e.g., '$22') is the same font size and weight as the item name, which reduces its visual distinction.
💡 Recommendation:
Adjust the font size or weight of the item prices to create a clearer visual hierarchy relative to the item names.
Subtotal and Delivery Fees labels and values
The 'Subtotal' and 'Delivery Fees' text is very light and small, making it less prominent and harder to read than the 'Total'.
💡 Recommendation:
Increase the font size and/or weight of 'Subtotal' and 'Delivery Fees' labels and values to improve readability and ensure they are easily distinguishable.
Edit icon in header
The edit icon (pencil) in the top right corner is very light grey on white, which might have insufficient contrast for some users.
💡 Recommendation:
Increase the contrast of the edit icon to ensure it is clearly visible and accessible.
Overall interface design
The overall color palette, while clean, leans heavily on light greys and white, which can feel a bit bland and lack a distinct emotional tone beyond 'minimalist'.
💡 Recommendation:
Consider introducing subtle brand colors or more varied shades to add personality and emotional depth without compromising cleanliness.
Edit icon in header
The edit icon in the top right corner feels a bit out of place with the 'Checkout' title and the back arrow. Its purpose isn't immediately clear in a checkout context.
💡 Recommendation:
Re-evaluate the placement and necessity of the edit icon in the checkout header, or provide clearer context for its function.
Quantity selector for each item
The quantity selector shows '1' but the plus and minus buttons are present. If the quantity is '1', the minus button should ideally be disabled or change to a 'remove item' action, to prevent accidental removal or confusion.
💡 Recommendation:
Implement logic to disable the minus button or change its function to 'remove item' when the quantity is at its minimum (1) to prevent unintended actions.