Final layout · for CEO sign-off before build

Thunder Honey, the definitive site layout.

The whole site on one page: the new three-item navigation, every page top to bottom with its final section flow, where each well-built section moves to, and what still needs work. This is the master reference the build follows. The principle throughout is simple: relocate and reword, never redesign.

3-item nav · frosted dropdowns Home · PDP · Learn/Science · About PDP sticky cart 5 listicle funnels (EN then SV) EU claims-safe

02  The whole site

Four jobs, one through-line.

Every page does a different job for a different visitor, but they share one H1 family ("Find your flow"), one close ("Our promise + Start Your Ritual"), and one claims discipline. The current live -figma build runs the homepage content on almost every page; this layout fixes that.

  • Home: discovery visitor from an article or brand search. Job: understand and trust the brand. ~8 sections, brand-first. (home.html)
  • PDP / Shop: warmer visitor from a listicle or persona LP. Job: confirm, prove, close. Lean, buy-first, with a sticky cart. (product-daylight.html)
  • Learn / Science: the single home for all evidence, split into SEO pages + Articles. Job: prove it honestly. (ingredients.htmlscience.html)
  • About: the brand and the people. Job: who is behind this and why. (our-story.html)

03  Home

Brand-first. ~8 sections, top to bottom.

home.html Job: understand + trust Visitor: discovery / organic ~8 sections (down from 15)

Home flow

Teaches why this category and why this brand, then hands the visitor off to the PDP or to Learn.

  1. Hero, "Find your flow" + the locked Option C subline. H1: "Find your flow." Subline (LOCKED): "Transform your mornings. A calmer body, a sharper mind, a steadier you." Single CTA: Start Your Ritual. Keep the video.
  2. Section 2, "The Cup" (pinned cinematic scroll story). The signature reveal. Carries the "doses that actually work / zero caffeine / a ritual you crave" beats, so it absorbs the old "supplement stack" grid and the standalone dose section.
  3. Formulated for function (benefit triplet). Three things that matter: calm steady energy · zero caffeine · full clinical doses. The skimmer "gets it" in five seconds.
  4. Energy graph: "Caffeine borrows energy. Thunder Honey builds it." Signature proof #1. One brand science moment, not five. Deep version lives on Science.
  5. Ingredient teaser (4–6 hero actives) → links to Learn. Discovery, not the full library. "Explore all 11 ingredients" links to the Learn / Science pages.
  6. How do you drink it? (reframed "How it works"). As a latte / as a coffee or tea replacement / in a shake. Turns "supplement" into "ritual".
  7. Reviews + "Join the movement" (social proof). Servings count, customer photo marquee, review marquee, press logos. Proof before the close.
  8. Our promise + CTA (closing block). 30-day guarantee + "Energy you build, not borrow" + Start Your Ritual + thin trust line. The page closes once.
Dropped from Home (de-dupe, not deleted): the "Replace your supplement stack" USP grid (now said by Section 2), the standalone dose section (it is beat 2 of Section 2 already), the "Based on research" stats (move to Science), the second community CTA (merged into Our promise), and the lifestrip (optional thin strip before footer). See the relocation map for where each goes.

04  PDP / Shop

MUD\WTR-style. Buy-first, 10 steps, with a sticky cart.

product-daylight.html Job: confirm + prove + close Visitor: warm / from listicle or LP 10 sections + sticky bar

PDP flow (corrected)

The gallery sells; a short run of tight sections closes. It does not re-run the homepage.

  1. Product hero: gallery + buy box + accordions. Above the fold: title, 4.8★ rating, subscription options (3-month default), ATC, 30-day guarantee. Accordions: Benefits · Supplement / nutrition facts · What's included.
  2. Join the movement: social proof. Servings, customer marquee, review marquee, press. Reassure the buyer they are not first.
  3. How do you drink it? Same "as a latte / replacement / shake" framing as Home. Easy to use = easy to commit.
  4. It's what's inside that counts: full 3×4 ingredient grid. Full grid, NOT a carousel. Every active at its dose, as proof that backs the price. Links to Learn for depth.
  5. How it stacks up: comparison. TH vs generic competitor (coffee / energy drink / mushroom coffee). A closing-stage buyer is comparing; hand them the table.
  6. Outcome timeline: what to expect. Weeks 1–2 → 12+. Buyers want to know what they get and when. PDP-only.
  7. What is Thunder Honey: short founder note. The MUD\WTR "WTF is this" beat, in brand voice. Human, brief.
  8. Reviews: rating bars + review cards. Late-stage social proof, the last nudge before the close.
  9. Ask us anything: FAQ. Full FAQ accordion lives here (the buy-box has only the compact one).
  10. Our promise + guarantee: closing block. 30-day money-back + Start Your Ritual. Same close as every page.

Sticky add-to-cart / "Start Your Ritual" bar

A persistent bar pinned to the PDP on scroll, so the buy action is always one tap away (every competitor PDP has this). It appears once the main buy box scrolls out of view, shows product + price + rating, and the CTA scrolls back to the buy box / adds to cart. We will build it so the CEO can see it in the prototype.

Thunder Honey DaylightFrom 489 SEK · subscribe & save · 4.8★
Start Your Ritual →
Dropped from PDP (was the homepage re-teach): the standalone "Formulated for function" feature card, the "Based on research" stats, the full energy graph, the separate "How it works" ritual block, and the duplicate FAQ block. The dose differentiator stays on the PDP, woven into the ingredient grid / inside-counts section as the reason-to-believe.

05  Learn / Science

The single home for all the evidence. Split for SEO, honest throughout.

science.html (overview) Job: prove it, honestly Overview + deep pages + Articles

"The science behind Thunder Honey" (overview / hub)

The hub page links out to every deep page and consolidates the heavy proof that was scattered across Home and PDP.

  1. Cited studies per active. Each claim carries its real citation (PMID / DOI), graded STRONG / MODERATE / PRELIMINARY, sourced from SCIENCE-CITATIONS.md.
  2. Research Summary (honest, not inflated). Lead with what is real and specific; grade the evidence transparently the way our own file does; keep the methodology footnote doing real work; do not fabricate counts.
  3. "Based on research" stats. Relocated here from Home + PDP. This is the evidence page, so the stats belong here.
  4. Energy graph (deep). The full, annotated version of the borrows-vs-builds curve.
  5. The dose difference (deep). "Same 10:1 extract. Ten times the dose." 1,000 mg vs ~100 mg, in full. Lives on PDP + Science.
  6. Full ingredient grid: all 11 actives, each linking to its deep page.

Deep pages (one each, split for SEO)

  • Dual-extracted mushrooms: the extraction method, why 10:1, the "ten times the dose" story.
  • NAD+ & NR: our strongest, cleanest claim. NR at 300 mg is clinically shown to raise NAD+ (Conze 2019, +51% at our exact dose). State the NAD+ rise; do not promise energy / longevity benefit (functional trials were null).
  • Lion's Mane: "may support cognition / focus, building over weeks." Frame as MODERATE, healthy-user caveat.
  • Cordyceps, Rhodiola, CDP-Choline, L-Theanine, Collagen, Cacao: one cited deep page each, at the honest framing in SCIENCE-CITATIONS.md.

Articles (the Journal, renamed)

The editorial library lives under Learn as Articles, feeding the same content engine as the deep science pages. Featured article hero → latest articles grid → newsletter signup. The ~40 existing article-*.html pages slot in here.

Claims discipline (cross-ref eu-compliance.html): in the EU the default is "no claim unless authorised." Botanical / fungi claims (Lion's Mane, Cordyceps, Chaga, Rhodiola, propolis) are on-hold and must not be advertised as benefits, even with a study attached, after the Apr 2025 CJEU ruling. Name the active, state the dose, stop. The one set of authorised benefit claims comes from niacin (vitamin B3) via the nicotinamide in the formula: energy metabolism, reduction of tiredness & fatigue, nervous-system function, psychological function, and skin: available only once the niacin dose and label declaration are confirmed by an advisor. Soften Chaga, propolis, MCT, and cacao per the citations file.

06  About

The brand and the people.

our-story.html Job: who + why A couple of pages

About flow

  1. Our story: the brand narrative. Developed in Sweden (never "Made in"). Why the brand exists.
  2. Founders: Joakim Bjarke and Nina Strauss. Editorial portraits, the human credibility.
  3. Mission: "Energy you build, not borrow." The mission line gets a home here as a landing section (see relocation map).
  4. Our promise: closing block. Same guarantee + CTA close as every page.

A second, lighter "About the company" page (Vitality Labs, contact, developed-in-Sweden detail) sits under the same ABOUT dropdown.


07  Relocation map

Every well-built section gets a new home, not the bin.

This is the critical instruction. The current pages contain a lot of well-designed, well-shot sections. Execution is relocate + reword, never redesign. Nothing in this list is deleted; each is moved, and duplicates are consolidated to a single canonical home.

Existing sectionStatusNew home(s)What to do
"Energy you build, not borrow" (community / mission CTA) KEEP About · Mission  +  Home closing block Use as a landing / mission section on About; the line also anchors the Home + every-page close.
"Start your ritual" / "Our promise to you" (guarantee) KEEP Closing block at the END of every page Merge promise + community into one outro card so each page closes once, not twice.
"Caffeine borrows energy" energy graph KEEP Home (signature proof)  +  Science (deep version) Short version on Home; full annotated version on the Science page.
"Based on research / not trends" stats RELOCATE Science page Pull off Home + PDP. The evidence page is the right home for the stats.
The dose difference ("Ten times the dose") DE-DUPE PDP  +  Science Standalone dose section dropped from Home (it is already beat 2 of Section 2). Stays on PDP + Science.
"Replace your supplement stack" USP grid FOLD Home · Section 2 + one line into Our promise Section 2 ("The Cup") now says this; fold one line into Our promise, cut the grid.
Ingredient carousel / breakdown SPLIT Home teaser (4–6) · PDP full 3×4 grid · Science full grid + deep pages Same component, three jobs: teaser, proof grid, library.
"How it works" 3-step ritual REWORD Home & PDP as "How do you drink it?" Reframe to latte / replacement / shake. Same build, new headline.
Social proof block (servings, marquees, press) REUSE Home ("Join the movement") · PDP Intentional repeat. One canonical block, used on both.
FAQ accordion CONSOLIDATE PDP ("Ask us anything") · compact in buy box Off Home. Fix "12 actives" → 11 in the answer (drifted copy).
Outcome timeline (Wk 1–2 → 12+) KEEP PDP only A buying-stage asset; stays on the PDP.
Comparison table KEEP PDP ("How it stacks up") Switch to a generic competitor framing; build out top-5 rows.
Reviews (rating bars + cards) KEEP PDP · Home (review marquee) Swap in real review content + customer images.
"Stories from the people behind the science" KEEP Science page Stays on the evidence page as human credibility.
Lifestrip (decorative photo strip) OPTIONAL Before footer, any page, if it earns its space Keep as a thin decorative strip only where it adds.
One rule to remember: if a section already looks good, it does not get redrawn. It gets a new address and, where needed, a new headline. Relocate + reword, never redesign.

08  Listicle / advertorial landing pages

Where the real selling happens. Five per-avatar funnels, EN first then SV.

The site itself is the simple, brand-safe destination. The selling pressure lives on the listicle / advertorial landing pages that feed paid traffic into the PDP. Build them EN-first, then localise to SV. Each maps to one avatar and runs the same proven arc.

Female hormones / cortisol

Avatar: Margareta · perimenopausal, 45–55

The caffeine-free morning that stops the cortisol spike and the 3pm crash.

Biohacker / optimiser

Avatar: Fredrik · 40s, data-driven

Eleven actives at full clinical doses, with the citations to back it.

Busy founder / flow-seeker

Avatar: Felix · 30s, founder

Trade the rollercoaster for steady, all-day flow.

Quit-coffee creative

Avatar: Sofia · 30s, creative director

The ritual that replaces coffee without losing the morning ceremony.

Swedish / non-metro

Avatar: Anna · 40s, outside the big cities

Developed in Sweden, made for Swedish mornings. The SV-native angle.

High-converting advertorial structure (researched)

Best practice for advertorial / listicle pages, applied to our avatars and kept claims-safe:

  1. Hook: open on a specific frustration the avatar already feels, so they feel seen in the first paragraph. The hook does most of the work; if they do not connect here, they leave.
  2. Problem agitation: name the cost of the status quo (the spike-and-crash, the wired-but-tired afternoon, the pile of half-used supplements) before introducing anything.
  3. Mechanism / "what is it": a short explainer that sets up why this works: dual-extracted mushrooms, full doses, the NAD+ story. Keep it ~70% informative, ~30% product.
  4. The numbered list: the core. 5–10 numbered reasons, one benefit each, skimmable. Numbered titles lift click-through.
  5. Social proof: woven in after the 3rd–4th point: review quotes, star ratings, customer / IG screenshots, press.
  6. Offer: the deal stated plainly (subscribe & save, price per morning), with the CTA repeated after the benefits and after the proof.
  7. FAQ: handle the last objections (caffeine, taste, how to drink, guarantee).
  8. Urgency / risk-reversal: the 30-day money-back close and a gentle reason to act now. Target length ~1,000–2,500 words.
EU claims-safe (cross-ref eu-compliance.html): the listicles get the most aggressive copy, so they need the tightest discipline. Use only the niacin-backed authorised claims (energy metabolism, tiredness & fatigue reduction, nervous-system function, psychological function, skin) for any benefit statement. For every botanical / fungus, name it and state the dose, no benefit claim. No "longevity", "balances cortisol", "adaptogen", "brain fuel", or "boosts immunity". Keep the food-supplement disclaimer on every page. Same H1 family and same close as the site, so the through-line stays consistent into the PDP.

09  Still needs work

The open checklist before this ships.

Content and asset gaps that block a clean launch. Most are swap-ins into sections that already exist (relocate + reword), plus the sign-offs only the CEO and the advisor can give.

  • Real UGC photosReplace the placeholder UGC with real creator content; varied poses; pour shots must show dark chocolate-milk liquid, not green/teal. Asset
  • IG story marquee screenshotsSwap the Instagram strip to real Instagram story / post screenshots. Asset
  • Image swaps for the stock shotsMove the remaining stock / catalog shots to the warm candid library across PDP editorial slots and the "Formulated for function" background. Asset
  • Comparison top-5 rowsFinish the PDP "How it stacks up" table with the top-5 comparison rows against a generic competitor. Content
  • Hero videoProduce / approve the final hero video frames (Nano Banana Pro) with the actual pouch in frame. Asset
  • Niacin label confirmationConfirm the niacin (B3) dose qualifies and is declared on the label, which unlocks the only authorised benefit claims. Advisor sign-off required. Compliance
  • Science sign-offFinal review of the Research Summary + per-active framing against SCIENCE-CITATIONS.md; lock the honest claims before anything goes public. Compliance
  • "11 actives" sweepFix the FAQ answer that still says "12 clinically-dosed actives" → 11, on Home + PDP. Copy
  • Real reviewsPull real review content from the live store into the Reviews section with customer images. Content