Пишите крутые статьи? Публикуйте их в авторитетном журнале Workspace.
JetStyle
MedX.pro: редизайн и разработка сайта центра профессионального развития медработников
JetStyle
WDA
2023
#Сайт под ключ#Фирменный стиль

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

4332 
JetStyle
JetStyle Россия, Екатеринбург
Поделиться:
MedX.pro: редизайн и разработка сайта центра профессионального развития медработников
Клиент

MedX.pro

Сфера

Обучение

Регион

Россия, Москва

Тип сайта

Порталы и сервисы

Сдано

Сентябрь 2022

Задача

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

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

Решение

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

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

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

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

2Редизайн

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

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

3Разработка

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

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

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

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

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

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

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

Результат

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

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

Отзыв клиента

Мила Шуинова
Мила Шуинова

директор по маркетингу MedX.pro

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

https://medx.pro/

Стек технологий

  • Vue.js Vue.js Фреймворк/библиотека
  • MongoDB MongoDB База данных
  • Node.js Node.js Среда разработки

Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

JetStyle с удовольствием обсудит вашу задачу

Оставить заявку