Назад

ITHub

EdTech-платформа ✢ для нового поколения студентов

EdTechB2C & B2BWeb

Product Designer

2024-25

Russia

11 months

Link to product

6000+

пользователей ежедневно

7 ролей в системе

не считая пермишенов

11 месяцев

работы в параллель с разработкой

Больше о проекте на Workspace
iTHub — обзор интерфейса платформы

Как мне удалось привести сложный продукт к системе без остановки разработки❞

№1

Контекст

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

На момент старта: — старая система не масштабировалась под рост сети — сложная ролевая модель ломала UX — продукт рос быстрее, чем успевал оформляться.

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

№2

Задача и цели

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

Мне предстояло:

— привести продукт к целостному UX — систематизировать интерфейс и паттерны — поддержать разработку в условиях жёстких сроков — подготовить продукт к масштабированию.

№3

В чём была реальная сложность

Это не просто «сайт для обучения», а система, в которой существуют 7 ролей с разными правами (при этом один пользователь может иметь несколько ролей одновременно), множество сценариев у каждой из ролей.

№4

Принятые решения

Вместо полного редизайна, который бы сильно тормозил разработку, я:

Систематизация вместо редизайна

— унифицировала компоненты — выровняла паттерны взаимодействия — снизила хаос в интерфейсе.

Доработка ролевой модели

Ролевая модель — критичное место для сложного продукта, поэтому я:

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

Поддержка параллельной разработки

Выстроила процесс таким образом, чтобы дизайн стал частью общей работы над продуктом, а не бутылочным горлышком:

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

№5

Мой флоу работы

любая фича начиналась с ⚑ базы знаний

а база знаний строилась на ♺ блиц-опросе специалистов

после изучения контекста я ⁕ с продактом составляла JTBD

а далее мы собирались на техническое проектирование с командой разработки, чтобы договориться о решении ☚

после утверждения решения я работала над флоу ♽ и прорабатывала сценарии

показывала результат команде фичи и получала (или нет ✿) фидбек, чтобы уйти на ещё одну итерацию до финальной версии

последний этап всегда — обработка последствий ❐ (в такой большой системе с ролями любые изменения тянут за собой последствия в других местах)

№6

Ключевые фичи, над которыми я работала

⚈ Академическая разница

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

Фича затрагивала две админские роли, роли преподавателя, куратора, студента и представителя студента.

Основная сложность — встроить фичу в уже существующую систему правил платформы: переводы должны соответствовать логике сервиса и учитывать ролевые ограничения. Под каждую роль были отрисованы свои сценарии с учётом этих особенностей.

Проверка на академическую разницу
Дисциплины студента и группы
Задания для академической разницы
Список студентов с проверкой заданий

⚈ Нагрузка преподавателей

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

Фича проектировалась для роли менеджера кафедры, чтобы сократить затрачиваемое время (в среднем 42 часа на заполнение и ещё столько же на исправление ошибок → сократилось вдвое).

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

Список преподавателей с нагрузкой
Назначение группы/подгруппы

⚈ Дерево компетенций

Дерево компетенций — визуальное отображение карты траекторий (учебного плана). На дереве показываются уровни вложенности простых компетенций в верхнеуровневые.

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

Дерево компетенций — японский язык
Правила отображения компетенций

кроме того, в результате были обозначены понятные правила отображения компетенций ⇴

⚈ Карта компетенций

Карта компетенций — визуализация того, как компетенции ложатся на карту траекторий. Фактически, это то же дерево компетенций — только для студента.

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

Карта компетенций — радар
Карта компетенций — древовидная
Карта компетенций — список
Карта компетенций на старой платформе

а это то, как эта же фича выглядела на старой платформе ⇇

⚈ Улучшение расписания

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

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

Расписание — обзор
Состояния карточек событий
Доп.стейты по группе/подгруппе и потоку
Минимальная информация на карточках
Подробная информация о событии

⚈ Карты траекторий

Карта траекторий — связка изучаемых дисциплин в секциях обучения с фактическими учебными периодами. У одной квалификации может быть несколько траекторий.

Нужна была возможность создать новую траекторию на базе другой так, чтобы при этом в неё добавились шаблоны-секции из траектории-основы. В результате получилось не только реализовать функционал, но и упростить отображение.

Карта траекторий — модальное окно
Карта траекторий — список квалификаций

За время работы над продуктом я реализовала более 30 новых фичей и разделов ⟾ подготовила классную презентацию о них для вас ⟾ смогу показать и рассказать о них лично на собеседовании!

Переводы студентовАкадемическая разницаНагрузка преподавателейОпросники абитуриентовПереиспользование ШС и СРаспространение ШД и ШССоздание собраний в TeamsСоздание 1 пользователяКураторский функционал (отдельная роль)Улучшение КТПРабочие программыХард-компетенции и софт-компетенцииОнлайн-события и поле для конференцийПоиск свободной аудитории в расписанииУлучшения расписанияОтчисление студентов без последствийПереработка журналов успеваемости и посещаемостиПереработка индивидуальных журналов студентовАрхивация УПМассовое зачисление и отчисление студентовРаспространение траекторий, специальностей и квалификацийСинхронизация контентаБлок статистикиМассовое создание Д от ШД в ШСРолевая система (и пермишены)История обучения студентаHelp Center (Инструкции на платформе)Карты компетенцийДерево компетенцийИнтеграция МТС-linkАвтоматические статусы темПроработка WYSIWYG/MARKDOWNНазначение ВФ и ПФРазработка дизайн-системыРазработка тёмной темы

№7

В итоге

  • За время работы над продуктом лично я реализовала более 30 новых фичей и разделов ⟾
  • — Была запущена новая версия платформы к назначенному дедлайну
  • — Продуктом ежедневно пользуются 6000+ пользователей
  • — Интерфейс стал более целостным и предсказуемым
  • — Заложена база для масштабирования и развития