Сайт для АНО НОМИ

Копировать Скопировано

О клиенте

АНО «Научное общество медицинских инноваций» (НОМИ) — связующее звено между фармацевтической отраслью и медицинским сообществом. На своем портале организация размещает информацию о мероприятиях, а также видеозаписи и публикации и информацию о специалистах.

Клиент обратился к нам с запросом провести редизайн сайта и улучшить usability личного кабинета пользователя. Для этого мы изучили конкурентов и потребности целевой аудитории, разработали обновленную структуру сайта, создали новую дизайн-концепцию и разработали сайт с анимацией и удобными UX-решениями как для пользователя, так и для административной панели клиента.

Новая версия сайта: https://medinnova.org/

Старая версия: https://old.medinnova.org/

Детали проекта

Проект начали с подробного брифа клиента и анализа старой версии сайта. На интервью с клиентом выяснили, что:

  • Сайты большинства конкурентов имеют лучший дизайн и usability;
  • У сайта не удобная административная панель, со сложной структурой разделов и множеством неиспользуемых функций;
  • Пользователям не понятно, зачем нужен личный кабинет и как он работает.

Анализ данных Яндекс. Метрики показал, что:

  • На страницы определенных специалистов идет постоянный трафик из поисковых систем;
  • Сайтом пользуются как с ПК, так и с мобильных устройств;
  • Наиболее просматриваемыми разделом являются страницы специалистов.

Дополнительно изучили конкурентов и поняли, что:

  • Разделы сайта должны иметь очевидные и понятные пользователям названия;
  • Анимация на сайте является фишкой одного из конкурентов;
  • Удобный фильтр по контенту на сайте — редкое преимущество на сайтах конкурентов;
  • В каталоге специалистов удобно использовать фильтрацию по алфавиту.

После предпроектного анализа скорректировали задачи:

  • Функционал личного кабинета пользователя должен быть расширен, а пользоваться им должно быть просто и удобно;
  • Фильтрация контента на сайте должна быть максимально удобной для пользователей;
  • Сайт должен иметь удобную адаптивную версию;
  • Административная панель сайта должна быть заточена под нужды клиента и не иметь ненужных разделов и функций;
  • На новом сайте должна присутствовать анимация, которая станет его конкурентным преимуществом;
  • Переход со старого сайта на новый должен пройти безболезненно, чтобы не навредить SEO и постоянным пользователям сайта. Для этого важно настроить редирректы со страниц старого сайта, а также запустить сайт в период наименьшей посещаемости.

Уточнив задачу, перешли к разработке дизайн-макетов. В концепции удалось выдержать баланс между консервативным и современным дизайном и аккуратно поддержать цветовую гамму в стиле медицинского портала.

Дизайн-систему готовили под Bootstrap 4, создавая по 5 макетов для каждого брейкпоинта. За счет использования системы в типографике, цветах и компонентах такая скрупулезность не замедлила ход работы. Отдельно продумывалась анимации для главной страницы и прелоадер. Анимацию тестировали сначала на Webflow, чтобы показать разработчикам, что хотим видеть на выходе.

Для разработки сайта выбрали фреймворк Yii2, так как он позволял реализовать весь функционал сайта, среди которого: личный кабинет пользователя, генерация сертификатов по результатам тестирования, фильтры на Ajax и система уведомлений. Интересной задачей был прелоадер — мы разработали систему, которая в определенной последовательности анимировала каждый из кружков логотипа, создавая эффект движения по спирали.

Последним этапом стал перенос контента. Сложность была в объеме: нас ждало 80 мероприятий, 20 тестирований, 350 видеозаписей, 120 специалистов и 40 публикаций. Из-за сложной структуры старого сайта, информацию переносили вручную, а для ускорения использовали парсеры контента. В итоге смогли даже улучшить контент, обновив вместе с клиентом часть информации о специалистах и публикациях.

Достигнутые цели и KPI по итогам запуска

Запустить сайт смогли в срок и без проблем для пользователей — дополнительно об обновлении сайта известили всех постоянных посетителей ресурса. Теперь клиент может капитализировать новых пользователей — интеграция сайта с почтовым сервисом позволила увеличить базу контактов для маркетинговых рассылок.

Агентство продолжает работу с клиентом в рамках технической поддержки.

Смотреть сайт

Проект реализован
совместно с Atman Digital

Скриншоты

Ещё по теме
Нескучные обучающие ролики про кибербезопасность
Рекламный ролик SYNERGETIC
Анимационный видеоролик про цифрового кентавра для проекта «Урок цифры»
Анимационные ролики об охране труда для МКБ
Имиджевый ролик для бренда ROWI
Серия роликов о работе приложения «СберИнвестор»