1+1 Медіа – корп.сайт холдінгу
Як покращити дизайн корпоративного сайту без втрати трафіку і здобути +18% сеансів із мобільних пристроїв.
image
Тип:
корп.сайт
Рiк:
2016
Клієнт:
1+1 Media
Мета
Разом з клієнтом ми хотіли створити єдині правила для веб-проектів холдингу на прикладі головного корпоративного сайту. Плюс, було кілька експериментальних для Плюсів завдань - розподіл потоків користувачів за цільовими розділах, спрощення навігації без функціональних втрат, і створення адаптивного дизайну з фокусом на мобільне використання.
Проектування

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

З чого ми почали

Приблизно так виглядала вихідна структура із множинною вкладеністю

image
Ми вирішили перетворити цю структуру за напрямками діяльності компанії, зменшити кількість батьківських розділів і зробити вкладеність тільки для тих аспектів, які дійсно потребують поглиблення.

І ось що вийшло

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

Ми використовували long-scroll pattern, як основний принцип переміщення сайтом - це один з типових навігаційних патернів для мобільних пристроїв, який перекочував в Веб.

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

image
Кардинально змінивши зовнішній вигляд і карту сайту, ми при цьому зберегли структуру посилань, щоб не втратити позиції в пошуку.
Допоміжна навігація

Оскільки розмір сторінок збільшився кардинальним чином, ми додали бічну панель з якорями для швидкого переміщення між секціями інформації.

image
Цікаві деталі

Для візуалізації напрямків використовуються анімовані ілюстрації, а у портретів топ-менеджменту э жартівливий ховер.


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

slider image
slider image
slider image
slider image

Мобільна версія

Своєю поведінкою адаптивна версія для мобільних пристроїв маскується під нативний додаток - інтерактивний і динамічний.

image
Світлана Павелецька, PR директор 1 + 1 Медіа

«Новий сайт — сучасна платформа для комунікації зі стейкхолдерами, що відповідає головним цінностям нашої компанії і не залишив жодне із запитань про життя та діяльність групи без відповідей. Made with love & passion!»

Технічні особливості

Сайт побудований на SPA-архітектурі, як односторінкове додаток з віджетною структурою управління наповненням.


Фронт-енд фреймворк – vue.js, а бек-енд сайту реалізований на платформі node.js express. Взаємодія клієнт-сервер побудована на RESTful-принципах.


Особливо ми пишаємося мінімалістичною естетикою панелі кервання сайтом. Вона виглядає привабливо і зрозуміло для численних контент-менеджерів, для яких простота управління контентом було мало не найголовніша вимога :D

image
Що в результаті?

Оновлений сайт став набагато популярнішим!


Клієнт отримав + 28% нових сеансів з ПК і 18% з мобільних пристроїв, а прямий трафік виріс на 22% (станом на квітень 2017 і в порівнянні з аналогічним періодом в 2016 році).


А ще при всіх технологічних ускладненнях - проект став завантажуватися на 6% швидше, ніж початкова версія :)

1+1 Медіа – корп.сайт холдінгу