/* casestudy-missionmittelstand-content.ru.jsx — Mission Mittelstand, русская версия. Та же структура и компоненты, что и в casestudy-missionmittelstand-content.jsx, русский текст в тоне migroplan / axiomlens / bachata. Экспортирует , , . Загружается из prod/ru/ — отсюда пути «../». */ const MMI = "../mm/"; const PROTOTYPE_FILE = "../mm/prototype-mobile.html"; /* ---- скриншот с браузерным «хромом» (десктоп); URL — статичный текст, не ссылка ---- */ function MMShot({ src, caption, alt = "Лендинг Mission Mittelstand", url = "mission-mittelstand.de", badge, badgeKind, placeholder }) { const open = useLightbox(); return (
{url} {badge && {badge}}
{src ? ( ) : }
{caption &&
{caption}
}
); } /* ---- рамка телефона (мобайл) ---- */ function MMPhone({ src, caption, alt = "Mission Mittelstand на телефоне", placeholder, tag, tagKind }) { const open = useLightbox(); return (
{tag && {tag}} {src ? ( ) : }
{caption &&
{caption}
}
); } function Placeholder({ label }) { return (
{label || "Экран"} Сюда идет экспорт прототипа
); } /* ---- анимированная метрика ---- */ 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}
    • )}
; } /* пять слабых мест */ const GAPS = [ ["01 · Ценность", "Продает компанию сильнее, чем саму шпаргалку", "Страница рекламирует Mission Mittelstand как организацию куда активнее, чем сам шаблон. А конкретная польза шпаргалки — единственное, что реально двигает конверсию лид-магнита, — упомянута буквально вскользь."], ["02 · Импульс", "Два CTA на разных концах страницы", "Призывов к действию всего два, и разделяет их вся страница целиком. Пропустил первый — впереди долгая прокрутка без второй возможности что-то сделать."], ["03 · Доверие", "«Скачивание», которое ничего не скачивает", "Каждая кнопка обещает «Vorlage herunterladen», но на телефон ничего не попадает: модалка собирает данные, а PDF приходит потом на почту. Формулировка сулит мгновенный файл, которого во флоу нет."], ["04 · Мобильное исполнение", "Неуклюже на телефоне", "Огромные малоинформативные секции, верстка, которая ближе к низу начинает разъезжаться, и раздутый неопрятный футер — все это тяжело идет на маленьком экране, а именно оттуда и приходит основной трафик."], ["05 · Соцдоказательство", "Trustpilot, слитый впустую", "Сильный рейтинг 4,5 и 870 отзывов на Trustpilot есть — но только внутри модалки, без возможности кликнуть, и на самом лендинге его нигде не видно. Лучший аргумент спрятан."], ]; /* «до» — их лендинг, в рамках телефона */ const BEFORE = [ [MMI + "before-hero.png", "Первый экран обещает «Vorlage herunterladen» — скачать шаблон."], [MMI + "before-modal.png", "…но клик открывает модалку с формой, а файл приходит потом на почту."], [MMI + "before-modal-trustpilot.png", "Рейтинг Trustpilot 4,5 показывается только внутри этой модалки, без возможности перейти."], [MMI + "before-wissen.png", "Большие секции несут очень мало информации — на телефоне это дорого обходится."], [MMI + "before-footer.png", "Футер раздутый и неопрятный, он затягивает страницу."], ]; /* «после» — редизайн по секциям (от пользы; ведет gif) */ const VISUALS = [ { n: "01", k: "Липкий CTA", h: "Кнопка, которая следует за вами вниз", img: MMI + "sticky-button.gif", desc: "Моя любимая мелочь, поэтому она идет первой. Прокручиваешь мимо кнопки в первом экране — и снизу выезжает узкий CTA, который остается в зоне большого пальца: один тап до формы. Как только форма появляется на экране, он прячется обратно, так что помогает, но никогда не надоедает. А тот длинный кусок в середине старой страницы без единого CTA? Его больше нет." }, { n: "02", k: "Ценность", h: "Что вы получаете — в три короткие строки", img: MMI + "after-value.png", desc: "Прямо под первым экраном три коротких пункта делают пользу шпаргалки очевидной — без прокрутки и догадок. Вы понимаете, что внутри файла и почему он стоит ваших контактов, еще до того, как о них попросят." }, { n: "03", k: "Доверие", h: "Сначала цифры, потом живое лицо", img: MMI + "after-stats.png", desc: "Сначала доверие держат несколько твердых цифр, а затем лично появляется Маттиас — основатель и владелец Mission Mittelstand. Человек за компанией на странице делает для доверия больше, чем любая стена из логотипов, и бренд наконец читается как живые люди." }, { n: "04", k: "FAQ", h: "Секция, которой в оригинале не было", img: MMI + "after-faq.png", desc: "Раньше FAQ не было вовсе — и это упущение, потому что он работает сразу в трех направлениях: снимает последние сомнения (это правда бесплатно? зачем мой телефон?), поднимает конверсию, закрывая возражения прямо перед формой, и заодно тихо помогает SEO-видимости." }, { n: "05", k: "Конверсия", h: "CTA, который говорит правду", img: MMI + "after-form.png", desc: "Никакой модалки и никакой приманки. Форма стоит прямо на странице, кнопка читается «PDF kostenlos erhalten», а строка под ней честно объясняет, зачем нужно каждое поле и что будет дальше. Ничто в запросе не должно застать вас врасплох." }, { n: "06", k: "Футер", h: "Футер, который знает, когда остановиться", img: MMI + "after-footer.png", desc: "Старый футер тянулся бесконечно. Я пересобрал его компактно и аккуратно — меньше, приятнее на вид и реально полезным как последнее, мимо чего вы прокручиваете." }, ]; /* ---- основная статья ---- */ function MMCase({ onPrototype }) { return (
{/* ── Hero ── */}
Кейс · Mission Mittelstand · 2026 · Лендинг · Концепт

Лид-магнит,
пересобранный под конверсию.

Mobile-first редизайн лендинга Mission Mittelstand с бесплатной шпаргалкой — пересобранный вокруг более понятной воронки, честной логики скачивания и более сильного аргумента в пользу самого шаблона.

Mission Mittelstand раздает бесплатную шпаргалку для «Mitarbeitergespräch» (беседы с сотрудником) как лид-магнит. Единственная цель страницы — убедить посетителя ее скачать. Запрос компании был прямым: пересобрать эту страницу так, чтобы выжать максимум скачиваний — сначала мобайл, десктоп опционально — в шрифте Barlow и по-прежнему безошибочно узнаваемо как Mission Mittelstand.

Настоящий фокус был на стратегии за структурой: какая секция что делает, почему стоит там, где стоит, и почему новая сборка должна конвертить лучше оригинала.

Сразу к визуалу
Пересобранный мобильный первый экран. Предложение, конкретная польза и доверие в первом же экране — мобайл был и обязательным условием брифа, и главной поверхностью страницы.} />
{/* ── Stats ── */}
{/* ── Nutshell ── */}

Проект вкратце

Моя роль
Стратегия воронки, UX лендинга, UX-текст, mobile-first UI-дизайн и интерактивный HTML-прототип
Формат
Бриф от компании — концепт-сборка, живой аналитики не давали
Ограничения
Шрифт Barlow · фирменный стиль Mission Mittelstand · мобайл обязателен / десктоп опционален · реалистично собираемо, без библиотек компонентов
 {["Стратегия воронки", "UX лендинга", "UX-текст", "Mobile-First UI", "Архитектура конверсии", "Доверие и соцдоказательства", "Интерактивный прототип"].map((c) => ( {c} ))}

Что я сделал

Гипотеза
{/* ── Потенциальные точки трения ── */}

Потенциальные точки трения

Аналитики к брифу не прилагалось, так что я начал с того, с чем мог: с самой страницы, с того, для кого она и откуда приходит ее трафик. Исходя из догадки, что большинство приходит уже подогретыми из таргета — заранее заинтересованными в шпаргалке, — задача сводилась к одному: перестать их терять. В таком прочтении у оригинальной страницы есть пять мест, где готовый к скачиванию посетитель может тихо сорваться с крючка.

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

Часть из этого доходит лучше, когда просто видишь:

{BEFORE.map(([src, cap]) => ( ))}
{/* ── Как я это пересобрал ── */}

Как я это пересобрал

Данных под рукой не было, так что я оперся на процесс. Примерно так работа и шла, от начала до конца:

{[ ["Прочитать страницу как посетитель.", "Прошел оригинал так, как это делает его трафик — с телефона — и разобрался, для кого она на самом деле и откуда приходят эти люди, прежде чем что-то менять."], ["Отметить трение и возможности.", "Пометил очевидные точки оттока и, что не менее важно, места с явным пространством для роста."], ["Зафиксировать гипотезу.", "Свел все это в позицию: вести от пользы шаблона, оставаться честным про скачивание, держать CTA всегда в пределах досягаемости."], ["Набросать три направления.", "Собрал три структурно разных первых прототипа и сравнил их бок о бок, прежде чем на чем-то остановиться."], ["Выбрать финалиста.", "Выбрал направление, которое лучше всего служит единственной цели — чтобы шпаргалку скачали — и отложил два других."], ["Довести до hi-fi.", "Одел победителя в полный стиль Mission Mittelstand, набрал в Barlow: по бренду и реалистично собираемо."], ["Сделать кликабельным.", "Выпустил его как интерактивный mobile-first HTML-прототип, который реально можно протыкать, — куда дальше плоского макета."], ].map(([b, t], i) => (

{b}

{t}

 ))}
{/* ── Визуал (зигзаг) ── */}

Редизайн, секция за секцией

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

{s.h}

{s.desc}
))}

Попробуйте вживую

Весь флоу — рабочий, самодостаточный HTML-прототип, который лучше всего открывать на телефоне.
{/* ── Десктоп ── */}

Десктоп, как осознанный MVP

Раз мобайл был обязательным фокусом, десктоп-версию я собрал как осознанный MVP: та же воронка и те же смыслы, реализованные как рабочий прототип, но с меньшим временем на широкую верстку. Будь времени больше, я бы дожал масштабирование и сделал секции в середине страницы богаче — но вся история уже здесь.

Та же воронка, шире полотно. Десктоп-сборка — честный MVP: история рассказана целиком, хотя с бóльшим временем я дал бы верстке больше воздуха.} />
{/* ── Выводы ── */}

Выводы

    {[ ["Веди от позиции.", "Даже без данных явная гипотеза делает работу проверяемой, а следующий шаг очевидным. Редизайн — это аргумент; данные — то, чем спор решается."], ["Честность — это тактика конверсии.", "Свести обещание CTA к тому, что происходит на деле, — самое проверяемое и, вероятно, самое влиятельное изменение во всей пересборке."], ["Сначала суть, потом бренд.", "Когда цель — скачивание, польза шаблона должна дойти до пользователя раньше истории компании."], ].map(([b, t], i) =>
  • {b} {t}
    • )}
); } /* ---- модалка скачивания интерактивного прототипа ---- */ 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(); }}>
Мобильный прототип

Откройте его на телефоне

Это самодостаточная офлайн-страница — она существует только как один этот файл. Скачайте его и откройте в любом браузере (лучше всего на телефоне или в мобильном режиме браузера).

Скачать прототип
); } /* ---- дисклеймер по товарным знакам / использованию (рендерится шеллом под финальным CTA) ---- */ function MMDisclaimer() { return (

Товарные знаки и использование. «Mission Mittelstand», знак BVMW и все связанные названия, логотипы, изображения и брендовые материалы, показанные здесь, принадлежат их правообладателям. Я не владею никакими правами на них и не претендую на них.

Этот кейс сделан по брифу от компании, и все показанные брендовые материалы были предоставлены мне для этой цели — воспроизведены здесь исключительно чтобы задокументировать мою работу. Это независимый концепт: не аффилирован с Mission Mittelstand, не одобрен ею и не является ее официальным продуктом, и никогда не публиковался ни на одном живом сайте.

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