Удобные и красивые интерфейсы — важная часть проекта, но обычно их сложно создать в сжатые сроки. Чтобы успеть к дедлайну, дизайнеры студии MateÇa (Маца), наши фронтендеры и бэкендеры работали параллельно.

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

Фронтенд-стек: TypeScript, Vue, Pinia Colada.

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

Продуктовая идея → Дизайн → Верстка компонентов → Согласование с дизайнерами и клиентом → Оптимизация компонентов → Сборка готовых страниц

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

После завершения проекта у «Синхронизации» осталась большая протестированная и актуальная библиотека компонентов. Это ускорит запуск будущих проектов, например, мобильных приложений.

«Синхронизация» использовала сложный франкенштейн из готовых решений и самописного кода. Готовые инструменты слабо кастомизируются и главное — не сохраняют прогресс просмотра. Как уж тут конкурировать с Netflix и YouTube, где продолжить просмотр можно в один клик.

Сразу заменить движок целиком — слишком большой риск: если вдруг новая платформа не заработает, пострадает бизнес. Поэтому в новой архитектуре старые решения и новая платформа работают параллельно. Еще при реализации было важно не поломать старые связи с продуктовыми лендингами и аккуратно передавать данные о покупках, подписках и возвратах.
‍
Центр «Синхронизации» — видеоконтент. При этом создавать собственную систему доставки видео и видеоплеер — дорого и непрактично. Мы интегрировали Kinescope — готовую платформу для видео. Но нам не хотелось сделать клиента заложником внешнего вендора, поэтому реализовали интеграцию, которая позволяет при необходимости безболезненно сменить видеоплатформу.

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

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

Старая контентная админка была сложной и запутанной, разработка новой заняла бы минимум полтора месяца.

Поэтому при проектировании мы помогли сформировать требования к админке так, чтобы данные можно было в основном представлять в табличном виде.

Это позволило использовать стандартную админку Django и ускорить запуск минимум на месяц. Если в будущем структура данных или требования усложнятся, команда сможет доработать кастомную админку — так мы уже сделали для «Вебиума».

В результате контент-менеджеры «Синхронизации» получили инструмент с продвинутыми функциями, такими как версионирование, практически без дополнительных затрат на разработку.

Татьяна Лунина

Директор по продукту

«Благодаря новой архитектуре мы теперь можем создавать продукты, которые изначально не закладывали в ТЗ. Гибкость решения позволяет реализовывать практически любые идеи без участия разработчиков — только через админку.

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

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

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

«Ребята не боялись выходить за рамки изначального плана, добавляя такие детали, как меняющиеся аватарки, рандомайзер картинок на странице авторизации, симпатичные empty states и страницы благодарности. Это были спонтанные идеи, не связанные напрямую с бизнес-целями, но их реализовали, когда видели, что есть ресурс.

При этом не раздували сроки и не перекладывали на нас ответственность за дополнительные задачи»