Индивидуальный дизайн школы на XL:
как оформить уроки и личный кабинет
в фирменном стиле
Было
Школа хотела, чтобы личный кабинет и упаковка курсов выглядели как собственный цифровой продукт: в фирменном стиле, на уровне крупных компаний.
Можно было сделать это самостоятельно, но школе было невыгодно тратить ресурсы
своей команды на обновление дизайна и сборку.
Проще и быстрее — передать задачу техспецам и получить готовую, брендированную упаковку курсов и личного кабинета под ключ.
Стало
Мы собрали единый визуальный язык и полностью обновили интерфейс и упаковку продуктов школы на платформе Prodamus.XL.
Шаг 1. Разработали дизайн-систему для бренда школы
- Изучили брендбук школы, сценарии использования личного кабинета и структуру курсов.
- Создали систему компонентов: кнопки, карточки, поля ввода, типографику.
- Проработали разные варианты поведения элементов — наведение, нажатие, неактивное состояние, ошибки и уведомления.
- Собрали макеты интерфейсов в Figma.
Пример системы компонентов из рабочей документации в Figma для редизайна:
Пример готового дизайна на платформе XL:
Шаг 2. Обновили интерфейс личного кабинета студента на Prodamus.XL
- Сделали редизайн страниц курса: регистрации, авторизации, главной страницы личного кабинета студента.
- Настроили структуру отображения прогресса и достижений участников.
- Создали фирменные обложки для каждого курса.
- Обновили визуальные блоки уроков: материалы, тесты и блоки с обратной связью от кураторов.
- Настроили логичную навигацию между модулями и уроками.
- Создали дизайн для дополнительных блоков и элементов в личном кабинете: календаря, блока с контактами и полезными ссылками, анонсом новых курсов.
Страницы регистрации и входа на платформу:
Пример личного кабинета студента:
Пример интерфейса для уроков на платформе XL:
Пример экрана с достижениями студента в личном кабинете:
Шаг 3. Доработали дополнительные элементы интерфейса
- Адаптировали фирменный стиль для страниц с доступом к курсу и оплатой, подписками и заказами.
- Настроили страницу партнерской программы школы.
Пример экрана с доступами и оплатой курсов:
Пример страницы партнерской программы:
Шаг 4. Упростили поддержку и обновление контента
- Собрали всё внутри Prodamus XL без внешних сервисов.
- Настроили структуру так, чтобы администраторы могли обновлять контент сами — без риска сломать дизайн.
Получилось кастомное оформление школы и ее продуктов на платформе XL.
Результат
Продукты школы на платформе XL стали брендированными и легко узнаваемыми,
с собственным фирменным стилем — как у крупных EdTech-платформ.
- Все интерфейсы — обложки, экраны, карточки, вспомогательные элементы страницы — выглядят как часть одного бренда.
- Администраторы обновляют контент самостоятельно: структура каждого продукта собрана внутри XL, остается просто заменить текст на актуальный.
- Выразительный дизайн нравится не только заказчику, но и студентам.
Школа получила кастомную дизайн-систему, которую можно масштабировать на новые курсы, продукты, форматы уроков и будущие сервисы в рамках платформы — готова база для роста и развития.
Закажите индивидуальный дизайн для вашей школы
Сделаем оформление личного кабинета и курсов под ключ — в фирменном стиле, с удобной навигацией и продуманным интерфейсом, который работает стабильно и повышает ценность вашего продукта.
Заказать решение