Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования

Position Oneum (или P1) — это соревнование для дизайн-студий. Участники оплачивают место в чемпионате и решают задачи от крупных компаний. Результаты оценивают члены жюри, и по итогам чемпионата выявляются студии-лидеры в разных индустриях.

Соавтором проекта выступил основатель нашей студии Миша Розов. Первый чемпионат провели в 2020 году, а в 2021 запустили второй сезон. Антон Шакиров, руководитель направления Method Zero, рассказал, как мы сделали сайт для P1 и провели соревнование с помощью no-code платформ.

Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования

Задача: сделать сервис для проведения чемпионата

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

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

Разработка кастомного сайта с таким функционалом заняла бы слишком много времени, поэтому мы сразу решили использовать no-code инструменты.

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

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

Наши решения

Сайт был собран на WebFlow — это продвинутая no-code платформа. Она без сбоев реализует адаптив: и в вебе, и на смартфоне все будет отображаться именно так, как задумал дизайнер. А главное — на WebFlow удобно добавлять дополнительный функционал с помощью кода или интеграции других no-code инструментов. Эти возможности кастомизации мы активно использовали в разработке сервиса для P1.

Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования

Для продажи мест

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

Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования

Для проведения оплаты мы использовали платежную систему Cloudpayments. Она работает через собственный плагин: платежный виджет встраивается на сайт.

Для оценки работ

Чемпионат проходил в нескольких индустриях параллельно: их было 12 в первом сезоне и 7 во втором. Внутри каждой индустрии состязались до 6 команд, они отправляли презентацию с результатом работы и сопроводительное видео. Их проекты оценивали 3-5 членов жюри. При этом есть порядка 20 критериев, по которым командам проставляются баллы.

Нужно было автоматизировать процесс, чтобы каждый член жюри получил только работы в своей индустрии, не видел названий студий и оценки коллег. Для этого мы собрали отдельное приложение на no-code платформе GlideApps. Каждый член жюри мог зайти в свою учетную запись, просмотреть нужные работы, проставить баллы и добавить комментарии.

Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования

Для обработки результатов

Мы использовали сервис AirTable. Он нужен для хранения данных по всем участникам, членам жюри и оценкам работ. По сравнению со стандартными Google Таблицами, AirTable дает возможность автоматизировать процессы и связывать таблицы между собой за несколько кликов, что сильно ускоряет работу. Например, когда команды присылают проекты, в соответствующей индустрии автоматически создаются записи под каждого члена жюри для оценки работ. А после голосования в закрытой таблице подсчитывается и выводится средний балл по каждому критерию и за весь проект в целом.

Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования

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

Как мы вносили изменения в дизайн

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

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

Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования

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

Если необходимо изменить целый блок, на WebFlow это дело 30 минут или нескольких часов, а в кастомном коде похожие изменения могут занять дни.

Помимо сайта, наша команда подготовила для P1 много баннеров под разные задачи — для постов в соцсетях, для статей в СМИ и таргетированной рекламы. В частности, мы использовали собственные 3D-иллюстрации, выполненные в стилистике чемпионата.

Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования
Сайт чемпионата P1: как мы сделали полноценный сервис за месяц почти без программирования

Что у нас получилось: сроки и решенные задачи

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

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

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

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

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

Я считаю, что для всех, кто занимается продуктами, это превосходная возможность получить супер-скорость и масштаб.

Миша Розов, основатель P1, PINKMAN и Method Zero
2525
2 комментария

При работе с no-code, особенно несколькими, было бы круто указывать стоимость планов. Здесь 2 вида оплат на Веб-флоу, наверняка тариф за $20 на AirTable, про CloudPayernts тоже интересно. 

** продублированный коммент **