MDS: Дизайн образовательной платформы

MDS: Дизайн образовательной платформы

MDS: Дизайн образовательной платформы

MDS: Дизайн образовательной платформы

  • Конструктор курсов и учебные группы

  • Прогрессы и достижения

  • Домашние задания и тесты

  • Чаты и календарь занятий

  • Электронные сертификаты

  • Конструктор курсов и учебные группы

  • Прогрессы и достижения

  • Домашние задания и тесты

  • Чаты и календарь занятий

  • Электронные сертификаты

  • Конструктор курсов и учебные группы

  • Прогрессы и достижения

  • Домашние задания и тесты

  • Чаты и календарь занятий

  • Электронные сертификаты

  • Конструктор курсов и учебные группы

  • Прогрессы и достижения

  • Домашние задания и тесты

  • Чаты и календарь занятий

  • Электронные сертификаты

Кликабельные прототипы

Спроектировали интерфейс и информационную архитектуру, показали иерархию элементов, их взаимное расположение, смысловые акценты.

Кликабельные прототипы


Пример прототипа ЛК админа

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


Палитра и точки контраста

Реализовали палитру и правила колористики для проекта, с учётом контрастности. Предусмотрели палитру для тёмной темы.

Палитра и точки контраста


Делаем UI-kit + Состояния элементов

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

Делаем UI-kit + Состояния элементов


Макеты на компонентах

Собрали тёмную тему, используя UI kit компонентов и цветовую палитру. Благодаря системной организации проекта дизайн тёмной темы может занимать всего несколько дней.

Макеты на компонентах


Каждая страница в 4 размерах

Сделали макеты страниц в 4 разрешениях под разные устройства: десктоп, ноутбуки, планшеты, смартфоны.

Каждая страница в 4 размерах


Состояния страниц

В макетах предусмотрели основные состояния страниц в зависимости от контекста использования. В частности, состояние страницы при отправке домашнего задания, проверки, и после принятия результатов куратором курса, и т.д.

Состояния страниц


Дизайн публичной части

На сайте реализовали каталог курсов, расставили цветовые акценты на целевых действиях: переход на страницу курса и покупка.

Дизайн публичной части


Поддержка и доработки

Реализовали множество сопутстствующих работ: шаблоны email, тексты уведомлений и подсказок, список достижений, рекламные баннеры и т.д.

Поддержка и доработки


Разработка MVP

Сайт школы сделали SPA-приложением, настроили интеграцию с личным кабинетом, эквайрингом и amoCRM.

Публичная часть MDS


Админка

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

Админка MDS


ЛК слушателя

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

ЛК слушателя MDS


ЛК куратора

Кураторы управляют учебными группами, проверяют домашние задания, видят свои мероприятия в календаре, отвечают на вопросы в чате.

ЛК Куратора MDS


Интеграции

Настроили авторизацию через соц. сети. Подключили онлайн-оплату через Сбер API, рассрочку через Тинькофф и сделки в amoCRM. Настроили хранение и трансляцию видео контента через CDN-сервис.

Интеграции в MDS

Кликабельные прототипы

Спроектировали интерфейс и информационную архитектуру, показали иерархию элементов, их взаимное расположение, смысловые акценты.

Кликабельные прототипы


Пример прототипа ЛК админа

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


Палитра и точки контраста

Реализовали палитру и правила колористики для проекта, с учётом контрастности. Предусмотрели палитру для тёмной темы.

Палитра и точки контраста


Делаем UI-kit + Состояния элементов

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

Делаем UI-kit + Состояния элементов


Макеты на компонентах

Собрали тёмную тему, используя UI kit компонентов и цветовую палитру. Благодаря системной организации проекта дизайн тёмной темы может занимать всего несколько дней.

Макеты на компонентах


Каждая страница в 4 размерах

Сделали макеты страниц в 4 разрешениях под разные устройства: десктоп, ноутбуки, планшеты, смартфоны.

Каждая страница в 4 размерах


Состояния страниц

В макетах предусмотрели основные состояния страниц в зависимости от контекста использования. В частности, состояние страницы при отправке домашнего задания, проверки, и после принятия результатов куратором курса, и т.д.

Состояния страниц


Дизайн публичной части

На сайте реализовали каталог курсов, расставили цветовые акценты на целевых действиях: переход на страницу курса и покупка.

Дизайн публичной части


Поддержка и доработки

Реализовали множество сопутстствующих работ: шаблоны email, тексты уведомлений и подсказок, список достижений, рекламные баннеры и т.д.

Поддержка и доработки


Разработка MVP

Сайт школы сделали SPA-приложением, настроили интеграцию с личным кабинетом, эквайрингом и amoCRM.

Публичная часть MDS


Админка

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

Админка MDS


ЛК слушателя

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

ЛК слушателя MDS


ЛК куратора

Кураторы управляют учебными группами, проверяют домашние задания, видят свои мероприятия в календаре, отвечают на вопросы в чате.

ЛК Куратора MDS


Интеграции

Настроили авторизацию через соц. сети. Подключили онлайн-оплату через Сбер API, рассрочку через Тинькофф и сделки в amoCRM. Настроили хранение и трансляцию видео контента через CDN-сервис.

Интеграции в MDS

Кликабельные прототипы

Спроектировали интерфейс и информационную архитектуру, показали иерархию элементов, их взаимное расположение, смысловые акценты.

Кликабельные прототипы


Пример прототипа ЛК админа

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


Палитра и точки контраста

Реализовали палитру и правила колористики для проекта, с учётом контрастности. Предусмотрели палитру для тёмной темы.

Палитра и точки контраста


Делаем UI-kit + Состояния элементов

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

Делаем UI-kit + Состояния элементов


Макеты на компонентах

Собрали тёмную тему, используя UI kit компонентов и цветовую палитру. Благодаря системной организации проекта дизайн тёмной темы может занимать всего несколько дней.

Макеты на компонентах


Каждая страница в 4 размерах

Сделали макеты страниц в 4 разрешениях под разные устройства: десктоп, ноутбуки, планшеты, смартфоны.

Каждая страница в 4 размерах


Состояния страниц

В макетах предусмотрели основные состояния страниц в зависимости от контекста использования. В частности, состояние страницы при отправке домашнего задания, проверки, и после принятия результатов куратором курса, и т.д.

Состояния страниц


Дизайн публичной части

На сайте реализовали каталог курсов, расставили цветовые акценты на целевых действиях: переход на страницу курса и покупка.

Дизайн публичной части


Поддержка и доработки

Реализовали множество сопутстствующих работ: шаблоны email, тексты уведомлений и подсказок, список достижений, рекламные баннеры и т.д.

Поддержка и доработки


Разработка MVP

Сайт школы сделали SPA-приложением, настроили интеграцию с личным кабинетом, эквайрингом и amoCRM.

Публичная часть MDS


Админка

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

Админка MDS


ЛК слушателя

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

ЛК слушателя MDS


ЛК куратора

Кураторы управляют учебными группами, проверяют домашние задания, видят свои мероприятия в календаре, отвечают на вопросы в чате.

ЛК Куратора MDS


Интеграции

Настроили авторизацию через соц. сети. Подключили онлайн-оплату через Сбер API, рассрочку через Тинькофф и сделки в amoCRM. Настроили хранение и трансляцию видео контента через CDN-сервис.

Интеграции в MDS

Кликабельные прототипы

Спроектировали интерфейс и информационную архитектуру, показали иерархию элементов, их взаимное расположение, смысловые акценты.

Кликабельные прототипы


Пример прототипа ЛК админа

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


Палитра и точки контраста

Реализовали палитру и правила колористики для проекта, с учётом контрастности. Предусмотрели палитру для тёмной темы.

Палитра и точки контраста


Делаем UI-kit + Состояния элементов

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

Делаем UI-kit + Состояния элементов


Макеты на компонентах

Собрали тёмную тему, используя UI kit компонентов и цветовую палитру. Благодаря системной организации проекта дизайн тёмной темы может занимать всего несколько дней.

Макеты на компонентах


Каждая страница в 4 размерах

Сделали макеты страниц в 4 разрешениях под разные устройства: десктоп, ноутбуки, планшеты, смартфоны.

Каждая страница в 4 размерах


Состояния страниц

В макетах предусмотрели основные состояния страниц в зависимости от контекста использования. В частности, состояние страницы при отправке домашнего задания, проверки, и после принятия результатов куратором курса, и т.д.

Состояния страниц


Дизайн публичной части

На сайте реализовали каталог курсов, расставили цветовые акценты на целевых действиях: переход на страницу курса и покупка.

Дизайн публичной части


Поддержка и доработки

Реализовали множество сопутстствующих работ: шаблоны email, тексты уведомлений и подсказок, список достижений, рекламные баннеры и т.д.

Поддержка и доработки


Разработка MVP

Сайт школы сделали SPA-приложением, настроили интеграцию с личным кабинетом, эквайрингом и amoCRM.

Публичная часть MDS


Админка

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

Админка MDS


ЛК слушателя

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

ЛК слушателя MDS


ЛК куратора

Кураторы управляют учебными группами, проверяют домашние задания, видят свои мероприятия в календаре, отвечают на вопросы в чате.

ЛК Куратора MDS


Интеграции

Настроили авторизацию через соц. сети. Подключили онлайн-оплату через Сбер API, рассрочку через Тинькофф и сделки в amoCRM. Настроили хранение и трансляцию видео контента через CDN-сервис.

Интеграции в MDS

В результате:

В 2021 году проект получил статус резидента в класстере ИТ Сколково и вошёл в реестр отечественного ПО.

В ноябре 2022 года компания перешла под управление образовательного холдинга Ultimate Education. О сделке можно почитать в статьях Коммерсанта и CNews. Сделка вошла в подборку самых заметных инвестиционных раундов от Forbes.

На начало 2023 года проект имеет без малого 8000 слушателей и 25 программ обучения.

Ещё кейсы:

Отвечаем на частые вопросы

Что значит системный подход в дизайне?

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

Что значит системный подход в дизайне?

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

Что значит системный подход в дизайне?

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

Какие варианты сотрудничества?

Работаем как ООО "КРОНМЕДИА", ИНН 5504154094, аккредитованная ИТ-компания, по УСН, без НДС. Заключаем рамочный договор, условия прописываем в доп. соглашениях. Обмен по ЭДО.

Какие варианты сотрудничества?

Работаем как ООО "КРОНМЕДИА", ИНН 5504154094, аккредитованная ИТ-компания, по УСН, без НДС. Заключаем рамочный договор, условия прописываем в доп. соглашениях. Обмен по ЭДО.

Какие варианты сотрудничества?

Работаем как ООО "КРОНМЕДИА", ИНН 5504154094, аккредитованная ИТ-компания, по УСН, без НДС. Заключаем рамочный договор, условия прописываем в доп. соглашениях. Обмен по ЭДО.

Какая ценовая политика?

Работаем с любым бюджетом. Ставка в час 2500 рублей. Количество часов зависит от объёма проекта (от нескольких дней до 2-3 месяцев). В стоимость могут входить любые работы: прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Какая ценовая политика?

Работаем с любым бюджетом. Ставка в час 2500 рублей. Количество часов зависит от объёма проекта (от нескольких дней до 2-3 месяцев). В стоимость могут входить любые работы: прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Какая ценовая политика?

Работаем с любым бюджетом. Ставка в час 2500 рублей. Количество часов зависит от объёма проекта (от нескольких дней до 2-3 месяцев). В стоимость могут входить любые работы: прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Сколько нужно времени?

По небольшим задачам — оценка от нескольких дней. Для больших проектов обычно требуется 2 месяца. Опишите вашу задачу — мы отправим срок на дизайн вашего проекта.

Сколько нужно времени?

По небольшим задачам — оценка от нескольких дней. Для больших проектов обычно требуется 2 месяца. Опишите вашу задачу — мы отправим срок на дизайн вашего проекта.

Сколько нужно времени?

По небольшим задачам — оценка от нескольких дней. Для больших проектов обычно требуется 2 месяца. Опишите вашу задачу — мы отправим срок на дизайн вашего проекта.

Как выглядит процесс работы?

Изучим требования, сделаем дизайн-концепцию, обсудим её на онлайн-встрече. Если всё нравится — двигаемся дальше. Раз в неделю делаем демо промежуточных результатов. Общение — в телеграм. С нашей стороны есть менеджер проекта, который отвечает за результат. Открытый доступ к проекту в Figma — можно следить за прогрессом.

Как выглядит процесс работы?

Изучим требования, сделаем дизайн-концепцию, обсудим её на онлайн-встрече. Если всё нравится — двигаемся дальше. Раз в неделю делаем демо промежуточных результатов. Общение — в телеграм. С нашей стороны есть менеджер проекта, который отвечает за результат. Открытый доступ к проекту в Figma — можно следить за прогрессом.

Как выглядит процесс работы?

Изучим требования, сделаем дизайн-концепцию, обсудим её на онлайн-встрече. Если всё нравится — двигаемся дальше. Раз в неделю делаем демо промежуточных результатов. Общение — в телеграм. С нашей стороны есть менеджер проекта, который отвечает за результат. Открытый доступ к проекту в Figma — можно следить за прогрессом.

В каком виде отдаётся результат?

Проект в Figma, который включает макеты страниц, UI-kit, типографику, и палитры. Макеты собраны на autolayout, используем переменные для размерностей и цветов. Всё организовано для удобства frontend-разработки и быстрого внесения правок при необходимости в будущем.

В каком виде отдаётся результат?

Проект в Figma, который включает макеты страниц, UI-kit, типографику, и палитры. Макеты собраны на autolayout, используем переменные для размерностей и цветов. Всё организовано для удобства frontend-разработки и быстрого внесения правок при необходимости в будущем.

В каком виде отдаётся результат?

Проект в Figma, который включает макеты страниц, UI-kit, типографику, и палитры. Макеты собраны на autolayout, используем переменные для размерностей и цветов. Всё организовано для удобства frontend-разработки и быстрого внесения правок при необходимости в будущем.

Можете сделать тестовое задание?

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

Можете сделать тестовое задание?

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

Можете сделать тестовое задание?

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

С чего начать?

С оценки трудозатрат. Опишите задачу на дизайн в свободной форме. Этого достаточно для оценки. Менеджер уточнит недостающую информацию. Мы отправим оценку в течение рабочего дня, после обсуждения с командой. Если условия подходят, проведём рабочую встречу, на которой познакомимся и обсудим детали.

С чего начать?

С оценки трудозатрат. Опишите задачу на дизайн в свободной форме. Этого достаточно для оценки. Менеджер уточнит недостающую информацию. Мы отправим оценку в течение рабочего дня, после обсуждения с командой. Если условия подходят, проведём рабочую встречу, на которой познакомимся и обсудим детали.

С чего начать?

С оценки трудозатрат. Опишите задачу на дизайн в свободной форме. Этого достаточно для оценки. Менеджер уточнит недостающую информацию. Мы отправим оценку в течение рабочего дня, после обсуждения с командой. Если условия подходят, проведём рабочую встречу, на которой познакомимся и обсудим детали.

Быстро отвечаем, оценим сроки и стоимость.

Быстро отвечаем, оценим сроки и стоимость.

Быстро отвечаем, оценим сроки и стоимость.

SPAR
SPAR
Biocad
Biocad
Senior Group
Senior Group
Moscow Digital School
Moscow Digital School
TRNR
TRNR

и ещё 25+ компаний заказывали у нас дизайн интерфейсов

и ещё 25+ компаний заказывали у нас дизайн интерфейсов