Innovate ADHD — Yidan Xu

This page runs on the product’s rules. One idea at a time, large type, high contrast. If it reads easily, that is the case study.

The problem

Somebody who suspects they have ADHD has three things to get through first. None of them is built for them.

01 · The website

A London ADHD clinic page as it loads: two rows of navigation totalling thirteen items, a heading, and three paragraphs of dense body text beside a box holding two buttons. The clinic’s name is masked. — A typical London ADHD clinic page. Name masked.

Another. Four claims and a review score before the first sentence.

A third London ADHD clinic page as it loads: a sidebar headed Contents listing ten sections, beside two paragraphs of introduction and two more headings. The clinic’s name is masked. — And another. A ten-item table of contents, like an academic paper.

Small type, long navigation, paragraphs before anything happens. Counted off the first one:

19links in the first screen.

13navigation items.

150words, about, before you scroll.

A lot of attention to spend before you have learned anything.

02 · The assessment

The Adult ADHD Self-Report Scale (ASRS-v1.1) symptom checklist: eighteen numbered questions in a dense table, each with five tick boxes headed Never, Rarely, Sometimes, Often and Very Often, split into Part A and Part B — The form people were asked to finish.

Eighteen questions, five lines of text each, and at the end you add up your own score across two parts.

The form asks for the exact executive function ADHD takes away. People started it, stopped partway, and never reached care.

A research note: ADHD assessment forms demand the exact executive functions that the condition impairs, so the process highlights the very struggles it is meant to evaluate, leading to burnout, distraction and frustration — The research the brief came out of.

03 · The two are never in the same place

You read the site, then you register somewhere else, then a questionnaire arrives by email, and you have to remember to go back and finish it.

Every step is somewhere to drop out, and this is the audience least able to carry a plan across them. None of the three pages above keeps the test on the page.

What I did

The brief I set myself: spend as little of a person’s attention as possible before they know whether they need help.

01 · Put the assessment inside the site

We were the first to put the screener inside the page itself. It sits there, in the page. No account, no email, no second visit. You answer, and the result and the next step are right there.

The team has changed the site since I left: the assessment sits much further down the page now, and some of the detail went with it.

02 · Gamify it, so people finish

Each question arrives on its own, answered by dragging a slider, with a face that reacts as you move it.

Underneath is the ASRS’s own screener, Part A: six questions out of the eighteen, scored the way a clinic scores them.

Four or more and it tells you to go and get assessed. Shorter, still clinically valid.

The original eighteen-question paper checklist, all of it on one page — **Eighteen at once, then six one at a time.**

The rebuilt assessment: one question on the screen, a progress bar, a yellow face, a slider, and five answer labels — **Eighteen at once, then six one at a time.**

The rebuilt assessment, one question at a time — The whole assessment, start to finish.

Close-up of the reacting face at five slider positions, from a raised-brow smile on the left through to a small frown on the right — The face at each slider position.

The result screen: the same face, the score out of six, one sentence on what it means, and two buttons, Chat with Expert and Redo, with the full scoring explained underneath — What six questions get you. A score, one sentence, one next step.

03 · New rules for the whole site

The site around it had been built for a neurotypical reader, like the clinic pages.

So I wrote new rules: one highlight colour so the eye lands where it should, larger type, more space, one clear action per screen.

Heading 1 · Onest 48 Semibold

Transform ADHD

Heading 2 · Onest 34 Semibold

Quick Assessment

Heading 3 · Onest 24 Semibold

What the result means

Body · Onest 18 Regular

Struggling with focus, overwhelm, or feeling misunderstood?

Link · Onest 18 Regular · #8E5D04

Book an assessment

#FCF9F0Page. Text on it measures 10.3:1.

#ECECECSurface, for anything that sits on the page.

#FDE3B0Tint. Text on it measures 8.7:1.

#F9AF28Highlight, for fills. Text on it measures 5.8:1.

#3E3C47Text, everywhere.

Ratios are the text colour on each ground. The highlight is a fill at 1.8:1 as text, so links take a darker tone, #8E5D04.

The same count, on my page

The Innovate ADHD homepage as I left it — The homepage, as I left it.

	Clinic page	Innovate ADHD
Links in the first screen	19	8
Navigation items	13	5
Words in the first screen	about 150	45

Counted the same way, both captures 1280 wide.

Every row is countable. None of it is taste.

The Innovate ADHD site today, scrolled top to bottom: the homepage, the clinical director, the services, a symptoms section, then the assessment, then the contact form — The site today, scrolled top to bottom. The assessment is a long way down.

The result

Four people with ADHD used it, and I sat with them.

“It felt easier. Other sites have so much text that I have no idea where to look.”

“The interaction is actually interesting. The old ones are so dull. I finished it, and I got my result quickly. I didn’t have to register, wait for a screening questionnaire, then remember to answer an email — that kills any motivation to do the test. Here I could see my result and what to do next, right on the page.”

“This would work for the full twenty-four-question version. I think far fewer people would give up halfway.”

“Cute site. I like it.”

“The logic is really clear, and the thing that made me happy is that I actually finished the basic ADHD test. I like it. It’s genuinely fun.”

A teammate who has ADHD, testing the live assessment. Anonymised at their request.

Five people, all five reached the end, and each said the same thing: easy to move through, and they knew quickly whether they needed help.

What people used

28%

of all clicks on the page landed on the assessment slider.

The most-used thing on the page, and that page is the one the product depends on.

Microsoft Clarity, on the live site after launch.

Google Search Console performance panel: 194 total clicks, 601 total impressions, 32.3 per cent average click-through rate and 3.7 average position — 194 clicks, 601 impressions, 32.3% click-through, 3.7 average position. Google Search Console, three months after launch. No advertising.

The Meet Our Team page — Named clinicians, bookable in the same flow.

What none of this proves yet is clinical outcome. That needs a longer run against the original form.

How I think about this

I design for ADHD.

Executive function is the expensive part.

The usual answer is to ask somebody to concentrate harder. I build the thing so that concentrating is not what it costs.

This page was built the same way, which is the only argument for it I trust.

How I worked with AI on this

Two weeks from concept to live only worked because AI sat inside a deliberate chain.

Figma prototypes

Fast, low-fidelity concepts shared early, so developers were building the right thing from day one.

AI-driven build

Vibe coding alongside the prototypes, turning ideas into working features fast.

AI-enabled validation

A second pass on usability and interaction clarity, before it reached real users.

Claude-assisted implementation

Refining and modifying developer-written code myself, so the build matched the intended experience.

Everything else I was doing on this project

Roadmap and delivery. I set what we were building and in what order, then ran it to a live product in two weeks, with the plan in one place so the clinical team and the developers worked off the same thing.
Research into requirements. I read the literature, spoke to people with ADHD, and turned what came back into a spec the developers could build against. I chose the leanest assessment model on the market as the base.
Deciding what got built first. The assessment came before everything else. Booking, content pages and the wider design system came after.
Working across teams. Clinicians had to sign off that the assessment stayed valid. Developers had to ship it. I sat between the two and made the trade-offs explicit.
Numbers after launch. I picked what to measure before we shipped, then said which of it meant something afterwards.
Positioning and early growth. I wrote how the product was described and where it went out, so it had people arriving at it and not only a URL.

What I would do next

Instrument the assessment question by question, so a drop-off traces to a specific screen, which a page-level number can only hint at. Then run the rebuilt version against the original form with real users on both sides. That turns a completion story into a defensible claim about clinical completion.