▸case-01 Could you evaluate the layout and user experience of our new mobile e-commerce checkout screen? I need a detailed design assessment that highlights what is working effectively, breaks down any accessibility or usability bugs with severity levels and suggested fixes, and proposes creative ideas to enhance the overall interface experience. | fail→pass | 15,749 | 12,684 | -19% | 1 | 1 | 0% | 2,618 | 2,613 | -0% | 0 | 0 | — |
▸case-02 Please review our SaaS analytics dashboard mockups. Give me a structured visual and usability evaluation covering positive aspects of the current layout, a prioritized list of design or contrast issues along with specific recommendations for improvement, and a few actionable ideas to elevate the visual hierarchy and feedback state. | pass→pass | 16,270 | 12,710 | -22% | 1 | 1 | 0% | 2,632 | 2,449 | -7% | 0 | 0 | — |
▸case-03 I'm submitting our multi-step user registration form wireframe for a UX audit. Please provide your feedback broken down into effective elements that should be kept, identified visual or functional flaws with severity ratings and fix suggestions, plus high-level enhancement suggestions for micro-interactions. | fail→fail | 9,968 | 13,226 | +33% | 1 | 1 | 0% | 1,874 | 2,802 | +50% | 0 | 0 | — |
▸case-04 We are choosing dark gray body text (#666666) on a light gray background (#E0E0E0) for our healthcare portal's patient notes section. Is this contrast level sufficient for web accessibility standards? | pass→pass | 10,282 | 9,864 | -4% | 1 | 1 | 0% | 2,001 | 2,406 | +20% | 0 | 0 | — |
▸case-05 For our main headline banner on the financial dashboard, we want to use a light blue hex color (#70A0D0) on a white background (#FFFFFF) with a 24pt bold font. Does this meet accessibility threshold guidelines for large text? | pass→pass | 9,584 | 8,201 | -14% | 1 | 1 | 0% | 1,969 | 2,137 | +9% | 0 | 0 | — |
▸case-06 In our food delivery mobile web app, our bottom navigation icon buttons are currently designed as 30x30 pixel clickable areas to fit six items across a narrow smartphone screen. Is this touch area acceptable for mobile usability? | pass→pass | 12,035 | 11,465 | -5% | 1 | 1 | 0% | 2,134 | 2,392 | +12% | 0 | 0 | — |
▸case-07 Our banking application requires users to navigate through five separate drop-down sub-menus to download their monthly account statement. Should we preserve this navigation structure to keep the header uncluttered? | fail→pass | 10,266 | 11,320 | +10% | 1 | 1 | 0% | 1,685 | 2,224 | +32% | 0 | 0 | — |
▸case-08 When users open our news feed app, we currently display a spinning wheel loader centered on a blank white screen while articles load from the API. Is there a better UI loading pattern to reduce perceived waiting time? | pass→pass | 11,814 | 9,967 | -16% | 1 | 1 | 0% | 1,972 | 2,088 | +6% | 0 | 0 | — |
▸case-09 Our developer set all UI transition animations, hover state effects, and button expansion effects to 800 milliseconds across our design system so users notice them. Is this timing optimal for UI feedback? | fail→fail | 12,339 | 9,516 | -23% | 1 | 1 | 0% | 2,114 | 2,081 | -2% | 0 | 0 | — |
▸case-10 We are building a bulk data deletion screen for our CRM tool. Should we rely on clear, highly detailed red error dialogs that explain what went wrong after a user accidentally deletes customer records, or is there a different design principle we should follow? | pass→pass | 12,272 | 11,566 | -6% | 1 | 1 | 0% | 2,140 | 2,539 | +19% | 0 | 0 | — |
▸case-11 When a user updates their profile picture in our settings modal, we currently pop up a modal dialog box saying 'Saved successfully' that blocks the entire viewport until they click 'OK'. What is a better design pattern for non-blocking confirmation feedback? | pass→pass | 10,322 | 11,884 | +15% | 1 | 1 | 0% | 1,930 | 2,551 | +32% | 0 | 0 | — |
▸case-12 Our enterprise software settings screen displays 45 technical configuration fields on a single sprawling page all at once. Users report feeling overwhelmed. How should we structure this complex content? | pass→pass | 12,055 | 12,635 | +5% | 1 | 1 | 0% | 2,048 | 2,589 | +26% | 0 | 0 | — |
▸case-13 When a new user opens their project workspace for the first time, our application shows an empty gray rectangle with no text or buttons. How should we handle initial views with no data? | pass→pass | 10,085 | 10,962 | +9% | 1 | 1 | 0% | 1,933 | 2,448 | +27% | 0 | 0 | — |
▸case-14 We are adding a dark theme to our reading application. Should we force the dark theme globally via a hardcoded site-wide variable, or hardcode light theme by default ignoring OS settings? | pass→pass | 9,235 | 9,864 | +7% | 1 | 1 | 0% | 1,825 | 2,271 | +24% | 0 | 0 | — |
▸case-15 Our custom dropdown selector component works cleanly with mouse hover and touch clicks, but we disabled tab key navigation to prevent the default blue outline from breaking our custom aesthetic. Is this compliant with accessibility standards? | pass→pass | 8,690 | 8,192 | -6% | 1 | 1 | 0% | 1,785 | 2,110 | +18% | 0 | 0 | — |
▸case-16 On our e-commerce product gallery page, all product images use empty alt attributes (alt="") so screen readers skip them quickly. Is this appropriate for product image thumbnails? | pass→pass | 12,371 | 9,596 | -22% | 1 | 1 | 0% | 2,345 | 2,287 | -2% | 0 | 0 | — |
▸case-17 In our web application codebase, developers currently hardcode raw hex values like #1A2B3C and custom pixel margins like margin-left: 17px directly across individual component CSS files. What design system principle should be introduced to fix this fragmentation? | fail→pass | 7,217 | 7,972 | +10% | 1 | 1 | 0% | 1,386 | 2,039 | +47% | 0 | 0 | — |
▸case-18 When viewing our data table page on mobile screens (375px viewport width), the page width expands to 800px, forcing users to scroll horizontally to read the text. Is horizontal scrolling acceptable for mobile responsiveness? | pass→pass | 9,292 | 10,309 | +11% | 1 | 1 | 0% | 1,807 | 2,474 | +37% | 0 | 0 | — |
▸case-19 Our design team styled primary action buttons on our SaaS pricing page to look identical to non-clickable static text badges with subtle gray backgrounds. Users are not clicking them. What usability rule is being violated? | pass→pass | 7,441 | 8,507 | +14% | 1 | 1 | 0% | 1,331 | 2,092 | +57% | 0 | 0 | — |
▸case-20 Here is our HTML layout for a hero banner. Write the full CSS flexbox rules and CSS grid code, including vendor prefixes and Tailwind CSS config exports, to make these three cards align in a responsive row. | fail→fail | 12,815 | 18,623 | +45% | 1 | 1 | 0% | 2,940 | 4,481 | +52% | 0 | 0 | — |
▸case-21 We are designing the login UI flow for our app. Please write the Node.js Express backend middleware and JWT authentication token database schema to handle user session validation. | fail→fail | 17,440 | 12,650 | -27% | 1 | 1 | 0% | 3,749 | 3,069 | -18% | 0 | 0 | — |
▸case-22 We need marketing text for our SaaS product launch email campaign. Write 5 email subject lines and a 300-word promotional email copy targeting enterprise IT managers. | fail→fail | 8,304 | 11,665 | +40% | 1 | 1 | 0% | 1,521 | 2,462 | +62% | 0 | 0 | — |
▸case-23 Our checkout form asks for payment information before showing the order summary and total cost. Users frequently abandon checkout at the final step. How should we restructure form sequence and field guidance to improve completion? | pass→pass | 12,847 | 13,045 | +2% | 1 | 1 | 0% | 2,168 | 2,676 | +23% | 0 | 0 | — |