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

Главное о кейсе

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

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

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

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

Бизнес-задача и ее решение

ЗАДАЧА

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

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

РЕШЕНИЕ

* АНАЛИТИКА И ПРОЕКТИРОВАНИЕ *

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

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

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

* РЕДИЗАЙН *

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

Также мы создали мобильную версию сайта, которой раньше не было.

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

* РАЗРАБОТКА *
Вместе с заказчиками мы решили разделить портал на две части:
— информационный сайт-витрину для выбора и покупки программ и участия в мероприятиях — разработать его с нуля и внедрить новый дизайн;
— Moodle-портал на поддомене для прохождения программ и просмотра личного профиля — и оставить его без изменений.

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

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

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

Скриншоты

Комментарий заказчика

Чтобы решить задачи по редизайну, мы обратилась именно в JetStyle, полагаясь на свой успешный опыт совместной работы с этой командой. Нам нравится их открытость, гибкость, внимательность, готовность услышать заказчика и подстроиться под его запросы. Команда на связи 24/7. При этом они абсолютно самостоятельные — нет необходимости отслеживать выполнение плана, дедлайны и пинговать. JetStyle — глубокие эксперты в дизайне, архитектуре ИТ-решений, проджект-менеджменте. Поэтому команда взяла на себя не только дизайн, но и разработку. А еще подготовила UI-кит, который, помимо прямого назначения, решил для нас и задачу по доработке фирменного стиля. Главный показатель успеха нашего сотрудничества — рост конверсии из посетителя в продажи в два раза по сравнению с аналогичными периодами прошлого года. А слушатели наших программ отмечают, что сайт стал более стильным и современным.