Редизайн сайту 1+1 media
Завдання
- Розробити єдині корпоративні правила веб-стилю.
- Розподілити різні цільові аудиторії по окремих розділах сайту.
- Спростити навігацію на сайті.
- Розробити мобільну версію сайту.
- Збільшити значимість сайту в комунікації.
- Зберегти функції корпоративного сайту — обробку відгуків на вакансії, реєстрацію на екскурсії, форму для подання ідей.
Клієнт
Група 1+1 медіа — один із найбільших медіа-холдингів України. До складу 1+1 медіа входить 7 телеканалів — «1+1», «2+2», «ТЕТ», «ПЛЮСПЛЮС», «1+1 International», «УНІАН ТБ» та «Бігуді», а також група інтернет-сайтів, власний виробничий департамент і Вища школа Media & Production.
Партнер
Партнерами в розробці та реалізації проекту виступили агентства Aurocraft Digital Production і Mono Design.
Цільова аудиторія
Загальна аудиторія:
- українські користувачі сервісів холдингу;
- представники медіаіндустрії СНД і Заходу.
Групи цільової аудиторії:
- Усі споживачі контенту з регіонів та міст-мільйонників. Потенційні та наявні партнери, журналісти та інші представники медіаринку (розділ «Медіа»).
- Молоді спеціалісти та студенти, професіонали (розділ «Кар’єра»).
- Активні молоді люди віком від 16 до 45 років, які часто є волонтерами соціальних проектів, незалежно від місця роботи і сфери діяльності, проживають у великих містах (розділ «КСВ»).
- Спеціалісти зі створення контенту, а також потенційні замовники послуг продакшену в Україні та інших країнах (розділ «1+1 Продакшн»).
Для структурування сайту ми також сегментували аудиторію за цілями:
- пошук роботи;
- вирішення проблем із трансляцією;
- ознайомлення з новинами групи;
- ознайомлення з продакшеном та отримання нових ідей у цьому напрямку.
Процес
Контент і функціонал сайту ми розподілили на кілька розділів у вигляді цільових посадкових сторінок.
Aналіз цілей
Відвідувачі приходили на попередній сайт, щоб:
- ознайомитися з цінностями та місією компанії;
- ознайомитися з менеджментом групи;
- дізнатися про можливості працювати у компаніях холдингу;
- розповісти про проблеми з трансляцією каналів або дізнатися причини збоїв;
- прочитати останні новини про 1+1 медіа.
Від клієнта ми отримали такі додаткові завдання:
- донести до відвідувачів інформації про корпоративну соціальну відповідальність (КСВ) компанії;
- інформувати про пріоритетні проекти та ініціативи холдингу;
- просувати бренд власного роботодавця, 1+1 Продакшен;
- створювати український контент.
Контент і функції ми розподілили на кілька розділів у вигляді цільових посадкових сторінок. Це мало допомогти вдовольнити різноманітні запити цільової аудиторії, не змішуючи їх.
Проектування
Фронтенд (карта сайту)
Новий сайт складається з чотирьох основних розділів, реалізованих у вигляді посадкових сторінок: Медіа, Кар’єра, КСВ, 1+1 Продакшн.
Новий розділ «1+1 Продакшн» відображає можливості, діяльність та пріоритетні проекти департаменту створення контенту. Ми додали до цієї сторінки блок, що приймає нові ідеї від потенційних талановитих спеціалістів («Ідеї»). Це дозволяє розвивати український контент.
Ми також полегшили навігацію. До редизайну сайт мав розшаровану структуру. Розділи були реалізованими як контентні сторінки, недостатньо зрозумілі й не пов’язані між собою. Ми зменшили кількість «шарів» й додали глибші рівні лише випадках, у яких на це дійсно був запит — такими є сторінки каналів холдингу, вакансій та ініціативних груп. Структуру посилань при цьому зберегли, щоб не втратити пошукових позицій.
Нова структура не тільки зручніша для користувачів. Вона також вимагає високої якості від контенту — адже його незавершеність стає більш очевидною
Бекенд (адмінпанель)
Оновлений функціонал включає ряд готових шаблонів (віджетів), що полегшують редагування і створення контенту в адміністративній панелі сайту.
Новий модуль розробили для HR-спеціалістів. Тепер вони можуть швидко опрацьовувати вакансії в адміністративній панелі сайту.
Дизайн
Новий дизайн мав стати зручнішим для компанії та цільових користувачів. Ми припустили, що із власною стилизацією окремі посадкові сторінки будуть зрозумілішими для сприйняття, ніж нагромадження внутрнішніх сторінок та розділів, і перевірили цю гіпотезу. Вона виявилася життєспроможною й заклала основу для роботи.
Для кожного розділу ми створили унікальні анімації й додали декілька секретних інтерактивних цікавинок.
На етапі розробки макетів ми провели ще один користувацький тест у форматі живої демонстрації та інтерв’ю. Метою було перевірили, чи впливає стилізація на зручність користування.
Тест виявив кілька проблем:
- Не відразу розкривається бокова навігаційна панель — отже, спершу незрозумілий контент і спосіб його перегляду (плануємо виправити цей нюанс).
- Розділи в заголовку зливалися з контентом (проблему вирішили за допомогою напівпрозорої підкладки).
- Великий обсяг головної сторінки й розділу «Медіа» — проте стилізація не впливає на обсяг контенту.
Розробка
Сайт написаний як односторінковий інтерфейс (Single Page Application, або SPA) на основі фреймворку vue.js другої версії. Весь необхідний код (HTML, JavaScript, CSS) завантажується динамічно разом зі сторінкою, а сама вона не оновлюється і не перенаправляє користувача на іншу.
Таку архітектуру потрібно довго втілювати, а потім уважно перевіряти помилки в коді. До того ж, із нею ускладнюються налаштування та оптимізація сайту для пошукових систем. Зате вона краще сумісна з мобільними пристроями і скорочує завантаження контенту.
Backend реалізований на платформі node.js із використанням express-фреймворка, взаємодія з сервером побудована за RESTful-принципом. Aдмінпанель зручна для численних контент-менеджерів сайту і має приємний вигляд.
Базу даних перевели на mongodb, що легко розширюється і добре підходить для медіапроектів.
На фронтенді динамічна структура сайту втілена за допомогою самих віджетів — блоків особливого вигляду для представлення різних типів інформації. Але ми виявили, що створювати надмірну кількість віджетів, працювати над їх спеціалізацією — нераціонально витрачати ресурси. Тепер ми намагаємося уніфікувати представлення контенту.
Додаткові зміни
На додачу, ми:
- провели оптимизіцію сайту для пошукових систем;
- адаптували сайт під різні розміри екранів, допрацювали мобільну версію.
Розвиток проекту
Після запуску ми почали поступово доробляти проект під вимоги користувачів на стороні холдингу — модифікувати віджети та адмінпанель.
В майбутньому плануємо:
- анімувати бекграунд (створити лоадер);
- створити нові віджети (ТБ-програму, віджети для HR-спеціалістів, додатковий функціонал для розділу «1+1 Продакшн»);
- доробити функціонал для e-mail розсилок (дайджести, вакансії);
- провести аналіз індексування сайту пошуковими системами, оптимізувати його за результатами.
Результати
Після редизайну на сайті стало на 28% більше нових сеансів і на 18% більше сеансі із мобільних пристроїв.
Зокрема, у квітні 2017 року порівняно з аналогічним періодом 2016 року:
- додалося 28% нових сеансів;
- прямий трафік зріс на 22%;
- час завантаження сторінок зменшився на 6%;
- кількість сеансів з мобільних пристроїв зросла на 18%;
- ми отримали до 70 заявок/місяць в розділі «1+1 Продакшн».
Цільова аудиторія розподілилася таким чином:
- розділ «Медіа» — 34%
- розділ «Кар’єра» — 33%
- розділ «КСВ» — 15%
- розділ «Продакшн» — 18%
Відгук клієнта
«Новий сайт — сучасна платформа для комунікації зі стейкхолдерами, що відповідає головним цінностям нашої компанії. Використовуючи новітні технології проектування веб-сторінок, ми поставили собі за мету створити інформативний простір з максимально гнучким рісерчем, що не залишив би жодне із запитань про життя та діяльність групи без відповідей. Made with love & passion!»Світлана Павелецька, PR директор 1+1 медіа