Ваша задача: проаналізувати поточну сторінку, запропонувати UX-поліпшення і зробити UI для Mobile (375-430 px) та Desktop (1440 px), з акцентом на конверсію в розрахунок, бо основний трафік іде з SMS-розсилок. Нижче розбір вашої сторінки, нова схема першого екрана і план. Це зовнішній огляд публічної сторінки (відкривав у мобільному режимі), статистики вашого кабінету я не бачив, тому цифри конверсії не обіцяю: виміряємо A/B.
| Знахідка | Чому це б'є по конверсії з SMS | Що зміню |
|---|---|---|
| Над формою стоїть смуга «УВАГА! О 00:00 відбудеться оновлення бази МТСБУ...» і шапка з двома телефонами та меню на 9 сервісів | На телефоні перший екран зайнятий службовим текстом і навігацією, а людина прийшла з SMS «продовжити поліс». Розрахунок опиняється нижче згину | форма на перший екран, смугу стискаю до рядка, меню ховаю |
| Заголовок «Електронна автоцивілка за 5 хвилин», а в description сторінки «розрахунок за 30 секунд» і «від 55 грн» | Обіцянки різні. Для SMS-аудиторії сильніша конкретика: що людина зробить зараз і скільки це займе | один заголовок з дією: «Продовжте автоцивілку за 30 секунд» |
| Перемикач «Дані останнього поліса» / «У мене нове авто!» і поле промокоду стоять поруч із формою | Промокод до розрахунку відводить увагу: людина йде шукати код і може піти з сторінки. Вибір сценарію теж зайвий крок, коли в SMS уже відомий клієнт | промокод ховаю під посилання після розрахунку, сценарій «продовження» за замовчуванням |
| У meta viewport стоїть maximum-scale=1 | Блокує збільшення сторінки пальцями. Для частини аудиторії (старші водії) це бар'єр, і це недоступність за WCAG | прибираю обмеження масштабу |
| Три кроки «Перевірте дані, Порівняйте, Оплатіть» і кнопка «Перейти до порівняння цін» розташовані наприкінці, після блоку переваг | Основна дія з'являється лише у фіналі довгої сторінки. На мобільному немає фіксованої кнопки | фіксована кнопка внизу екрана на мобільному |
| FAQ з довгими абзацами (документи, безпека, терміни) без згортання, близько 26 зображень на сторінці | Довгий скрол вантажить трафік зі SMS, а відповіді на 3 головні страхи (безпека, швидкість, документи) ховаються | короткі підказки біля форми, FAQ згортаю |
| Сторінка віддає HTML за 0,5 с, 142 КБ | Серверна частина швидка, проблема не у вазі першого відгуку | лишаю як є, зображення нижче згину відкладаю |
Дані з публічної сторінки, без вашої аналітики. Перед фіналом попрошу воронку з GA4 або Hotjar: на якому кроці падає більшість людей.
Дані останнього поліса / У мене нове авто! Промокод
Зараз: до форми потрібен скрол
Введіть номер авто, дані підтягнемо самі. Поліс прийде на e-mail і в Дію.
Пропозиція: форма на першому екрані, кнопка зафіксована
Порівняємо пропозиції ліцензованих страховиків і покажемо найнижчу ціну. Поліс прийде на e-mail і в Дію.
На десктопі форма праворуч від заголовка, меню сервісів стискається в один рядок. Нижче: 3 кроки зі схематичними іконками, порівняння цін, короткий FAQ у розгортальних блоках.
| Гіпотеза | Метрика | Як міряємо |
|---|---|---|
| Форма на першому екрані підвищує частку тих, хто почав розрахунок | Частка сесій з введеним номером авто | A/B: поточна сторінка проти нової на частині SMS-трафіку |
| Прибрати промокод із форми зменшує відтік до розрахунку | Частка дійшовших до результату | Подія розрахунку в GA4 і порівняння груп |
| Фіксована кнопка на мобільному швидше веде до порівняння цін | Клік по головній кнопці | Події кнопки, теплова карта скролу |
Результат залежить від трафіку й тексту SMS. Конкретного зростання не обіцяю: покажу, де вимірюємо і що перевіряємо першим.
| Етап | Що отримуєте | Дні |
|---|---|---|
| 1. UX-аудит сторінки й воронки | Звіт «знайшов, вплив, зміна», список правок за пріоритетом | 2 |
| 2. Mobile-макети | Екрани для 375-430 px у Figma: перший екран, результат, оплата, FAQ | 3-4 |
| 3. Desktop 1440 | Макети героя, 3 кроків, порівняння, FAQ, стани форми й помилок | 2-3 |
| 4. Передача | Файли Figma зі стилями й компонентами, специфікація для розробників, 2 раунди правок | 2 |