DIMORDAI

Полный редизайн EdTech-продукта — дизайн-система, 50+ экранов, по 6 состояний, для команды из 13 человек

Категория: Образование
Роль: UX/UI дизайн, дизайн-система
Сроки: 8 месяцев
Год: 2026

EdTechДизайн-системаРедизайн продуктаАдаптивный вебAI-ассистентСтартап

Описание

EdTech-платформа, которую нужно было спроектировать с нуля

DIMORDAI — образовательная платформа для старшеклассников и их родителей, которую делает стартап из Армении. Курсы, живые уроки, домашние задания, тесты, AI-помощник, рефералки и оплата — в одном продукте

Когда я присоединился, существующий дизайн просто не работал. Кофаундер позвал двух дизайнеров — меня и Лину — чтобы перестроить всё с нуля. Команда из 13 человек в разных часовых поясах: двое дизайнеров, шесть разработчиков, продакт-менеджер, кофаундер и CTO

Задача

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

Команде нужен был полный редизайн. Не красивые экраны, а система, из которой разработчики могли собирать без вопросов по каждому компоненту. И нужно было быстро: стартап готовился податься в акселератор Яндекса

Как спроектировать 50+ экранов, не задерживая 6 разработчиков?

Подход

Сначала система, потом экраны

Дизайн-система на первом месте — на базе Tailwind, со спецификациями. Каждый компонент задокументирован до того, как попадал в экран
Состояния, а не только счастливый путь — каждый экран с лоадингом, пустым состоянием, ошибкой и скелетоном. Только дашборд — 6 состояний; AI-ассистент — 4 состояния × десктоп и мобайл
Адаптив с первого дня — десктоп (1440), планшет (768), мобайл (375) для каждого ключевого экрана
Два дизайнера, одна система — я работал с Линой, разделив экраны по зонам. Ревьюили друг друга до того, как макет уходил в команду
Еженедельные синки с разработчиками — каждую пятницу, 30-минутное ревью. Они замечали ограничения, которые я не видел; я замечал сценарии, которые они не учли. Ловили проблемы до того, как они уходили в код
30+ страниц компонентов — кнопки с 15 вариантами, инпуты с 6 состояниями, чипсы, диалоги, дропдауны, таблицы, сайдбар, прогресс-бары. Каждый компонент задокументирован для передачи

решение?

Я сделал —

Решение

01/06

Дашборд, который показывает главное

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

Решение

02/06

AI-тьютор, который учит, а не просто отвечает

Ученики выбирают предмет — математика, физика, английский — и задают вопросы на естественном языке. AI подводит к ответу пошаговыми объяснениями. Интерфейс показывает историю диалога и адаптируется к уровню ученика. Родители видят, над чем работает ребёнок

Решение

03/06

Лендинг, созданный для конверсии

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

Решение

04/06

Живой урок с чатом в реальном времени

Course Hub показывает урок в живом состоянии — видеоплеер с бейджем ·Live, описание урока, материалы для скачивания и боковой чат, где ученики общаются во время занятия. Плеер адаптируется под полноэкранный режим и мобайл. Секция материалов заранее загружает рабочий лист, слайды и таблицу — ученик может сразу следить за уроком

Решение

05/06

Отслеживание прогресса на основе данных

Статистика даёт ученикам и родителям полную картину успеваемости — прогнозируемые vs целевые баллы, прогресс по курсам, траектория обучения и недельные тренды. Несколько виджетов с графиками разбивают успеваемость по предметам, времени и близости к цели. Спроектировано так, чтобы ответить на один вопрос: «я успеваю?» с первого взгляда

Решение

06/06

Библиотека компонентов, собранная с нуля

Дизайн-система включает 30+ страниц компонентов — кнопки (15 вариантов в 3 размерах), текстовые инпуты с каждым состоянием (пустой, заполнен, ошибка, неактивен, фокус), чипсы и теги, бейджи и счётчики, диалоговые окна, дропдауны, прогресс-бары, сайдбары, таблицы и другое. Каждый компонент размечен «можно брать в разработку». DS построена на 3-уровневой токен-архитектуре: Primitive цвета Semantic токены Component токены, с отступами и типографикой на базе Tailwind

Результатыконец

От старого дизайна до продукта, готового для инвесторов, за 8 месяцев

За 8 месяцев я спроектировал 50+ секций: дашборд с целями и курсами, хаб курсов с живыми уроками и ДЗ в 5 состояниях, AI-ассистент с предметным тьюторингом, авторизация с раздельными флоу для учеников и родителей, рефералка, статистика, оплаты, банк вопросов и лендинг

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

50+

Экранов спроектировано

30+

Страниц компонентов

Месяцев работы

Человек в команде