A hanging WooCommerce checkout on Black Friday taught me that a nicer spinner does not calm anyone down. Notes on cognitive tunneling, single-tasking flows, transient locks against panic clicks, and what an emergency mode looks like.
A fleet dashboard flashed so hard that a broken-down truck went unnoticed for twenty minutes. Faster polling made it worse. What helped: delta indicators, sparklines, skeleton screens, an honest last-sync label and ARIA live regions.
Trimming a legacy site cut page weights by 80%, and the same work cut its energy use. Five steps: pick one journey, benchmark it, set a page weight target, strip the WordPress junk nobody needs, then keep checking.
A client paid thousands for an AI accessibility overlay and still got complaints from deaf users. Notes on what does help: text-based contact options, human captions, visual and haptic cues in place of sound, and accessibility handled before launch instead of after.
A hero illustration that looked right at 16:9 and collapsed on mobile. Instead of shipping two SVG files, I moved the artwork into a hidden symbol library and referenced it from two wrappers with different viewBox values, then animated the use elements.
A client was shipping a 4MB transparent PNG for every header to get a 1950s cartoon look, which killed load time and left the page with no real headings. Layered text-shadows, paint-order and a small jiggle animation do the same job in CSS.
A $5M WooCommerce store shrugged off a 40% checkout drop-off until I stopped showing percentages and started showing session recordings and validation logs. The board approved the fix in ten minutes.
One WooCommerce stylesheet had twelve @keyframes definitions for a single fade-in, spelled three different ways. Here is the tokens file that replaced them, and how reduced-motion support fits in at the token level.