Bang Bang Education + Astroshock: как затащить слона на стол, сохранив в целостности хобот (и, по ситуации, свой хребет)

Bang Bang Education + Astroshock: как затащить слона на стол, сохранив в целостности хобот (и, по ситуации, свой хребет)

Мы в Астрошоке делаем сложные сайты и мобильные приложения. Наш конёк — это коллаборации с классными дизайнерами, поэтому мы не могли остаться в стороне, когда узнали о том, что Bang Bang Education страдают без единой системы управления учебным процессом. Вписались. Ну а как иначе, когда вокруг Бэнгов происходит, пожалуй, самая большая дизайн-движуха в России, мы с давних пор тепло дружим с основательницами — Наташей Климчук и Олей Морозовой, — а наше финансовое положение располагает к авантюрам? Такая ситуация выбора не оставляет.

Это история о том, как мы с нуля делали для BBE (Bang Bang Education) кастомную LMS (Learning Management System) — систему, через которую происходит онлайн-обучение: создаются курсы и уроки, задаются и проверяются домашние задания, а также администрируется весь учебный процесс. Это также история о том, как крупно мы попали, и о том, как же, всё-таки, классно всё получилось!

Пандемия

Итак, Bang Bang Education — это проект про онлайн-образование в сфере дизайна и иллюстрации, который появился в 2015 году в рамках иллюстраторского агентства Bang! Bang! — между прочим, крупнейшего в России.

Поначалу проект развивался неспеша: появлялись курсы, проходили вебинары и лекции, пополнялась библиотека. Лично меня больше всего радовали записи бесед с дизайнерами — на тот момент это был свежий формат и кладезь полезной информации. Ну и, конечно, большим событием был выход их документального фильма «100 лет дизайна», на который мы даже отправились большой астрошоковской компанией в кинотеатр.

Всё изменила пандемия. Весной 2020 года мир сошёл с ума, и Бэнги, улавливая направление ветра, решили временно организовать бесплатный доступ к своему продукту «Дизайн-библиотека». Ход оказался настолько удачным, что на волне возросшего внимания к онлайн-образованию новость распространили многие крупные медиа. От наплыва желающих провести самоизоляцию с пользой сайт Bang Bang Education рухнул.

<i>До сих пор не понимаю, как можно в такой момент стесняться сразу звонить на мобильный, но Наташу, видимо, не исправить</i>
До сих пор не понимаю, как можно в такой момент стесняться сразу звонить на мобильный, но Наташу, видимо, не исправить

Мы подняли лучшие силы Астрошока в лице Димы Гущина и, совместно с бессменным штатным бэнговским разработчиком Юрой Шишкиным, провели незабываемый вечер. Сайт заработал. Так началось наше погружение в беды BBE.

Первым делом занялись приведением в порядок серверной инфраструктуры — чтобы сайт был готов к высоким нагрузкам. Чек. Затем, словив синергию, обновили фасад сайта, редизайн которого выполнил смельчак из Electric Red Studio, Свят Вишняков. Чек. Оставалась глыба: система управления учебным процессом…

На подступах

Клубок, который нам предстояло распутать, включал себя, помимо неказистого (с точки зрения разработчиков) сайта BBE, всевозможные группы в Фэйсбуке, каналы и чаты в Слэке и Телеграме, графические редакторы для рецензирования работ и прочие инструменты, которые можно было использовать для организации и проведения онлайн-обучения. Чёткой системы не было, и процесс по прихоти отдельных людей хаотично плавал от курса к курсу.

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

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

Маргарита Марянян, Руководитель проекта LMS со стороны BBE

Что мы в Астрошоке осознали сразу:

  • дать точную оценку такому крупному проекту невозможно;
  • с фиксированным бюджетом (о нём — ниже) мы останемся в минусе.

Нам не впервой браться за убыточные проекты. Собственно, мы с них и начинали. Когда об Астрошоке ещё никто не знал, мы брались за любую возможность себя проявить. Философия была простой: делать немыслимое, доставляя максимальное качество и забыв про убытки. Этот подход дал свои плоды: мы получили репутацию приятных и надёжных разработчиков среди топовых дизайнеров (сначала это были Sila, затем другие российские дизайнеры вроде Sulliwan Studio и White Russian, а затем и ребята из-за рубежа вроде Anton & Irene и Clay), нарисовались серьёзные и прибыльные проекты (вроде Spotify, World Chess и Zumtobel), и мы стали процветать.

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

Если говорить о целях с точки зрения практичности, то они были простыми:

  • Занять сотрудников. Летом 2020 года перенеслись два крупных проекта, которые у нас были изначально запланированы (новый сайт и билетная система для Большого театра и сайт огромного гонконгского музея современного искусства М+).
  • Хотя бы частично окупить проект.
  • Получить опыт в новом направлении (для нас это первая LMS).
  • Получить огласку с учетом значимости проекта.

План

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

Участники / Astroshock

  • руководитель проекта: Дмитрий Алексашин
  • менеджер проекта: Максим Козлов
  • фронтэнд-разработчик: Илья Оболенский
  • бэкэнд-разработчик: Дмитрий Гущин

Участники / BBE

  • руководитель проекта: Маргарита Марянян
  • дизайнер: Денис Валетин
  • разработчик: Юрий Шишкин

Технологии

  • Дизайн: Figma
  • Фронтэнд: Vue.js
  • Бэкэнд: Django/Python
  • Общение с клиентом: Telegram
  • Общение внутри Астрошока: Slack

Таймлайн

  • 15 августа 2020 г.: старт обсуждения
  • 7 сентября 2020 г.: начало разработки
  • 28 декабря 2020 г.: запуск первой версии
  • 1 февраля 2021 г.: окончание работ

Бюджет

Мы сразу сошлись на той скромной сумме, которую готовы были выделить BBE: 3 500 000 ₽. При нашей ставке на тот момент (2500 ₽/ч) проект должен был занять 176 рабочих дней. В минус мы должны были уйти примерно после 220 рабочих дней (себестоимость нашего часа тогда равнялась 2000 ₽). Было бы здорово уложиться в бюджет и вписаться в таймлайн, но всё указывало на то, что сделать этого не получится. Однако, нас не пугали лишние затраты и бодрило то, что у клиента были довольно строгие временные рамки — значит проект не растянется до бесконечности.

Старт

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

Система, которую предстояло создать, состояла из трёх крупных частей, соответствующих ключевым ролям:

  • Для студента
  • Для преподавателя (он же наставник)
  • Для координатора (он же админ системы)
<i>Общая структура LMS</i>
Общая структура LMS

Самые большие возможности — у координатора; он может заводить курсы, распределять преподавателей и студентов; поистине всесильный персонаж. Чуть меньше привилегий — у преподавателя; он работает в рамках своего курса, заводя задания и рецензируя присылаемые студентами работы. Ещё меньше прав — у студента; он покорно внимает и отправляет домашние задания на проверку.

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

<i>106 макетов на старте. Figma, масштаб 2%</i>
106 макетов на старте. Figma, масштаб 2%

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

<i>Дэшборд координатора</i>
Дэшборд координатора

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

<i>Дэшборд выглядит одинаково у студента и преподавателя</i>
Дэшборд выглядит одинаково у студента и преподавателя
<p><i>Страница курса</i></p>

Страница курса

<p><i>Мобильная версия</i></p>

Мобильная версия

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

<i>Работы студентов в интерфейсе преподавателя</i>
Работы студентов в интерфейсе преподавателя
<i>Диплом, выдаваемый студенту после прохождения курса</i>
Диплом, выдаваемый студенту после прохождения курса

Процесс

Мы усердно работали всю осень. Дела шли по плану, и в ноябре ещё оставалось ощущение, что LMS будет запущена до Нового года.

Но, конечно же, в декабре возник классический авральный режим, вызванный надвигающимися затяжными праздниками, когда нужно всё успеть. Количество макетов росло, по ходу работы возникали изменения; плюс, подпирали другие проекты, где временами невозможно было справиться без участия задействованных на BBE людей. Складывалась идеальная ситуация для того, чтобы спровоцировать у программиста нервый срыв, поэтому пришлось замедлиться и перенести запуск.

Первую версию решили запускать спокойно, после праздников, и 18 января она успешно ушла в продакшн.

Bang Bang Education + Astroshock: как затащить слона на стол, сохранив в целостности хобот (и, по ситуации, свой хребет)

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

В процессе работы 106 стартовых макетов превратились в 484.

Если координатор был самой сложной ролью с точки зрения полномочий, то в плане интерфейсов самым навороченным кейсом вышел студент: 233 макета.

<i>233 макета: экраны для студента. Figma, масштаб 2%</i>
233 макета: экраны для студента. Figma, масштаб 2%

Следом шли 162 макета с интерфейсами преподавателя.

<i>162 макета: экраны для преподавателя. Figma, масштаб 2%</i>
162 макета: экраны для преподавателя. Figma, масштаб 2%

И, наконец, для координатора осказалось достаточно 89 макетов.

<i>89 макетов: экраны для координатора. Figma, масштаб 2%</i>
89 макетов: экраны для координатора. Figma, масштаб 2%

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

<i>Работа, отправленная на ревью преподавателю</i>
Работа, отправленная на ревью преподавателю
<i>Комментарии к работе студента</i>
Комментарии к работе студента

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

С точки зрения бэкэнда проект оказался одним из самых навороченных за всю историю нашей компании. Пришлось создать архитектуру с большим количеством взаимосвязей разных данных, которые перетекают из одного места в другое. Отдельным челленджем было совмещение Django ORM с внешними данными, с последующим кешированием этих данных. Например, аккаунты студентов, потоки студентов и курсы, хранятся вне LMS — на основном сайте bangbangeducation.ru, — откуда их нужно тянуть и следить за их своевременным обновлением.

Bang Bang Education + Astroshock: как затащить слона на стол, сохранив в целостности хобот (и, по ситуации, свой хребет)

Кайф

  • Хороших разработчиков хлебом не корми — дай заняться чем-то новым. При этом клиенты из новых областей, с интересными запросами приходят редко. Сделаешь сайт отеля — приходят за сайтами отелей. Сделаешь сайт архитектурного бюро — приходят за сайтами архитектурных бюро. В случае с BBE LMS мы просто получали удовольствие от новизны, масштаба и сложности работы. Особенным кайфом была разработка редактора домашних заданий в интерфейсе преподавателя — самой непростой части проекта. Кажется, мы задроты. 👨‍💻
  • На проекте с нашей стороны работали два разработчика. Один занимался фронтэндом, другой — бэкэндом. Связка именно этих ребят, Димы Гущина и Ильи Оболенского, получилась уникальной. Фронтэндер на очень хорошем уровне знает бэкэнд, а бэкэндер очень хорош во фронте. По сути работали два фуллстэк-программиста. Как результат, любые согласования между ними проходили гладко и быстро. Иногда они даже дописывали код друг за другом, что редко встречается при разработке клиентских проектов. 🛠
  • Стоит отдаль должное клиенту. Уровень макетов, которые нам выдавались, был сильно выше среднего. Даже у крутых дизайн-студий из Европы и США при высоком уровне самого дизайна в макетах частенько обнаруживается полный бардак. Конечно, и у BBE были недоработки в плане адаптивных версий, но зато не было пляшущих расстояний между одинаковыми элементами, дробных пикселей, недоделанных интерфейсов или глобально непродуманных сценариев (а мы сталкиваемся с подобным в ¾ проектов). 🪄
  • Разработчики — народ специфичный. Допускать прямого общения между ними и клиентами и даже дизайнерами — себе дороже. Клиент может решить, что мы не хотим досточно погружаться в его ситуацию, а разработчик нередко начинает считать клиента неспособным как следует всё объяснить. Здесь же всё вышло иначе. В какой-то момент наш менеджер, Максим Козлов, специально отошёл в сторону, чтобы не мешать взаимодействию разработчиков с клиентом. За кулисами мы по-прежнему решали свои проблемы и приоритизировали задачи, но функция менеджера как посредника в общении была выключена. Во многом мы позволили это благодаря профессионализму Маргариты Марянян, менеджера со стороны BBE. 🙏

Некайф

  • Тяжело работать, когда на старте есть только блок-схема с функциями ролей в LMS и документ с очень ограниченными описаниями. В документе — 12 страниц, а должно быть как минимум 112. Кроме того, макеты были готовы примерно на 20%. Стояли жёсткие временные ограничения, поэтому мы не стали тратить время на составления подробного ТЗ и дорисовку макетов. В такой ситуации часть кода приходится отправлять в корзину, и программисты получают от этого лишний стресс. ⏳
  • Как было сказано выше, из-за нехватки времени мы решили сделать интерфейс координатора в material’е. Мы пошли дальше и решили взять готовую библиотеку ui-элементов: кнопок, инпутов и т.д. Поскольку на фронте мы используем Vue.js, то по ключевым словам vue и material design мы нагуглили библиотеку vuematerial.io и решили сразу её использовать. По готовности трети интерфейсов координатора мы поняли, что библиотека напичкана багами и практически не поддерживается. Вместо того, чтобы тратить тонну времени на правки, стоило бы потратить несколько часов на изучение и выбрать в результате что-то другое. Мы остались с vuematerial.io, но пришлось как следует её дорабатывать. 🪲
  • Apple любит гордиться тем, что их новые телефоны работают чуть дольше старых или аналогичных, и разработчики давно знают, в чём секрет: в искусственных ограничениях на производительность, количество которых постоянно растёт. На этом проекте мы столкнулись с тем, что iOS Safari падает с ошибкой на превышенный размер занятой оперативной памяти. Например, когда преподаватель открывает с Айфона большие картинки, загруженные студентами. Эту проблему можно бы было решить через очень сложную и долгую разработку на canvas’е, но мы сэкономили время и ограничили скейл картинки до тех пределов, когда оперативная память загружена на 10 Мб. 📱
  • Мы гордимся кодом, который написали, но в паре мест из-за нехватки времени навели некоторый сумбур. Всё работает как надо, и сами мы в этом коде разберёмся, но если проект откроет сторонний разработчик, то местами ему придётся поломать голову. Чтобы код стал более читабельным, стоило бы вынести какие-то вещи в компоненты. Но это бы заняло ещё несколько дней, и мы скрепя сердце оставили кое-где на фронтэнде всё как есть. 😔
  • Был промах с бэкэндом. По мере продвижения пришло понимание, что лучше кешировать данные не на уровне запросов к внешнему API, а прямо в моделях и кверисетах — чтобы избегать лишнего декодирования JSON’a. Для нас это был важный и полезный опыт — даже спустя 10 лет мы продолжаем учиться. 🤖

Ожидания и реальность

Окончание работ

Ожидание: 1 февраля 2021 г.

Реальность: 1 июня 2021 г.

Трудозатраты на разработку

Ожидание: 176 рабочих дней

Реальность: 324 рабочих дня

Бюджет на разработку

Реальность: 3 500 000 ₽

Ожидание (по итогам проекта): 6 500 000 ₽

Результат

Ожидание: ★★★★★

Реальность: ★★★★★

Приходите учиться в Bang Bang Education: bangbangeducation.ru

А за сложной разработкой приходите к нам: astroshock.ru

2020
13 комментариев

Комментарий недоступен

Ответить

Переименовываемся в Нубстрошок!

4
Ответить

Понимаю какой объём работ выполнен, так как сам кручусь в этой теме. Но зашёл на сайт - и честно это какой то ад для эпилептика. Мерцающие максимально контрастные картинки в разных местах. Хаотично разлетающиеся буквы с отсутствием антиалиасинга. Все кромки мерцающие белые. Я думал что я не эпилептик - но меня что то начало подташнивать. Шучу. Такие свистоперделки начинают бесить любого уже через секунд 30.
Что касается тёмной темы - то никто не ставит абсолютно чёрный цвет. ОТ него глаза вытекают. Если посмотреть любую студию то там как правило ставят #444.

Пролистал сайт ниже - такое ощущение что проблемы с scale. У меня на 1920x1200 выглядит всё дико огромным. Да и вообще всё выглядит как какой то шаблон набросанный на коленке за 30 минут. Что бы было. Что бы потом сделать нормально.

Попробовал scale - не работает. Ради интереса посмотрел что у вас там например на размере font стоит. Вот что calc(var(--scale)*19); Вы лишаете возможность пользователя установить комфортный для него scale

1
Ответить

Вы говорите о сайте https://bangbangeducation.ru/, который является скорее сайтом-витриной. В статье речь идёт о другом — об LMS, которая лежит по адресу https://lms.bangbangeducation.ru/ и доступна тем, кто проходит/проводит курсы. Впрочем, сайт https://bangbangeducation.ru/ тоже разрабатывали мы, правда лишь частично — только фронтэнд, и то не все страницы.

Ваша критика относится к решениям на уровне дизайна. Это не наши решения, а клиента, и, боюсь, я не смогу их обосновать. Поддерживать критику или оправдывать этот дизайн в целом мне тоже не хочется. Скажу лишь, что сам я воспринимаю эту работу как что-то на грани дизайна и искусства — в этом главное отличие BBE от других образовательных проектов, и в этом есть свой кайф.

1
Ответить
1
Ответить

Боже, наконец таки!

Ответить