STWBH — сайт сервісу підбору репетиторів
Найбільший проєкт із трьох: три мови, скрол-сцени на всю висоту екрана, окрема мобільна версія та заявка, яка приходить у Telegram. Фізика, математика й програмування — школа, університет, переїзд.
- Ніша
- Освіта, репетитори
- Мови
- UA · RU · EN
- Тип
- Багатосторінковий
- Адреса
- stwbh.com →
Задача
З чим замовник прийшов, чому саме три мови, на яку аудиторію цілились (Україна, виїхали за кордон, іноземці). І що просив уже після запуску — це показує, що робота не закінчилась здачею.
Що диктувала сама ніша: репетиторський ринок — це Buki, Preply та десяток агрегаторів з однаковими картками «предмет — ціна — рейтинг». Виглядати ще однією такою карткою означає програти їм за бюджетом на рекламу, не почавши.
Тому сайт побудований не як каталог, а як історія: людина не гортає список викладачів, а проходить шлях від «не тягну предмет» до заявки. Звідси й метафора сходження, з якої починається сторінка.
Що зробив
Три мови одним файлом
UA, RU і EN живуть в одному словнику й підставляються по атрибутах у розмітці. Це важливо не красою рішення, а тим, що новий текст додається один раз і одразу в трьох мовах — немає трьох копій сторінки, які через місяць розійдуться між собою.
Скрол-сцени
Тунель, сходження, розгортання блоків — анімації прив'язані до скролу, а не до таймера. Різниця принципова: користувач керує темпом сам, і сторінка не «грає ролик», поки він читає.
Зворотний бік — такі сцени легко ламаються при скролі вгору, якщо будувати їх наївно. Тут вони зібрані так, щоб коректно відпрацьовувати в обидва боки, і з зонами спокою між сценами, де сторінка просто скролиться.
Окрема мобільна версія
Не «стиснутий десктоп», а свій файл із власною версткою. Причина проста: скрол-сцена, розрахована на широкий екран, на телефоні перетворюється на нескінченне гортання, а половина ефектів з'їдає батарею. Мобільна версія робить те саме коротше.
16 напрямів навчання
Замість «фізика, математика, програмування» — розгорнутий перелік напрямів. Кожен з них це окремий пошуковий запит, і чим конкретніше названо предмет, тим точніше приходить людина.
Заявка в Telegram
Форма не падає в пошту, яку ніхто не читає, а приходить у Telegram. Причому без автовідправки: замовник бачить заявку і відповідає сам, живою людиною, а не автоматичним «дякуємо за звернення».
Розмітка й UX-аудит
У коді стоїть EducationalOrganization, WebSite і FAQPage одним графом. Після запуску сайт пройшов окремий UX-аудит із порівнянням з Buki та Preply — близько 25 знахідок було виправлено вже в бойових файлах.
Як виглядає
Скріншоти зняті з живого сайту. Мобільний — окрема версія, не звужений десктоп.
Технічно
Сторінка важча за два інші кейси — це плата за відеофони й скрол-сцени. Швидкість тут свідомо розміняна на враження, і в цій ніші розмін виправданий: агрегатори швидкі й однакові.
Результат
Що вийшло після запуску: чи йдуть заявки в Telegram, що каже замовник, що просив доробити далі. Для цього кейсу особливо цінно, якщо є порівняння «до і після» — сайт великий, і читач захоче знати, чи окупився.
Інші кейси
Потрібен сайт, який не схожий на агрегатор?
Спершу роблю робочий прототип безкоштовно — подивитесь на свою сторінку живою, а не на макет у презентації.