Редизайн, разработка и развитие проекта «Если у вас есть сердце»
Контекст
Проект «Если у вас есть сердце» должен вовлекать пользователей
— за счет интуитивного
и дружелюбного интерфейса,
яркого дизайна и интересной
подачи информации.
— за счет интуитивного
и дружелюбного интерфейса,
яркого дизайна и интересной
подачи информации.
«Если у вас есть сердце" —
это информационная платформа о сердечно-сосудистых заболеваниях, которая запущена при поддержке фармацевтической
компании «Сервье».
это информационная платформа о сердечно-сосудистых заболеваниях, которая запущена при поддержке фармацевтической
компании «Сервье».
Весь контент на платформе
создают медицинские специалисты.
Ее главная цель — делиться
с аудиторией актуальной
и достоверной информацией
о заболеваниях, мотивировать
людей вовремя посещать врачей
и следить за здоровьем.
создают медицинские специалисты.
Ее главная цель — делиться
с аудиторией актуальной
и достоверной информацией
о заболеваниях, мотивировать
людей вовремя посещать врачей
и следить за здоровьем.
Важно, чтобы аудитория ресурса постоянно росла и все больше людей узнавали, как заботиться о себе и близких.
На сайте собрана информация
о профилактике, диагностике, лечении
и реабилитации болезней сердца.
о профилактике, диагностике, лечении
и реабилитации болезней сердца.
Аудитория проекта
«Если у вас есть сердце»
«Если у вас есть сердце»
400 тысяч уникальных посетителей в год
Задачи
Обновить UX/UI-дизайн сайта
Провести SEO-аудит и SEO-оптимизацию
Запрограммировать сайт
Продолжать развивать проект
Фронтенд- и бэкенд-разработка
Создание дизайн-концепции главной страницы в 2021 году
UX/UI-редизайн
Последующее развитие сайта
Работы по SEO
Работа над проектом включала:
Процесс был разбит на итерации,
то есть все изменения вносились на сайт постепенно для удобства аудитории.
то есть все изменения вносились на сайт постепенно для удобства аудитории.
Работа над проектом
У проекта «Если у вас есть сердце» эмоциональный тон оф войс
— в коммуникации
подчеркивается доверие,
спокойствие, чувство
безопасности и заботы. Эти
черты отражены и в визуальном оформлении сайта.
— в коммуникации
подчеркивается доверие,
спокойствие, чувство
безопасности и заботы. Эти
черты отражены и в визуальном оформлении сайта.
Дизайн-концепция
В основу дизайн-концепции легли мягкие градиенты, яркие иллюстрации и палитра
в оттенках розового и голубого, которые обычно ассоциируются с цветом реалистичного сердца.
в оттенках розового и голубого, которые обычно ассоциируются с цветом реалистичного сердца.
Отдельно разработана дизайн-концепция
для анимированной инфографики
«Как устроено сердце» — это одна из самых посещаемых страниц сайта.
для анимированной инфографики
«Как устроено сердце» — это одна из самых посещаемых страниц сайта.
По умолчанию сердце стучит в ритме пульса здорового человека
Инфографика показывает работу здорового сердца и изменения, которые происходят
в нем, когда у человека есть лишний вес, вредные привычки и другие проблемы.
в нем, когда у человека есть лишний вес, вредные привычки и другие проблемы.
Инфографика интерактивная — пользователь может кликать по областям сердца и читать факты о его работе
UX/UI-редизайн
Для «Сервье» важно поддерживать высокий уровень пользовательского опыта на сайте.
Поэтому за последние три года на проекте «Если у вас есть сердце» дважды проводился редизайн, в процессе которого мы меняли
UX/UI-паттерны в интерфейсе на более современные.
UX/UI-паттерны в интерфейсе на более современные.
Полезные интерактивные инструменты повышают ценность сайта в глазах пользователя, поэтому мы поддерживаем их юзабилити на высоком уровне.
Это также важно с точки зрения SEO: интерактивы улучшают ранжирование ресурса.
Это также важно с точки зрения SEO: интерактивы улучшают ранжирование ресурса.
Навигация по словарю интуитивная и понятная: в шапке есть строка для поиска термина, добавлен алфавитный указатель с якорными ссылками.
Они посвящены опыту и экспертизе «Сервье» на фармацевтическом рынке, а также продуктам компании.
В интерфейсе реализованы крупные кнопки, вертикальная компоновка контента, удобная навигация. Структура экрана переработана так, чтобы вместить как можно больше ценной информации для пользователя.
Дизайн-концепция страницы разработана на основе цветовой палитры самого портала РКО и корпоративных цветов «Сервье».
Полезные интерактивные инструменты повышают ценность сайта в глазах пользователя, поэтому мы поддерживаем их юзабилити на высоком уровне.
Это также важно с точки зрения SEO: интерактивы улучшают ранжирование ресурса.
Это также важно с точки зрения SEO: интерактивы улучшают ранжирование ресурса.
Навигация по словарю интуитивная и понятная: в шапке есть строка для поиска термина, добавлен алфавитный указатель с якорными ссылками.
Они посвящены опыту и экспертизе «Сервье» на фармацевтическом рынке, а также продуктам компании.
В интерфейсе реализованы крупные кнопки, вертикальная компоновка контента, удобная навигация. Структура экрана переработана так, чтобы вместить как можно больше ценной информации для пользователя.
Дизайн-концепция страницы разработана на основе цветовой палитры самого портала РКО и корпоративных цветов «Сервье».
SEO-аудит и SEO-оптимизация
Сайт оптимизирован с учетом SEO —
так клиент будет привлекать больше трафика,
а, значит, больше людей узнают о проекте
и болезнях сердца в целом.
так клиент будет привлекать больше трафика,
а, значит, больше людей узнают о проекте
и болезнях сердца в целом.
Все изменения внедрены по итогам аудита, в котором
мы проанализировали метрики и изучили лучшие практики по улучшению ранжирования сайта.
мы проанализировали метрики и изучили лучшие практики по улучшению ранжирования сайта.
Такие URL улучшают ранжирование сайта в поисковой выдаче, а также выглядят понятнее для аудитории проекта. Для реализации переезда написана кастомная функция,
которой нет в стандартной панели Laravel, и разработан раздел «Страницы» в административной панели. В нем можно гибко настраивать ссылки: указывать материнские теги, категорию
и подкатегорию, для любой страницы.
которой нет в стандартной панели Laravel, и разработан раздел «Страницы» в административной панели. В нем можно гибко настраивать ссылки: указывать материнские теги, категорию
и подкатегорию, для любой страницы.
- Настроено сжатие размера изображений и их конвертация в формат webp
- Настроены редиректы 301 со страниц с www на страницы без www
- Убран символ слеша в конце ссылок
- Оптимизирована кластеризация запросов по страницам сайта
- Добавлены страницы «О проекте», «Наши авторы и эксперты»
- Скорректированы регистрозависимые адреса
- К материалам на сайте добавлено кликабельное оглавление
- В верстку статей интегрирована микроразметка
- Указана контактная информация и авторы публикаций
Такие URL улучшают ранжирование сайта в поисковой выдаче, а также выглядят понятнее для аудитории проекта. Для реализации переезда написана кастомная функция, которой нет в стандартной панели Laravel, и разработан раздел «Страницы» в административной панели. В нем можно гибко настраивать ссылки: указывать материнские теги, категорию и подкатегорию, для любой страницы.
- Настроено сжатие размера изображений и их конвертация в формат webp
- Настроены редиректы 301 со страниц с www на страницы без www
- Убран символ слеша в конце ссылок
- Оптимизирована кластеризация запросов по страницам сайта
- Добавлены страницы «О проекте», «Наши авторы и эксперты»
- Скорректированы регистрозависимые адреса
- К материалам на сайте добавлено кликабельное оглавление
- В верстку статей интегрирована микроразметка
- Указана контактная информация и авторы публикаций
Фронтенд- и бекенд-
разработка
разработка
Убраны ненужные компоненты, исправлена логика некоторые частей, оптимизированы запросы к базе данных для ускорения загрузки страницы.
Обновлены версии программного обеспечения: PHP — до 8.2, Laravel — до 10.x.
Обновлены версии программного обеспечения: PHP — до 8.2, Laravel — до 10.x.
В ней по-другому настроены стили для навигации: все элементы увеличены так, чтобы пользователи быстро различали их и ориентировались в интерфейсе.
Мы проанализировали его UX и провели оптимизацию: добавили новые блоки с заголовками, текстом, аккордеоном, цитатами.
Все блоки собраны на эталонной странице — с ней сотрудникам будет проще ориентироваться в возможностях редактора.
Все блоки собраны на эталонной странице — с ней сотрудникам будет проще ориентироваться в возможностях редактора.
Убраны ненужные компоненты, исправлена логика некоторые частей, оптимизированы запросы к базе данных для ускорения загрузки страницы. Обновлены версии программного обеспечения: PHP — до 8.2, Laravel — до 10.x.
В ней по-другому настроены стили для навигации: все элементы увеличены так, чтобы пользователи быстро различали их и ориентировались в интерфейсе.
Мы проанализировали его UX и провели оптимизацию: добавили новые блоки с заголовками, текстом, аккордеоном, цитатами. Все блоки собраны на эталонной странице — с ней сотрудникам будет проще ориентироваться в возможностях редактора.
Техническая поддержка:
Релиз новых материалов на сайт
Обновление фреймворка и библиотек до актуальных версий
Веб-аналитика
Проведение конкурентного анализа и внедрение лучших практик UX/UI
Дизайн и редизайн интерактивных инструментов
Контентная поддержка:
Подготовка ежемесячных SEO-отчетовования сайта
Написание SEO техзаданий на новые статьи
Согласование контента с медицинскими
экспертами и юристами
экспертами и юристами
SEO-аудиты с рекомендациями по улучшению ранжирования сайта
Техническая и контент-поддержка
Сейчас проект «Если у вас есть сердце» находится на поддержке. Мы развиваем функциональность ресурса, а также проводим регулярные контентные работы.
Результаты
Почти 538 000 визитов
на сайт за 2023 год
на сайт за 2023 год
Переходы на сайт из поиска выросли на 12,5%
Объем трафика на сайте
«Если у вас есть сердце»
вырос в 10 раз
«Если у вас есть сердце»
вырос в 10 раз