MedX.pro: редизайн и разработка сайта центра профессионального развития медработников

MedX.pro — портал центра профессионального развития медработников, с собственной библиотекой онлайн-программ, интерактивных образовательных модулей и тестирований, за прохождение которых начисляются баллы непрерывного медицинского образования (НМО), а также выдаются удостоверения о повышении квалификации и дипломы о профпереподготовке утвержденного образца.

Обучение программам MedX.pro проходит в системе Moodle, на ней же базировался и информационный сайт центра. Из-за шаблонного оформления, в котором не были продуманы пользовательские сценарии, сайт был не продающим, к тому же выглядел устаревшим. Поэтому заказчики обратились к нам за новым дизайном и разработкой отдельного сайта-витрины, в том числе его мобильной версии.

Сначала мы прошли все этапы UX/UI-проектирования: провели исследование, создали прототипы и логику переходов по страницам, новый стиль веб-интерфейса и мобильную версию. А затем разработали программную часть — с нуля, на миксе технологий.

Чтобы сделать структуру сайта более логичной и улучшить пользовательское взаимодействие, мы провели исследование: изучили типы аудиторий, устройств и источники трафика в Яндекс Метрике. А затем создали портреты нескольких сегментов целевой аудитории и для каждого описали пользовательские сценарии. На основе этих данных мы создали новую архитектуру сайта и карту переходов.

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

Из элементов фирменного стиля у MedX.pro был только логотип. Перед тем, как приступить к редизайну, на основе элементов и цветовой гаммы логотипа мы создали несколько вариантов визуальной айдентики бренда. Заказчики выбрали вариант с использованием графического символа лого (стилизованной буквы Х), и на его основе мы оформили все страницы сайта и собрали UI-кит из элементов дизайна. Также мы создали мобильную версию сайта, которой раньше не было.

Некоторые страницы сайта предполагают размещение разных форматов баннеров. Чтобы заказчики могли загружать их сами, мы создали руководство, где прописали требования к размерам, цветам, фигурам, текстам и кнопкам. Также мы описали размеры и правила центрирования для изображений в карточках образовательных программ и их отображение в хедере открытой страницы программы.

Вместе с заказчиками мы решили разделить портал на две части:

- информационный сайт-витрину для выбора и покупки программ и участия в мероприятиях — разработать его с нуля и внедрить новый дизайн;

- Moodle-портал на поддомене для прохождения программ и просмотра личного профиля — и оставить его без изменений.

Админ-панель — это гибкий инструмент, который отвечает потребностям MedX.pro. 

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

При этом для некоторых блоков, например, с описанием программ, мы оставили пользователям возможность влиять на представление контента с помощью редактора, но дали рекомендации, которые позволят не нарушать единый стиль.

Помимо прочего, мы добавили на сайт разные полезные возможности. Например, тайм-кнопку для проверки того, что пользователь действительно смотрит лекцию. Администратор устанавливает время и количество раз, когда кнопка появляется на экране, а пользователь должен успеть нажать на кнопку — и этим подтвердить свою вовлеченность. Из данных о просмотре формируется статистика. Если мероприятие было аккредитовано баллами НМО, MedX.pro скачивает статистику из админки и направляет в Министерство здравоохранения для расчета и начисления баллов участникам. 

Мы провели редизайн всего сайта и создали мобильную версию. В результате конверсия из посетителей витрины в продажи выросла вдвое.

Стиль, который мы разработали для сайта, заказчики стали использовать в различных промо-материалах для онлайн- и офлайн-активностей. Мы помогаем создавать эти материалы и готовить их к печати, при необходимости, а также консультируем дизайнеров со стороны заказчиков по работе с новым стилем.