How comfortable are you with injections?
How comfortable are you with injections?
Question titles should be 30px; the Deploy shows them at 24px — a bit too small. (Its code also asks for a lighter weight, but the Lora font has no lighter version, so it looks the same — just a small code tidy-up.)
| Item | Should be | Deploy | Status |
|---|---|---|---|
| Question title size | 30px | 24px | ✗ too small Medium |
| Form-field label weight | 600 | 400 | ✗ too light Low |
| Card corners | 24px | 20px | ✗ slightly off Low |
| "Let's Get Started" button | weight 400 | weight 500 | ✗ too bold Low |
| Card hover | border + faint tint | border only | ✗ missing tint Low |
| Body font | canada-type-gibson | Gibson | ✓ correct |
| Answer-card border | 2px #EEEEEE | 2px #EEEEEE | ✓ correct |
| Button / pill weight | 400 | 400 | ✓ correct |
The line under the headline has its letters spaced a little wider and its rows a little taller than staging.
Name fields have a thinner, warmer-toned border than staging.
1.5px #E6E3E1 · Staging 2px #EEEEEEThe disabled "Let's Get Started" button uses different greys.
#F5F5F4 + #626262 text
#EEEEEE + #8D8D8E text
On phones: the text you type into the name boxes stays 16px instead of shrinking to 14px. (The headline also asks for a lighter weight on phones, but Lora has no lighter version so it looks the same — just a small code tidy-up.)
The answers are laid out as a grid of rectangular boxes. The approved design is rounded pills, centred, that hug their text and wrap onto new lines. This is the biggest visual difference in the whole quiz.
The helper line dropped the "1–3": it says "Choose your top priorities…" but should say "Choose your top 1–3 priorities…" (and end with a period).
Deploy adds a live counter to the helper line ("· 1 selected") that staging doesn't show.
On a first-ever visit, the goal icons can appear a moment late (they load as separate image files). Consider preloading them.
Layout, wording, the "OR" divider, the teal "ALL AREAS" badge and the Back/Continue buttons all match staging. Only the shared issues above apply.
"Select all that apply" is 12px on deploy; staging uses 14px.
Staging has this step (B12 / Glycine / L-Carnitine cards with icons). It never appears on the deploy — confirmed across three different answer paths (weight-loss + sexual health; longevity + energy; metabolic + muscle + energy), all of which skip it. It looks unbuilt on the deploy, or its trigger differs from staging. Needs a dev answer.
Three things on one screen: the option icons are missing (confirmed missing — not a loading delay), the helper line is missing, and Continue is clickable before an option is chosen (staging keeps it off until you pick).
Which format would you prefer…?
No icons · no helper line · Continue already active
Which format would you prefer…?
You can change this later with your clinician.
Icons on options · helper line · Continue off until a pick
A clean match: heading, helper line, the three options with icons, and the buttons all agree with staging. Only the shared issues above apply.
The title is capitalised differently: deploy says "Quick Health Check"; staging says "Quick health check". (Staging capitalises titles like a normal sentence — only the first word.)
The helper text is different. Deploy: "Based on your suggested pathway…" plus two extra lines about relevant conditions and provider review. Staging: "Based on your suggested protocol, do any of the following apply to you? This confirms peptides are a good fit." Also note deploy says "pathway"; staging always says "protocol".
The two-column list of condition cards and the "None of these apply to me" option match the staging design. (The conditions listed differ by what was recommended — that's by design.)
Deploy adds a whole screen that staging doesn't have: an email box, a Terms/Privacy/marketing tick-box, and a "View My Results" button. You can't see your results until you fill it in. If this screen is meant to be there (to collect emails), staging should add it; if not, it should be removed.
Drop your email and we'll send your suggestions there too.
Results appear right after the loading screen.
The orbit-style loader animation matches the staging design.
The loader copy differs: deploy shows "Alex, your protocol is ready" / "Personalized suggestions generated"; staging shows "Ranking your suggestions…" / "Building your personalized list".
Each product card is missing the "How It Works" drop-down. Staging cards have two drop-down sections; the deploy only has one.
NAD+ Nasal Spray
Longevity
NAD+ Nasal Spray
Longevity
Heading reads "Your Personalized Program"; staging says "Your personalized protocol" — different word and different capitalization.
The intro sentence is longer on deploy (it names your priorities). Staging keeps it short: "Selected to help you reach your goals more effectively."
The card itself matches well: serif product name, category label, format pill with icon, "WHY WE RECOMMEND THIS" box, outline "Learn More" + teal "Get Started", and the "THE FOUNDATION" label.
Differences in how the quiz behaves, not how it looks.
Email gate before results (see step 08) — exists only on deploy.
Support type step unreachable (see step 04) — exists only on staging.
Continue button rules are inconsistent. On Format, deploy lets you continue with nothing selected (staging doesn't). On Health check, it's the other way round: deploy requires a choice, staging doesn't. Pick one rule — staging's intent is: Continue stays off until the step is answered.
The deploy has extra steps the staging doesn't. Depending on the goals chosen, the deploy inserts screens staging never designed — for example "Set your focus," a height & weight form, a "Have you used GLP-1 medications… in the last 45 days?" question, and per-goal follow-ups like "Which of these best describes your energy levels…?" They follow the same card pattern but aren't in the approved staging, so design should review and sign off (or staging should add them).
In the design system, hovering a card changes its border and adds a faint background tint. The Deploy only changes the border — it's missing the tint. Small, but easy to add. Hover (or tap) each card to compare.
Buttons and the pointer cursor already match — only the card hover tint is missing.