Как мы разработали сайт Все.онлайн со списком сервисов, чтобы не заскучать на карантине. «На бесплатном конструкторе»

Недавно мы в агентстве ATMAN вместе с АНО «Цифровая экономика» сделали сайт все.онлайн — список сервисов, которые помогут сделать жизнь в самоизоляции чуть комфортнее: наладить быт и удалённую работу, научиться чему-то новому или посмотреть сериальчик.

C этой задачей к нам в обратились в четверг вечером 19 марта. Коронавирус уже был главным вопросом на повестке дня, компании по всей России стали переводить людей на удалёнку, поэтому действовать надо было очень быстро. Сайт хотели запустить в понедельник утром, 23 марта, и сразу начать рекламу: показать по ТВ и повесить ссылку на сайте Госуслуг. Статья о сайте вышла и на vc.ru.

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

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

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

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

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

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

В субботу вечером мы узнали, что сайт покажут руководству Министерства цифрового развития воскресенье в 17:00. К этому времени надо было сделать так, чтобы всё работало и открывалось.

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

Важность и неожиданность предстоящего показа подлила масла в огонь, но мы ускорились, показали результат. Всё прошло окей.

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

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

Заявку на добавление сервиса уже заполнили более 600 раз. Данные с форм приходили на почту клиенту, но мы быстро поняли, что с таким потоком это неудобно. Сделали простую интеграцию через Zapier и теперь заявки попадают в Гугл-таблицу. Её модерируют на стороне заказчика, а затем отдают новые сервисы нам. На запуске было 60 сервисов, сейчас уже больше 250.

Мы уже работали с образовательным проектом «Урок цифры», который организация «Цифровая экономика», Министерство цифрового развития и Минпросвещения вместе с Яндексом, Мэйл.ру и другими цифровыми компаниями делают для школьников. Для «Урока» мы обновили и поддерживаем сайт урокцифры.рф. Так что на нас вышли через тёплый контакт. К тому же, проект «Все.онлайн» сравнительно небольшой, а сроки очень сжатые: по, сути, на запуск было три дня. Вероятно, с крупным агентством пришлось бы только на документы и согласование задачи потратить несколько дней, так что им было бы невыгодно браться за такое. А мы согласились.

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

Сразу было понятно, что функционал у «все.онлайн» не очень сложный: каталог, карточки, лайки-репосты, система фильтрации. К тому же развернуть сайт нужно было очень быстро: всего на дизайн и разработку у нас было два с половиной дня. Так что мы решили использовать Webflow: по-другому бы не успели.

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

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

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

Заказчик сразу предупредил, что список сервисов будет расти, причём, за счёт заявок на сайте. Люди будут предлагать сервисы, заполняя форму. В итоге таких предложений пришло больше 1 000. Сначала “Цифровая экономика” модерирует и отбирает подходящие под концепцию проекта заявки, потом мы добавляем их на сайт.

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