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

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

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

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

​Главная сайта <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.xn--b1ag9a.xn--80asehdb%2F&postId=125101" rel="nofollow noreferrer noopener" target="_blank">все.онлайн</a> — сборника сервисов, которые помогают комфортнее пережить карантин
​Главная сайта все.онлайн — сборника сервисов, которые помогают комфортнее пережить карантин

20 марта — прототип

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

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

​Прототип сайта, который мы подготовили в пятницу. <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.figma.com%2Fproto%2FeKzt89r62NRYDlceOhVzyg%2F%25D0%2592%25D1%2581%25D1%2591-%25D0%259E%25D0%25BD%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25BD-%25D0%259F%25D1%2580%25D0%25BE%25D1%2582%25D0%25BE%25D1%2582%25D0%25B8%25D0%25BF-%25D0%259F%25D1%2580%25D0%25BE%25D0%25B5%25D0%25BA%25D1%2582%25D1%258B-Atman%3Fnode-id%3D1209%253A350%26amp%3Bviewport%3D690%252C354%252C0.12378523498773575%26amp%3Bscaling%3Dscale-down-width&postId=125101" rel="nofollow noreferrer noopener" target="_blank">Открыть в Figma</a>
​Прототип сайта, который мы подготовили в пятницу. Открыть в Figma

21 марта — доработка концепции и старт разработки

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

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

​Одно из изменений на иллюстрациях. Карантин — время надевать маски
​Одно из изменений на иллюстрациях. Карантин — время надевать маски

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

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

22 марта — демонстрация министру

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

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

​Дизайнер решает проблему неоднородности логотипов: много просто вытащили с сайтов через инспектор браузера, местами убрали фон, а некоторые перерисовывали, чтобы улучшить качество
​Дизайнер решает проблему неоднородности логотипов: много просто вытащили с сайтов через инспектор браузера, местами убрали фон, а некоторые перерисовывали, чтобы улучшить качество

23 марта — запуск, обратная связь, новые сервисы

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

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

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

Почему этим занимались вы? Почему не студия Лебедева или какое-то известное агентство?

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

Почему сайт на конструкторе Webflow? Вы решили подороже им продать примитивный конструктор?

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

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

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

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

Почему там именно эти сервисы? Они что, дали вам реферальные ссылки?

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

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

То есть вы типа молодцы

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

55
10 комментариев

Уж лучше Яндекс.Дзен ...

Какое уникальное информационное наполнение есть в этом тексте?
Какая конкретно гипотеза заставила вас опубликовать свои воспоминания об удачно проведённых выходных?
Вы спамер?
Это ещё куда не шло - интернета без спама не бывает.

Но вы же просто врёте.
Сайт онлайн 40 дней.
Если, исходя из "60 000 пользователей в первый день" предположить, что на сайт заходит по 10000 в день, то это 400000 уникальных посетителей за всё время онлайн.
"На глаз" у вас в среднем по 150 лайков на карточку. Всего 479 сервисов. Итого примерно 70,000 лайков получено за всё время.
Это 17,5% кликабельность на лайки. Серьёзно?
Ну поздравляю тогда конечно, ведь вы со своим сайтом 'все.онлайн' вошли в элиту социальных площадок. Думаю, если добавите у себя ещё 500 сервисов, то TikTok занервничает.

Но уж лучше Яндекс.Дзен ...

1
Ответить

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

1
Ответить

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

1
Ответить

Симпатичный сайт

Ответить

Вы же понимаете, что в этой истории не хватает, да?

Ответить

Рабочего сайта для начала?)

Ответить

Такой зум-эффект на ховер карточки так себе идея. Все шрифты при масштабе размываются и становится не комфортно читать текст

Ответить