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

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



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

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



Аналитика и проектирование

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

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



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



Редизайн

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



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



Разработка

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

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

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

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

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

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

Результат

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

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

Мила Шуинова, директор по маркетингу MedX.pro:

«Чтобы решить задачи по редизайну, мы обратилась именно в JetStyle, полагаясь на свой успешный опыт совместной работы с этой командой.

Нам нравится их открытость, гибкость, внимательность, готовность услышать заказчика и подстроиться под его запросы. Команда на связи 24/7. При этом они абсолютно самостоятельные — нет необходимости отслеживать выполнение плана, дедлайны и пинговать.

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

Главный показатель успеха нашего сотрудничества — рост конверсии из посетителя в продажи в два раза по сравнению с аналогичными периодами прошлого года. А слушатели наших программ отмечают, что сайт стал более стильным и современным».