/* casestudy-missionmittelstand-content.jsx — Mission Mittelstand case study. Exports , , . Depends on core.jsx + casestudy-shared.jsx. */ const MMI = "mm/"; const PROTOTYPE_FILE = "mm/prototype-mobile.html"; /* ---- browser-chrome shot (desktop); URL is static text, never a link ---- */ function MMShot({ src, caption, alt = "Mission Mittelstand landing page", url = "mission-mittelstand.de", badge, badgeKind, placeholder }) { const open = useLightbox(); return (
{url} {badge && {badge}}
{src ? ( ) : }
{caption &&
{caption}
}
); } /* ---- phone bezel (mobile) ---- */ function MMPhone({ src, caption, alt = "Mission Mittelstand on mobile", placeholder, tag, tagKind }) { const open = useLightbox(); return (
{tag && {tag}} {src ? ( ) : }
{caption &&
{caption}
}
); } function Placeholder({ label }) { return (
{label || "Screen"} Prototype export goes here
); } /* ---- animated stat ---- */ function MMStat({ to, pre = "", suf = "", text, label }) { const ref = useRef(null); const [run, setRun] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const inView = () => { const r = el.getBoundingClientRect(); return r.top < (window.innerHeight || 800) * 0.85 && r.bottom > 0; }; if (inView()) { setRun(true); return; } const onScroll = () => { if (inView()) { setRun(true); cleanup(); } }; const t = setTimeout(() => { setRun(true); cleanup(); }, 2500); function cleanup() { window.removeEventListener("scroll", onScroll); clearTimeout(t); } window.addEventListener("scroll", onScroll, { passive: true }); return cleanup; }, []); const [val, setVal] = useState(0); useEffect(() => { if (!run) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVal(to == null ? 0 : to); return; } let raf = 0, start = 0, done = false; const target = to == null ? 0 : to; const dur = 1300; const tick = (t) => { if (!start) start = t; const p = Math.min((t - start) / dur, 1); setVal(Math.round((1 - Math.pow(1 - p, 3)) * target)); if (p < 1) raf = requestAnimationFrame(tick); else done = true; }; raf = requestAnimationFrame(tick); const fb = setTimeout(() => { if (!done) setVal(target); }, dur + 500); return () => { cancelAnimationFrame(raf); clearTimeout(fb); }; }, [run, to]); return (
{text ? text : {pre}{val}{suf}}
{label}
); } function MPlain({ items }) { return
    {items.map((t, i) =>
  • {t}
    • )}
; } function KL({ items }) { return
    {items.map(([b, t], i) =>
  • {b} {t}
    • )}
; } /* the five gaps */ const GAPS = [ ["01 · Value", "Sells the company harder than the worksheet", "The page pitches Mission Mittelstand as an organisation far more than it pitches the worksheet. The template's concrete benefit — the one thing that actually drives a lead-magnet conversion — barely gets a word."], ["02 · Momentum", "Two CTAs, a whole page apart", "There are only two calls to action, separated by the entire page. Miss the first one and it's a long scroll with no way to act again."], ["03 · Trust", "A \u201Cdownload\u201D that never downloads", "Every button says \u201CVorlage herunterladen\u201D, yet nothing lands on your phone: a modal collects your data and the PDF turns up by email afterwards. The wording promises an instant file the flow never delivers."], ["04 · Mobile craft", "Clumsy on a phone", "Huge, low-information sections, a layout that starts to break up near the bottom, and an oversized, unkempt footer — all heavy going on a small screen, where most of this traffic actually is."], ["05 · Proof", "Trustpilot, wasted", "A strong 4.5 / 870-review Trustpilot rating exists — but only inside the modal, non-clickable, and never surfaced on the landing page itself. The best proof point is hidden."], ]; /* before evidence (their landing, in phone frames) */ const BEFORE = [ [MMI + "before-hero.png", "The hero promises \u201CVorlage herunterladen\u201D — download the template."], [MMI + "before-modal.png", "\u2026but the click opens a modal form, and the file turns up by email afterwards."], [MMI + "before-modal-trustpilot.png", "The 4.5 Trustpilot rating only shows up inside that modal, with no way to click through."], [MMI + "before-wissen.png", "Large sections carry very little information — costly on a phone."], [MMI + "before-footer.png", "The footer is oversized and unkempt, dragging the page out."], ]; /* after — the redesign, section by section (benefit-led; gif leads) */ const VISUALS = [ { n: "01", k: "Sticky CTA", h: "The button that follows you down", img: MMI + "sticky-button.gif", desc: "My favourite little detail, so it goes first. Scroll past the hero button and a slim CTA slides in and stays within thumb's reach — one tap to the form. It ducks back out the second the form is on screen, so it helps without ever nagging. That long, CTA-less stretch in the middle of the old page? Gone." }, { n: "02", k: "Value", h: "What you get, in three quick lines", img: MMI + "after-value.png", desc: "Right below the hero, three short points make the worksheet's payoff obvious — no scrolling, no guessing. You know what's in the file and why it's worth your details before anything else asks for them." }, { n: "03", k: "Trust", h: "Hard numbers, then a real face", img: MMI + "after-stats.png", desc: "A handful of hard numbers carry the credibility first, then Matthias \u2014 the founder and owner of Mission Mittelstand \u2014 shows up in person. Putting the man behind the company on the page does more for trust than any wall of logos, and the brand finally reads as actual people." }, { n: "04", k: "FAQ", h: "The section the original never had", img: MMI + "after-faq.png", desc: "There was no FAQ before — a real miss, because it pulls triple duty: it settles the last doubts (is it really free? why my phone number?), it nudges conversion by clearing objections right before the form, and it quietly helps SEO visibility on top." }, { n: "05", k: "Convert", h: "A CTA that tells the truth", img: MMI + "after-form.png", desc: "No modal, no bait. The form sits right on the page, the button reads \u201CPDF kostenlos erhalten\u201D, and a line underneath owns up to why each field is there and what happens next. Nothing about the ask should catch you off guard." }, { n: "06", k: "Footer", h: "A footer that knows when to stop", img: MMI + "after-footer.png", desc: "The old footer went on forever. I rebuilt it tight and tidy — smaller, better looking, and genuinely useful as the last thing you scroll past." }, ]; /* ---- main article ---- */ function MMCase({ onPrototype }) { return (
{/* ── Hero ── */}
Case Study · Mission Mittelstand · 2026 · Landing page · Concept

A lead magnet,
rebuilt to convert.

A mobile-first redesign of Mission Mittelstand's free-worksheet landing page — restructured around a clearer funnel, honest download logic and a stronger case for the template itself.

Mission Mittelstand offers a free "Mitarbeitergespräch" (employee-review) worksheet as a lead magnet. The single goal of the page is to convince visitors to download it. The company's request was direct: redesign that page to maximise downloads — mobile first, desktop optional — in the Barlow typeface and still unmistakably Mission Mittelstand.

The real focus was the strategy behind the structure: which section does what, why it sits where it does, and why the new build should convert better than the original.

Skip to the visuals
The redesigned mobile hero. Offer, concrete benefit and trust in the first screen — mobile was both the mandatory brief and the page's primary surface.} />
{/* ── Stats ── */}
{/* ── Nutshell ── */}

Project in a Nutshell

My role
Funnel strategy, landing UX, UX writing, mobile-first UI design and an interactive HTML prototype
Format
A brief from the company — concept build, no live analytics provided
Constraints
Barlow type · Mission Mittelstand corporate design · mobile mandatory / desktop optional · realistically buildable, no component libraries
 {["Funnel Strategy", "Landing UX", "UX Writing", "Mobile-First UI", "Conversion Architecture", "Trust & Social Proof", "Interactive Prototype"].map((c) => ( {c} ))}

What I delivered

The hypothesis
{/* ── Potential friction points ── */}

Potential Friction Points

No analytics came with the brief, so I started where I could: the page itself, who it's for, and where its traffic comes from. Working from the hunch that most visitors land pre-warmed from targeted ads — already curious about the worksheet — the job came down to one thing: stop losing them. Read that way, the original page has five spots where a ready-to-download visitor could quietly slip off the hook.

{GAPS.map(([n, t, d]) => ( {n} {t} {d} ))}

Some of these land better when you just see them:

{BEFORE.map(([src, cap]) => ( ))}
{/* ── How I rebuilt it ── */}

How I Rebuilt It

With no data to lean on, I leaned on process instead. Roughly how the work went, start to finish:

{[ ["Read the page like a visitor.", "Went through the original the way its traffic does — on a phone — and worked out who it's really for and where those people come from before changing a thing."], ["Mark the friction and the upside.", "Flagged the obvious drop-off points, and just as importantly the spots with clear room to grow."], ["Commit to a hypothesis.", "Turned all that into a point of view: lead with the template's value, stay honest about the download, keep a CTA always within reach."], ["Sketch three directions.", "Built three structurally different first prototypes and compared them side by side before committing."], ["Pick the finalist.", "Chose the direction that served the one goal best — get the worksheet downloaded — and set the other two aside."], ["Take it to hi-fi.", "Dressed the winner in full Mission Mittelstand styling, set in Barlow: on brand, and realistic to actually build."], ["Make it clickable.", "Shipped it as an interactive, mobile-first HTML prototype you can actually tap through, well past a flat mockup."], ].map(([b, t], i) => (

{b}

{t}

 ))}
{/* ── Visuals (zigzag) ── */}

The Redesign, Section by Section

{VISUALS.map((s, i) => (
{s.n}{s.k}

{s.h}

{s.desc}
))}

Try the real thing

The whole flow is a working, self-contained HTML prototype — best opened on a phone.
{/* ── Desktop ── */}

Desktop, as a Deliberate MVP

With mobile as the mandatory focus, I built the desktop version as a conscious MVP: the same funnel and messaging, implemented as a working prototype, with less time on the wider layout. Given more time I'd push the scaling and design richer mid-page sections — but the full story is already here.

Same funnel, wider canvas. The desktop build is an honest MVP — the story's all here, even if I'd give the layout more room to breathe with more time.} />
{/* ── Learnings ── */}

Learnings

    {[ ["Lead with a point of view.", "Even without data, an explicit hypothesis makes the work reviewable and the next step obvious. The redesign is the argument; data is how you'd settle it."], ["Honesty is a conversion tactic.", "Matching the CTA promise to what actually happens is the most testable — and probably highest-impact — change in the whole rebuild."], ["Lead with the thing, then the brand.", "When the goal is a download, the payoff of the template has to arrive before the company story."], ].map(([b, t], i) =>
  • {b} {t}
    • )}
); } /* ---- Interactive-prototype download modal ---- */ function MMPrototypeModal({ open, onClose }) { const closeRef = useRef(null); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; closeRef.current && closeRef.current.focus(); return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [open, onClose]); if (!open) return null; return (
{ if (e.target === e.currentTarget) onClose(); }}>
Mobile prototype

See it on your phone

This is a self-contained, offline page — it lives only as this one file. Download it, then open it in any browser (a phone, or your browser's mobile view, works best).

); } /* ---- Trademark / usage disclaimer (rendered by the shell, below the closing CTA) ---- */ function MMDisclaimer() { return (

Trademarks & usage. "Mission Mittelstand", the BVMW mark, and all related names, logos, imagery and brand assets shown here are the property of their respective owners. I don't own or claim any rights to them.

This case study was produced for a brief from the company, and all brand materials shown were provided to me for that purpose — reproduced here solely to document my work. It is an independent concept: not affiliated with, endorsed by, or an official product of Mission Mittelstand, and it was never deployed on any live site.

); } Object.assign(window, { MMCase, MMDisclaimer, MMPrototypeModal });