Процес редизайну сайту на прикладі фінтех-проєкту

Добрий процес редизайну сайту йде у фіксованому порядку: аудит, бриф, структура, контент і довіра, дизайн, розробка з міграцією і перевірки запуску. Кожен крок закінчується рішенням, яке ви підписуєте. Саме через забігання наперед редизайни запізнюються і втрачають пошуковий трафік. Нижче проходимо кожен крок на прикладі проєкту редизайну для фінтех-компанії, який показує наш метод.

Проєкт починається з брифу: новий маркетинговий сайт для B2B-компанії у сфері платежів. Проєкт показує, як ми думаємо, що дає кожен етап і де лежать складні рішення. Екрани можна подивитися на сторінці редизайну сайту фінтех-компанії.

Процес редизайну сайту від початку до кінця

Більшість редизайнів ламається на краях, а не посередині. Сам дизайн рідко є проблемою. Проблеми починаються, коли ніхто не домовився про цілі або коли на запуску забули про URL старого сайту. Тому найбільше роботи в нашому процесі припадає саме на початок і кінець.

1. Аудит: що робить поточний сайт, для кого і за якими запитами ранжується.
2. Бриф: цілі, аудиторії, обмеження і що вважаємо «готово».
3. Інформаційна архітектура: сторінки, навігація і модель контенту.
4. Контент і патерни довіри: що має довести кожна сторінка і як.
5. Дизайн: макети, які переглядаємо у фіксованих раундах правок.
6. Розробка і міграція: код, редиректи, QA і запуск.

Кожен етап закінчується точкою погодження. Ніщо не рухається далі на мовчазному «так». Так ми й тримаємо фіксовану ціну: обсяг погоджено письмово ще до роботи, яку він описує.

Чому ми показуємо процес на одному проєкті

Агенції часто показують редизайни як скриншоти «до і після». Такі скриншоти ховають логіку рішень. Ми воліємо показати мислення на проєкті, який можемо описати повністю.

Бриф: B2B-компанія у сфері платежів середнього розміру із застарілим маркетинговим сайтом. Вона продає обережним бізнес-клієнтам, яким треба довіряти компанії ще до того, як вони замовлять демо. Для фінтех-команд це типова ситуація, і вона тисне на кожен етап процесу.

Коли в проєкті є аналітика, інтерв’ю й пошукові дані, кожне рішення спирається на них. Там, де фактів бракує, бриф відкрито називає свої припущення, тож кожне з них можна перевірити.

Крок 1: аудит поточного сайту і бриф

У реальному проєкті аудит дає нам найбільше знань. Ми дивимося на:

• Трафік і пошук: які сторінки приводять відвідувачів, за якими запитами ранжуються і які збирають посилання.
• Інвентаризацію сторінок: кожен URL, його призначення і чи заслуговує він жити далі.
• Шляхи конверсії: як відвідувач доходить від першого візиту до запиту на демо чи реєстрації.
• Контент: що застаріло, дублюється або бракує.
• Технічний стан: швидкість, доступність, біль із CMS та інтеграції.

У нашому чеклісті редизайну сайту перелічені всі 30 кроків, які ми проходимо. Аудит лягає в односторінковий бриф: цілі, основні аудиторії, три речі, які сайт має зробити зрозумілими, обмеження і критерії успіху. У цьому проєкті бриф короткий і конкретний, бо розмитий бриф дає розмитий сайт.

Крок 2: інформаційна архітектура до візуалу

Ми вирішуємо, які сторінки існують, ще до того, як їх хтось малює. Структура фінтех-сайту зазвичай має обслуговувати двох дуже різних читачів. Перший - покупець, який порівнює продукти. Другий - фахівець із ризиків чи комплаєнсу, який перевіряє, чи безпечно працювати з компанією.

У цьому редизайні такий поділ визначає навігацію. Продуктові сторінки відповідають на «що це робить і скільки коштує». Окремий розділ довіри відповідає на «чи безпечна ця компанія». Розділи посилаються один на одного, тож жоден читач не впирається в глухий кут.

Інформаційна архітектура дає ще й модель контенту. Кожен тип сторінки отримує визначені поля: продукт, сценарій використання, регуляторна вимога, людина з команди. Це спрощує подальше налаштування CMS і тримає сторінки однорідними, коли команда клієнта починає їх редагувати.

Крок 3: контент і патерни довіри

Покупці фінтеху не вірять прикметникам. Вони вірять конкретним твердженням, які можна перевірити. Тож для кожної ключової сторінки ми записуємо, що вона має довести і чим саме.

Патерни довіри в цьому редизайні:

• Сторінка безпеки простою мовою, що описує обробку даних, шифрування і контроль доступу без жаргону.
• Чіткі регуляторні факти: ліцензії, реєстрації і юрособа, якій вони належать, - як факти, а не значки.
• Зрозуміла логіка цін або принаймні ясне пояснення, як формується ціна і що на неї впливає.
• Конкретні люди, щоб покупці знали, з ким матимуть справу.
• Доступні форми з чіткими підписами, чесним текстом згоди і без несподіваних полів.

Жоден із цих пунктів - не візуальний трюк. Це рішення щодо контенту, тому вони йдуть до дизайну. Красива сторінка, якій нічого довести, лишається слабкою.

Крок 4: дизайн у макетах і фіксованих раундах

Коли структура і контент погоджені, дизайн стає зосередженою роботою. Спершу ми малюємо невеликий набір ключових шаблонів: головну, сторінку продукту, розділ довіри і довгу статтю. Їх можна подивитися як макети на сторінці проєкту.

Відгуки збираємо у фіксованих раундах правок. Наш редизайн сайту включає два. Кожен раунд - це зведені коментарі від команди клієнта, щоб дизайнер не ганявся за суперечливими побажаннями. Фіксовані раунди тримають графік чесним і змушують визначати пріоритети.

Скільки триває редизайн сайту?

Наш редизайн сайту зазвичай триває 5-6 тижнів для 8 шаблонів сторінок однією мовою. Графік росте разом з обсягом: приблизно плюс тиждень на кожні 4 додаткові шаблони і плюс тиждень на кожну додаткову мову.

Візьмімо редизайн, менший за цей проєкт: 12 шаблонів сторінок, 2 мови і аудит доступності. Наш калькулятор рахує його так:

• Базова ціна: 9 500 $, включно з 8 шаблонами сторінок і SEO-міграцією.
• 4 додаткові шаблони: фіксована ціна за кожен шаблон.
• Друга мова: 12% від базової ціни і додаткових шаблонів.
• Аудит доступності: 1 200 $.
• Разом: 13 650 $.

Це конфігурація калькулятора, тож кожен рядок ви можете перевірити самі. Вона показує, як кожен рядок змінює суму, і саме для цього потрібна детальна оцінка.

Крок 5: розробка, міграція і запуск без втрати трафіку

Розробка йде за погодженими шаблонами і моделлю контенту. А те, що захищає ваш поточний бізнес, - це міграція. На кожному редизайні ми готуємо мапу редиректів з кожного старого URL на нову адресу, зберігаємо метадані, які вже ранжуються, і порівнюємо пошукові дані до і після запуску.

Саме тому SEO-міграція входить у ціну кожного нашого редизайну. Наш посібник про міграцію сайту без втрати SEO описує весь метод, зокрема перевірки, які ми робимо в перші 30 днів.

Перед запуском сайт проходить QA-чекліст: браузери, доступність, продуктивність. Сам день запуску має бути найтихішим днем проєкту.

Сплануйте власний редизайн

Якщо вашому сайту потрібен редизайн, почніть з аудиту і брифу, ще до вибору підрядника. Наш редизайн сайту коштує від 9 500 $ за 8 шаблонів сторінок, із SEO-міграцією і двома раундами правок. Повний прайс і всі опції - на сторінці скільки коштує сайт.