TutorPlace — EdTech платформа для авторов курсов
Дизайн-система. Дизайн-токены. Личный кабинет. Геймификация. LMS.
О проекте
TutorPlace — EdTech платформа полного цикла, где любой желающий автор курса может предоставить свой опыт и монетизировать его. Платформа была запущена 18 июня 2023 года. Продукт запустили как MVP, чтобы улучшать уже опираясь в том числе: на пользовательский опыт, продуктовые метрики сайта, рост LTV, конверсию.
За год платформа выросла до больших масштабов:
- Получила статус «Отечественный разработчик ПО»
- Получила государственную поддержку от Сколково
- На платформу заходят более 350 тысяч посетителей в месяц
- На платформе более 2 млн активных клиентов
- Разработала собственное IT решение в области образования
Цели
- Увеличить конверсию продукта, за счёт удобного и красивого интерфейса
- Упростить и ускорить процессы разработки и поддержки цифрового продукта
Задачи
- Разработать дизайн-систему
- Внедрить дизайн-токены
- Разработать дизайн личного кабинета
- Геймифицировать платформу
- Разработать дизайн системы управления контентом (LMS)
Дизайн-система
Дизайн-система призвана создать удобную экосистему продуктов, которая будет понятна разработчикам и пользователям.
В основе проектируемых элементов лежит атомарный подход, когда сложные компоненты состоят из нескольких, более примитивных.
Такая архитектура позволяет оперативно вносить корректировки во множество элементов сразу и обеспечивать консистентность дизайна.
Для понимания объема — это меньше 20% компонентов разработанной дизайн-системы!
Дизайн-токены
Дизайн-токены помогают установить правила и параметры, которые мы используем, чтобы сделать наш дизайн визуально согласованным. Токены позволяют нам создавать гибкий дизайн, примером которого мы можем видеть во многих сайтах и приложениях.
Личный кабинет
Личный кабинет пользователя предназначен для просмотра и использования всех возможностей площадки: прохождение уроков и модулей, использование дашбордов, отслеживание прогресса, просмотр каталога, заданий, достижений, новостей и многого другого.
* Во все дизайн-макеты интегрированы дизайн-токены, что позволило ускорить разработку в 3 раза!
Геймификация
Геймификация платформы предназначена для увеличения вовлеченности и мотивации потребителя, чтобы он достигал больших успехов и получал за это игровую валюту, которую он может потратить на различные награды (кэшбек, бонусы и т.д.) или попробовать выиграть различные ценные физические призы, такие как: airpods, iphone, наушники и многое другое.
* Во все дизайн-макеты интегрированы дизайн-токены, что позволило ускорить разработку в 3 раза!
* Колесо фортуны не является геймблинг элементом, так как его можно использовать только за свой прогресс на платформе, без каких‑либо способов пополнения игрового баланса за реальные деньги!
Дизайн-проект
На всём проекте более 240 экранов, многие экраны переделывались большое количество раз, это решение пришло исходя из метрики платформы.
Метрика платформы
* Посещаемость сайта за год выросла на 3216,26%
Организация
Любой продукт начинается с самоорганизованности, поэтому личная субординация, чистота макетов и сортировка фреймов должна быть первоочередной аксиомой для любого дизайнера.
Чтобы процесс разработки был максимально эффективным, нужно предоставить разработчику макет под верстку и дальнейшую разработку.
* Грамотная сортировка и чистота фигмы ускорила работу разработчикам, поэтому они сказали мне огроменное спасибо )))
Прототипирование
Для того, чтобы лучше понимать как работает продукт, желательно уметь делать прототипы макетов. Был разработан прототип большинства главных элементов площадки, за счёт этого можно визуально подогнать скорость анимации появления различных модальных окон и предоставить всю визуальную информацию разработчику.
* Предоставив руководству мобильный прототип, избавились от многих недопониманий и лишних вопросов. Разработчикам стало проще воспринимать как и что должно крутиться, вертеться и свистеть.
* У разработчиков больше не появлялось вопросов по поводу анимаций на сайте.
Дашборды
На платформе к каждому продуктовому курсу есть свой дашборд, для лучшего отслеживания своего прогресса во время прохождения.
Система управления обучением (LMS)
Компания «TutorPlace» использует собственную систему управления обучением, написанную внутренним отделом разработки, без оглядки на дизайн и удобство использования.
Вместе с программистами переосмыслили алгоритм работы многих разделов и сделали дизайн максимально примитивным и лёгким в освоении.
Реализация
На дизайн-макеты ушло примерно пол года (в сумме). За год платформа потерпела значительные изменения и улучшения в лучшую сторону.
За всё время работы над проектом:
- Создал большую атомарную дизайн-систему
- Интегрировал дизайн-токены
- Разработал личный кабинет автора и пользователя
- Внедрил геймификацию в платформу
- Реализовал систему управления контентом (LMS)
- Сделал компонентную систему презентаций платформы (для курсов)
- Увеличил количество пользователей
- Создал туториал и онбординг для новых потребителей
- На основе многих пользовательских метрик переработал многие элементы и разделы платформы (отдельная боль)
Результаты
Компания создала отличный продукт, которым могут пользоваться абсолютно все и за не очень дорогую подписку. LTV растёт изо дня в день. Была проделана колоссальная работа отличных специалистов. Продукт делается и улучшается максимально оперативно, за счёт колоссального пользовательского опыта и различных методологий.
Продукт делал один в роли Product Designer, полностью выстраивая продуктовый процесс вместе с Product Owner и маркетологами, всё прорабатывал максимально структурировано и качественно для разработчиков, отвечал на всевозможные вопросы, отрисовывал многие анимации на сайте, параллельно помогая всему отделу дизайнеров с рекламной составляющей.
С фигмой: дышу, сижу, стою, сплю, ем, пью. Знаю фигму с головы до пят. Для меня самое главное это — субординация в макетах, не только применять Auto layout и создать простенький Ui Kit, но и сделать всё абсолютно грамотно, вплоть до названия слоёв так, чтобы всё было на своих местах.
Делал 3D и моушен рекламу для Shorts, VK клипов для продвижения платформы.
Я компетентен в различных IT-областях, которые готов применять в любом продукте и проекте, как моушен-дизайн, так и 3D-дизайн. В потенциале хочу стать Full-Stack Designer на React.
