Redesigning content for millions of visitors

Turnstile and Challenge pages are among the most widely seen surfaces Cloudflare produces, encountered by internet users who often have no idea what Cloudflare is. I led a content strategy review across both products, rewriting widget states and redesigning the troubleshooting experience to help customers self-serve their problem solving and reduce the impact on customer support queries.

Company

Cloudflare

Turnstile widget in a Verifying state

What are Challenge Pages and Turnstile widgets?

Turnstile is Cloudflare's alternative to traditional CAPTCHAs, a lightweight verification widget embedded by website owners into their sites. Challenge pages are the full page screens shown when Cloudflare's Application Security stops a request and asks the user to verify themselves. Both are among the highest-traffic surfaces Cloudflare operates, and both talk to users who are typically unaware of Cloudflare's role.

Challenge pages and Turnstile widgets are primarily seen by end users who are not Cloudflare customers. They may have never heard of Cloudflare. When they hit a widget error or a challenge page, they may be confused, frustrated, and may not know what's happening or why. Every word on screen needs to make sense to someone with zero context.

Helpful content in an extremely small space

Identifying what content does and doesn't work

As part of this update, we conducted interviews to test how users responded to the existing verification language when compared with proposed alternatives. We discovered where the existing copy went right and went wrong. Call to actions such as "Verify you are human" worked well, however the statuses and call to actions relating to error states were not clear to test participants.

Widget size constraints

Every error state, fallback message, and action label had to communicate clearly within the fixed dimensions of the widget. Anything that couldn't be said concisely had to be offloaded to a linked troubleshooting page, which itself needed to be written for non-developers, not engineers.

Translation requirement

The copy for the new designs would be sent for translation into all supported languages once finalised. A word that is short in English may also be much longer in another language. This meant locking in the wording before implementation, as changes after the fact would be costly.

Shared troubleshooting doc across two surfaces

The same troubleshooting documentation page would be linked from both widget error states and the new challenge page designs. It had to work effectively for both contexts, written for non-technical end users, not developers, and accurate enough to serve as the only self-service troubleshooting resource available to someone stuck on a challenge.

A turnstile widget shown in both its normal rectangular size, and in it's square compact size. Each one also shows a variant with and without the cloudflare logo'

A new content system for three different experiences

The project covered three distinct but interconnected areas of content work, each requiring a different approach to the same underlying content challenge: being helpful to someone who doesn't have the context to understand what went wrong.

01

Turnstile widget states

Review content across all widget states to ensure every state is understandable and gives users a clear path forward.

02

Challenge pages redesign

Challenge pages perform the same task as turnstile widgets, however are presented as a full browser page. The pages afford more room for helpful content without requiring additional clicks.

03

Troubleshooting and FAQ

Maintain and evolve the troubleshooting documentation for end users stuck on a challenge. Create a new FAQ landing page for Challenge and Turnstile oriented towards non-developer visitors.

Challenge page error state informing the visitor that their device time is incorrect A turnstile widget with an error state displaying the Troubleshooting link, with an diagram arrow pointing to the troubleshooting modal. This modal offers additional troubleshooting advice and a feedback form to submit feedback to cloudflare

Where the hardest calls were made

Who does the feedback form send feedback to?

The feedback report form which appears in certain Turnstile failure states allows users to flag issues when the widget isn't working. During the content review, it became clear that users had no way of knowing whether submitting this form sent their feedback to the website owner or to Cloudflare directly. This ambiguity could lead to users requesting help from Cloudflare for issues that do not originate from Cloudflare.

Clarifying this in copy was an important content decision in the project. The solution was to make the recipient explicit in the form's introductory copy, so users knew exactly who they were contacting before they submitted.

Writing errors for users with no technical knowledge

Many of the widget's error states used language derived from technical documentation, that were then adjusted for a broader audience. Widget error states offer little room for helpful content, leaving only enough space to describe what happened, and to direct the user where to go to find out more.

Turnstile widget with an error state of browser not supported

Adding extra information on top of other states

Cloudflare's security can detect when a visitor's device has been infected with malware that uses it as part of an attack against websites or applications. These attacks work by coordinating large numbers of infected devices, often without their owners' knowledge. This type of malware is known as a botnet.

Once the main content of the security verification pages and widgets was updated, work began on how to inform visitors that their device had been flagged for botnet activity. This notification is purely informational and does not block users from completing verification as normal.

Fitting this message into the existing UI presented a challenge: the size and shape of the widget could not change, so the informational element had to be designed within the existing constraints. The message links to unbotnet.me, which explains botnets in plain language for a non-technical audience.

Botnet notification in turnstile widget