Кейс: поетапна розробка дизайну сайту з урахуванням SEO

  1. Етап 1. Допит з пристрастю
  2. Як стати майстром наскрізний аналітики?
  3. Етап 2. Структура сайту
  4. Етап 3. Контент-план
  5. Етап 4. Прототип
  6. Етап 5. Make up
  7. Етап 6. Тести
  8. Етап 7. Останній ривок

Kokoc Group і Cossa продовжують серію майстер-класів по інтернет-маркетингу. Сьогодні розповідаємо, як ми розробляли дизайн інтернет-магазину морепродуктів з урахуванням його подальшого просування в пошукових системах.

Досвідом ділиться Ольга Бояршинова, керівник проектів WebProfy (Kokoc Group).

Етап 1. Допит з пристрастю

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

Витяг з брифа інтернет-магазину:


Питання Відповідь клієнта
Яке завдання має вирішувати сайт? Продаж товару кінцевому споживачу і роздрібним мережам через Інтернет. Надайте повну товарну матрицю. Надамо. Хто буде займатися наповненням сайту? Власними силами. Вкажіть регіон просування. Москва і область. Чого не повинно бути на сайті, наприклад, цін, карток товарів, адреси чи телефону? Нічого такого. Чи необхідна інтеграція сайту з 1С? На момент запуску інтеграція з 1С не передбачена. Які категорії цін необхідно реалізувати? Ціна за упаковку і за 1 кг. Які варіанти отримання товару? Кур'єр і самовивезення. Чи існує можливість самовивозу? Якщо так, чи є пункт самовивозу складом? Свій склад для самовивозу. Як плануєте здійснювати доставку товару: за допомогою логістичної компанії або власними силами? Власними силами. Чи існують в каталозі товари, що вимагають підтвердження менеджера перед оплатою? Ні. Скільки і які аудиторії є у ​​сайта? У сайту дві аудиторії - фізичні особи і мережеві компанії. Вкажіть приклади сайтів, дизайн яких вам подобається і повідомте чому. https://www.fl.ru/users/maxshirko/viewproj.php?prjid=3316171&f=2
http://alterwood.com.ua/ Яким повинен бути дизайн? Сучасний, лаконічний, теплий, позитивний. Можливо, для кожного розділу каталогу свій колір.

Як стати майстром наскрізний аналітики?

Наскрізна аналітика - головна магія інтернет-маркетингу і найпотужніший інструмент розвитку продажів без зростання бюджету. Впровадивши її, ви відразу зрозумієте, де клієнти губляться і що в вашому маркетингу треба поліпшити.
Хочете освоїти цю магію? Ось навчальний курс де детально пояснюють, як все працює, як впроваджувати і як використовувати на практиці.
Поспішайте дізнатися подробиці , Реєстрація скоро закриється!

Реклама

Заповнений бриф для нас такий же юридичний документ, як договір. На його основі ми створюємо сайт, а клієнт бере роботу.

Етап 2. Структура сайту

Перш за все, необхідно створити структуру майбутнього сайту. Ми вивчили призначений для користувача попит і склали список запитів по тематиці «купити рибу», «купити філе», «купити стейк», «філе риби», «доставка раків».

Проаналізували топ-10 сайтів-конкурентів, звертаючи увагу на розташування елементів на головній сторінці, меню, підрозділи і вид карток товару.

Отримана структура майбутнього сайту виглядала так:

На додаток SEO-аналітики підготували ряд рекомендацій, наприклад:

1. URL-адреси повинні строго відповідати структурі сайту, включати латинські (НЕ кириличні) символи і бути довжиною не більше 8-9 слів. приклад: http://site.ru/catalog/riba/file/treska/ .

2. Головне меню краще скласти з основних розділів:

3. Щоб відповідати комерційним факторів ранжирування, каталог і картки товарів повинні містити фотографії з можливістю їх перегляду і збільшення, основні характеристики (країна виробництва, спосіб фасування і очищення), ціну, кнопку «Купити».

4. Навігаційне меню повинно бути наскрізним і розташовуватися на всіх сторінках сайту. Краще виконати його у вигляді розкривається і згортається при натисканні на який-небудь розділ «гармошки».

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

  • особистий кабінет;
  • "замовити дзвінок";
  • Пошук по сайту;
  • Зворотній зв'язок;
  • онлайн консультант;
  • корзина і кнопка «Купити»;
  • кнопка «Купити в 1 клік».

А також фільтр / сортування товарів за різними параметрами:

  • рейтинг товарів;
  • відгуки про товари;
  • сортування товарів за ціною, найменуванням тощо;
  • швидкий перегляд карти товару з каталогу;
  • збільшений перегляд товару на мапі;
  • висновок товарів в каталозі по заданій кількості, а також кнопка «показати все»;
  • лічильник товарів (можливість покласти в кошик кілька однакових товарів).

Створення SEO-структури зайняло близько тижня, після чого перейшли до наступного етапу.

Етап 3. Контент-план

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

Ми розбили процес на 4 етапи:

  • підготовка контент-плану на основі затвердженої SEO-структури і інтерактивного прототипу сайту;
  • підготовка текстів і зображень;
  • перевірка підготовлених матеріалів для наповнення сайту;
  • внесення контенту в систему управління розробленого сайту.

підготовка контент-плану на основі затвердженої SEO-структури і інтерактивного прототипу сайту;   підготовка текстів і зображень;   перевірка підготовлених матеріалів для наповнення сайту;   внесення контенту в систему управління розробленого сайту

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

Етап 4. Прототип

Прототип сайту постаралися зробити максимально функціональним, щоб замовник міг зрозуміти, яким він буде, і при необхідності вніс правки. Завдяки прототипу ми отримали чіткий план, як отрисовать і зверстати сторінки.

На основі SEO-структури в програмі Axure RP створили 30 інтерактивних сторінок сайту, в тому числі «Головну», «Про компанії», «Доставка», кілька розділів і карток товару. Для цього використовували репозиторій (сховище безлічі шаблонів): з різних частин вже наявних варіантів склали унікальний.

Створення прототипу зайняло у дизайнера 32 години. В результаті замовник зміг спробувати себе в ролі відвідувача сайту і пройти повний шлях від головної сторінки до покупки.

Через 3 дні клієнт надіслав правки: на головній сторінці попросив збільшити цифри ціни і поміняти місцями з кнопкою «Купити», передбачити місце для другого номера телефону і перемістити адресу в «підвал» сайту. В каталозі необхідно було додати можливість вибору товару за кількістю калорій, а в картках - блоки «З цим товаром беруть» і «Рекомендовані товари».

Етап 5. Make up

Приступили до розробки дизайн-концепції. З огляду на логіку навігації, яку створили при прототіпірованії, залишалося за допомогою Adobe Photoshop додати стильові, колірні рішення, фотографії та шрифти. Ідея полягала в тому, що продукти на обробній дошці виглядають привабливіше, ніж заморожені в упаковках.

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

Вибрали відповідний шрифт «Лобстер»

Процес створення дизайн-концепції зайняв тиждень: основну ідею реалізував арт-директор, а деталі доробляв дизайнер.

Після узгодження концепції з клієнтом приступили до отрисовке головної сторінки: відобразили всі елементи, які були в прототипі, включаючи окремий макет з блоком акцій (запропонували кілька варіантів) і показали, як розкривається меню при натисканні.

За аналогією отрисовать сторінку каталогу і картки товарів - процес зайняв 20 годин.

За аналогією отрисовать сторінку каталогу і картки товарів - процес зайняв 20 годин

Додали сторінку стилів, де намальовані всі блоки, які не ввійшли в основні макети, наприклад, «Новини», «FAQ» і «Контакти».

Дизайн відправили на узгодження клієнту і попросили відповідати не відразу, а подумати кілька днів: часто те, що на початку відкидається, ввечері викликає захват.

Замовник попросив внести кілька змін, зокрема: розмістити товари на головній в порядку 3 × 3, додати в «шапку» інформацію про безкоштовну доставку замовлення на суму від 5000 рублів і вказівка ​​«Акція» на превью карток товарів.

Приступили до верстки сторінок сайту, використовуючи HTML5, CSS3, SCSS, gulp, JS + ES6 + jQuery. Через тиждень отримали готові макети з картинками, анімацією, які запрограмували і в результаті отримали готовий сайт з повноцінним функціоналом: наприклад, можливістю розрахунку вартості товару на калькуляторі і приміщення його в кошик.

Етап 6. Тести

Для перевірки якості кожен проміжний етап робіт зі створення сайту перевіряється на відповідність брифу, попередніх етапів, правилам розробки прототипу, дизайну, HTML-верстки і прив'язки макетів до сайту.

Перед тим як віддати готовий сайт замовнику, провели фінальне тестування. Першим «запустили» тімліда (керівника програмістів), потім до справи підключилися дизайнер і менеджер проекту.

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

Етап 7. Останній ривок

Повернули сайт в руки SEO-шників, які провели повний комплекс первинної оптимізації: скорегували структуру і мета-теги, «причесали» семантичне ядро, розширили каталог і написали тексти.

Після індексації змін провели роботу з аналізу пошукового індексу на технічні сторінки і дублі. Проблем не виявилося, сайт індексувався коректно і швидко. Подібні перевірки проводили щомісяця, в тому числі і після зміни алгоритмів пошукача.

Подібні перевірки проводили щомісяця, в тому числі і після зміни алгоритмів пошукача

В результаті через два місяці з моменту індексації трафік сайту перевищив 11 000 унікальних відвідувачів в місяць, а ще через 4 місяці - більше 32 000 відвідувачів, що відмінний результат для нового ресурсу.

Читати по темі:

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

Хто буде займатися наповненням сайту?
Чого не повинно бути на сайті, наприклад, цін, карток товарів, адреси чи телефону?
Чи необхідна інтеграція сайту з 1С?
Які категорії цін необхідно реалізувати?
Які варіанти отримання товару?
Чи існує можливість самовивозу?
Якщо так, чи є пункт самовивозу складом?
Як плануєте здійснювати доставку товару: за допомогою логістичної компанії або власними силами?
Чи існують в каталозі товари, що вимагають підтвердження менеджера перед оплатою?
Скільки і які аудиторії є у ​​сайта?