A UI seen billions of times a day

Everyone who uses the Internet has seen Cloudflare's Turnstile widget or Challenge Pages. What most people haven't considered is just how often those interfaces appear. Combined, they serve 7.67 billion times per day. That makes them candidates for the most-seen user interface on the planet.

BLOG-3124 Image 1

That volume carries a design burden that most products never face. The interface has to work for a grandmother in rural Japan, a teenager in São Paulo, a screen reader user in Berlin, and a busy executive in Lagos. In a moment of frustration. The fastest-growing category of Internet traffic, meanwhile, is bots — security challenges are getting more frequent, not less: 2.14 billion daily checks in 2023, 3 billion in 2024, and 5.35 billion in 2025, a 58.1% average annual increase. With more checks come more chances for bad experiences.

What the audit found

The redesign started with an audit of every state, error message, and interaction in both Turnstile and the Challenge Pages. What surfaced was inconsistency. Error states used different layouts, visual hierarchies, and tones of voice. Some messages were exhaustively technical — one referenced the device clock being wrong or the page being "accidentally cached by an intermediary." Others were uselessly vague: just "Timed out."

BLOG-3124 Image 3

On the feedback side, users were offered options like "The widget sometimes fails" versus "The widget fails all the time" — ambiguous choices that asked someone already frustrated to accurately characterize the frequency of their own failure. The feedback loop was capturing noise, not signal.

BLOG-3124 Image 4
Challenge Pages opened with similarly scattered messages and little actionable guidance when users needed it.
BLOG-3124 Image 5

It was humbling. But it produced a roadmap: unify the structure, simplify the language, and keep the user's state of mind front and center.

One architecture across everything

The team mapped every user path — happy and unhappy — across both products, tracking sentiment as users descended through error states.

The core fix: a single information architecture for Turnstile and Challenge Pages. Both would share the same visual hierarchy, the same placement for actions, explanatory text, and documentation links. That constraint narrowed design options, but it also meant that once a user understood one state, they understood every state. Cognitive load drops to the minimum during what is, at best, a moment of inconvenience.

BLOG-3124 Image 7

Testing against assumptions

Eight participants across eight countries tested both the existing experience and the proposed changes, with the presentation order counterbalanced to remove bias. They saw both without knowing which was old or new. The research confirmed some choices and upended others.

One open question: whether to align with the design convention used by most CAPTCHA providers, which show "I am human" on the interactivity state. Cloudflare used context-dependent phrasing: "Verify you are human," then "Verifying…," then "Success!" When tested head-to-head, the phased language won. For the interactivity state, "Verify you are human" scored 5 out of 8 versus 3 for "I am human." For the verifying state, it was 7.5 versus 0.5. Users wanted to know what was happening, not just be declared human.

BLOG-3124 Image 9

The research also exposed four concrete problems:

  • Feedback wasn't help. "Send Feedback" confused users. Who receives it — the site, Cloudflare, the ISP? At the peak of frustration, users don't want a reporting mechanism; they want a fix. "Send Feedback" became "Troubleshoot."
    BLOG-3124 Image 10
  • Red read as a verdict, not a suggestion. Full-saturation red backgrounds communicated failure and powerlessness even for errors that a simple retry would resolve. The fix: red reserved exclusively for icons, never for text or backgrounds.
    BLOG-3124 Image 11
  • Detail was costing clarity. Verbose technical explanations alienated the readers who weren't technical and bored the ones who were. The constrained space of a widget demanded concision.
  • Accessibility was on paper, not in practice. Some states used 10px fonts. Grey text met AA compliance thresholds but was still hard to read. The target became WCAG 2.2 AAA, the highest standard, and when accessibility conflicted with visual consistency, accessibility won. That meant designing to handle more than what automated checks can flag — screen reader flows, keyboard-only navigation, and color vision variation built into the design decisions themselves.

Language as an accessibility barrier

Roughly 40 languages are supported across Turnstile and the Challenge Pages. For accessible copy, the constraint is hardest in translation: what fits in English overflows in German; what is concise in Spanish becomes ambiguous in Japanese. The only way through is to simplify at the source. The consistent message format — "Unable to connect to website" with a "Troubleshoot" action — now holds its layout across radically different language families.

BLOG-3124 Image 12

What shipped in the final design

When the design work wrapped, the happy path — Verify you are humanVerifying...Success! — stayed essentially as it was. Testing showed users understood that flow well, and the distinct content per state turned out to be a strength rather than a complication.

BLOG-3124 Image 13

Everything else was rebuilt around the findings from user research.

Error states got shorter

Long explanatory copy in error states was replaced with two pieces of information: a simple state name such as "Incorrect device time," and a prominent "Troubleshoot" link. The detailed guidance now lives in a modal that opens only when the user asks for it.

BLOG-3124 Image 14

The troubleshooting modal provides context about why the error occurs (for example, that the device clock or calendar is inaccurate), numbered steps to try, links to documentation, and — only after the user has attempted a fix — a way to submit feedback. The ordering is deliberate: help first, feedback second. The verbose text about intermediary caching or cached challenge pages is gone from the widget itself.

Accessibility and consistency

Every state now satisfies WCAG 2.2 AAA contrast and readability requirements. Font sizes have minimums, interactive elements are focusable, and screen readers announce content properly.

Turnstile widgets and full Challenge Pages share the same information architecture: same hierarchy, same placement, same mental model. Challenge Pages now lead with the website name and favicon, then a clear status message such as "Verification successful" or "Your browser is out of date," followed by actionable guidance. The previous orange and red text blocks are gone.

BLOG-3124 Image 15

Language validation

Content was tested across more than 40 supported languages, with a three-layer review process: initial design review, professional translation by a vendor, and final review by native-speaking Cloudflare employees. The goal went beyond translation accuracy — the visual design had to hold up when content length varied considerably between languages.

BLOG-3124 Image 16

The result is a verification experience with improved clarity and accessibility, with security protections unchanged. The two weren't traded against each other.

Shipping to billions: the engineering side

The frontend work here ran close to platform primitives. The UI for both the Turnstile widget and the Challenge page is written in Rust, chosen for safety and cross-platform consistency, but it raises frontend complexity. Without the ergonomics of React-style frameworks, common interactions are reimplemented with lower-level constructs like document.getElementById, createElement, and appendChild.

Rust's compile times and strict checks slow iterative UI work compared to JavaScript frameworks, and debugging tooling is still maturing. Those constraints pushed the team toward more deliberate, disciplined UI development.

Internationalization beyond text swapping

Small visual changes — padding, alignment — surfaced a far larger internationalization challenge. With 16 UI states across 38 languages, text length variability alone required careful design. Some translations run 30 to 300 percent longer than English. A short English string like "Stuck?" becomes "Tidak bisa melanjutkan?" in Indonesian or "Es geht nicht weiter?" in German, which changes layout requirements dramatically.

Right-to-left support for Arabic, Persian or Farsi, and Hebrew meant mirroring entire layouts: alignment, navigation, directional icons, and animation flows. Many of those elements carried implicit left-to-right assumptions that had to be revisited. Ordered lists also needed locale-aware numbering rather than hardcoded Western 1-2-3 sequences.

Testing for confidence

With action points appearing in feedback reports, correctness mattered even more. Unit tests validated logic in isolation, and end-to-end tests confirmed that new states and languages worked in realistic scenarios. That testing foundation reduced regression risk and kept feedback reports reliable for users.

Outcome

Working with fewer abstractions pushed the team to reconsider assumptions, strengthen the internationalization strategy, and raise the quality bar. The result is a UI system the team trusts — which matters when iterating on something that runs at this scale.

Measuring the impact

The rollout is being tracked against five key metrics to determine whether the redesign achieved its goals.

  • Challenge Solve Rate. The percentage of issued challenges completed successfully. Replacing jargon like "intermediary caching" with simple labels like "Incorrect device time" should raise the CSR by removing hurdles that tripped up legitimate users — not by going easier on bots.
  • Time to Complete. Wall-of-red-text states left users paralyzed by choice. The new scannable, neutral-color design should let users identify and resolve issues in seconds rather than minutes.
  • Abandonment Rate. Saturated red caused users to feel they had failed and give up. Red is now reserved for icons, and the unified architecture aims to make users feel empowered to click Troubleshoot instead of clicking away.
  • Support Ticket Volume. The troubleshooting modal puts numbered, self-service steps directly in the widget, which should measurably reduce support tickets for both customers and internal teams.
  • Social Sentiment. Monitoring forums, feedback reports, and social channels should show whether the conversation shifts from "this widget is broken" to "I had an issue, but I fixed it."

The goal is often invisible security — the best challenge is one the user never sees. When a challenge must appear, it should act as an assistant rather than a bouncer. The redesign demonstrates that AAA accessibility and high security standards aren't competing priorities; the unified Turnstile and Challenge Page architecture provides a foundation for faster iteration and more humane protection.

Ongoing iteration

This redesign is treated as a foundation, not a finish line. User interactions with the new experience are still being monitored, and iteration will follow from what's learned. The feedback mechanisms built into the design are structured to help users troubleshoot first, rather than simply asking for problem reports — which should yield richer insight than before.

The security landscape will keep shifting as bot attacks become more sophisticated and AI blurs the line between human and automated behavior. Verification will only get harder. The job is to keep improving security without degrading the human experience, and to stay ahead of those changes.

Users encountering the new Turnstile or Challenge Pages can share feedback through the Cloudflare community forums or through the feedback mechanisms inside the experience itself.