Предновогодние чудеса в digital: как придумать и разработать благотворительный проект за две недели
В конце 2019 года мы в дизайн-студии «Магвай» запустили digital-проект, где любой человек мог купить пиксели. Проект назвали «Русская digital-Стена 2020». А собранные средства решили распределить между фондом «Подари жизнь» и Детской художественной школой №1 в Волгограде. Сегодня расскажем, как создавали проект и, главное, зачем.
Как появилась идея
Начало нулевых. Создатели нашей студии только заканчивают школу. А британский студент Алекс Тью уже думает, где бы заработать на обучение. Секретное английское оружие – юмор и чай – помогли, вероятно, и в этот раз. Парень придумал сайт «TheMillionDollarHomepage», где каждый мог купить пиксели и разместить любую картинку или надпись.
Яркий, простой и забавный – таким был проект. И эта комбинация отлично сработала. Сайт быстро стал «вирусным». Его до сих пор вспоминают как отличный пример интернет-маркетинга. Мы решили сделать ремейк, но в своём стиле.
Представляете, мы можем сделать свой лунопарк с пикселями и благотворительностью! Такая мысль очень вдохновляет. Создать нечто такое, что сделает мир лучше здесь и сейчас. Разве это не то, ради чего стоит работать?
Была и ещё одна причина. Наша студия существует на две страны. Одно представительство находится в Берлине – столице граффити. А мы фанатеем от уличной живописи и даже коллекционируем фотографии стрит-арта в инстаграме студии. Поэтому подумали, что будет здорово расписать digital-стену нашими именами. Так родилась концепция «пиксельной стены».
Идея будущего сайта получилась интересной, но чего-то не хватало… И через некоторое время мы поняли, чего. Приближался Новый год – тот самый день, когда случаются чудеса. А если нам всем стать волшебниками? Объединиться большой digital-семьей для доброго дела? Нам было важно создать проект не ради «фана» или не денег. Именно поэтому мы решили сделать его благотворительным.
«Новый год – отличное время для добрых дел и повод оставить след в уходящем двадцатилетии. Ведь это годы зарождения и расцвета русского Digital! Его основали мечтатели, люди с большим сердцем. И неважно, где мы находимся: в регионах, в Москве или Санкт-Петербурге или, вообще, в другой стране – мы едины, мы –коллеги и друзья
Для сотрудничества мы стали выбирать фонды. Это оказался тот ещё квест. В итоге договорились с фондом Чулпан Хаматовой. Другую часть средств мы решили направить Детской художественной школой № 1 в Волгограде. Именно в этом городе работает большая часть нашей команды. И мы уверены: если хочешь, чтобы менялась среда вокруг, помогай её менять!
Что мы сделали
Как выстроить логику? Сколько пикселей должен занимать один элемент? И по какому принципу будут выстраиваться координаты? Вопросов было много.
Двадцать лет назад сайты выглядели по-другому. Проект «TheMillionDollarHomepage» существовал за счёт продажи пикселей. Но разрешение современных мониторов настолько большое, что пиксели невозможно разглядеть. Нужно было придумать альтернативу с современным подходам.
Так появились digital-пиксели. Один digital-пиксель — 50х50 обычных пикселей. Чем больше digital-пикселей, тем заметнее логотип/рисунок на стене. А в итоге это больший вклад в проект, цель которого – собрать деньги для детей.
Тогда же пришла идея сделать отсылку к любимым играм «Сапёр» и «Танчики». Мы решили вдохновиться ретро-форматом и геймифицировать процесс. Ведь в этом случае знакомство с сервисом станет интереснее. Человек сможет научиться простейшему алгоритму по шагам.
Мы использовали иммерсивный подход в дизайне, чтобы создать прямой отклик у пользователей на каждое действие из алгоритма при покупке места на Стене. Весь интерактив разработали на чистом JavaScript с минимальным использованием jQuery. При создании всплывающих окон каждого шага мы использовали тег
По нашей задумке, страниц у сайта было немного. Весь акцент на Стену и механизм добавления логотипов и рисунков. Ещё пара страниц с информацией о проекте и данными для СМИ.
Разработку начали с нейминга и логотипа. У нас есть услуга, когда заказчик платит фиксированную сумму и получает готовый логотип максимально быстро. Мы протестировали этот экспресс-вариант на себе. Ещё 3 дня ушло на дизайн.
Бэк сделали на чистом PHP, всё должно было работать быстро, без лишней смысловой нагрузки. CMS для управления отдельными элементами сделали на ZENDFramework. Например, формирование счета. Целевая аудитория проекта – руководители, фрилансеры, которые могут расплатиться картой, и для этого была предусмотрена онлайн-оплата. Но есть ещё маркетологи или менеджеры, которые идут с утверждением счёта к директору. И тут возникает еще один важный момент: оплата для юридических лиц.
Мы позаботились, чтобы счёт формировался автоматически. Пользователь указывает реквизиты в форме обратной связи, а счёт приходит на почту. Одновременно бронируется место на сайте, и на Стене появляется затемнённое изображение «под замком». Как только счёт оплачен, элемент становится активным.
На весь фронтенд потратили около 4-х дней (и немного ночей). Ещё неделя на программирование, подключение платежных агрегаторов, тестирование. И в понедельник 23 декабря 2019 года в 12:00 по московскому времени мы запустили проект!
За информационной поддержкой мы обратились ко многим известным персонам в digital, а также к IT-сообществам, СМИ и ассоциациям. Откликнулись не все, многие проигнорировали, это сказалось на охвате. Но тем, кто откликнулся, мы очень благодарны: CMSMagazine, Рейтинг Рунета, Спайк комьюнити, ARDA, Spark.
Олдскул vs современность
Идея DigitalWall2020 была в том, чтобы показать уходящие 20 лет нового тысячелетия. Поэтому по задумке это была олдскульная, пиксельная стена, которая работает только с ПК. Какой адаптив в начале нулевых? Но современные пользователи, конечно, заходят на сайт с телефонов и сразу хотят купить пиксели. Поэтому мы доработали Стену. И полный функционал сервиса стал доступен с любых мобильных устройств
Адаптивная версия сайта появилась уже после официального запуска. С тестированием на это ушло 3 дня. В самом начале мы отказались от этой идеи, потому что опасались за сроки проекта. Но в итоге адаптив сделали и внедрили быстро, хотя и на пределе возможностей.
Подводные камни, которые нас не остановили
Мы планировали быстро запустить сайт. Но серьёзной проблемой стала интеграция «Яндекс.Кассы» и LIFE PAY. Сегодня не существует готовых модулей, которые позволяют сервисам обмениваться данными. Мы уже сталкивались с этим на других проектах. Единственный выход — интегрировать обе системы по API. На это ушло около дня.
Также для работы с LIFE PAY и «Яндекс.Кассой» требовались документы (договоры, соглашения, предоставление регистрационных данных). Но привязанный почтовый аккаунт внезапно забанили за спам. Мы пропускали важные письма от сервисов и не понимали, что происходит. Пришлось звонить напрямую. Спасибо коллегам, нам пошли навстречу. Проблема с отправкой писем решилась за день, и подписать все документы удалось вовремя.
Незабываемое чувство, когда несложные с виду решения подтягивают проблему за проблемой каждый час. Кто-то из партнеров не дослал бланк, который нужно заполнить, кто-то забыл сделать настройки на стороне API, и всё начинает валиться из рук… Тут нужно вдохнуть поглубже и приступить к задачам. Мы поняли, что времени на эмоции нет, нужно просто делать, только тогда можно достигнуть цели в короткие сроки
Что с проектом сегодня
Сейчас «Русская digital-стена 2020» официально закрыта. Мы больше не принимаем платежи, но в течение года на сайте https://digitalwall2020.ru/ можно будет увидеть всех, кто успел принять участие в проекте. Мы искренне благодарим вас за поддержку! Digital-братство существует!
Почему мы закрыли Стену? Причин было несколько. Несмотря на то, что от идеи до запуска прошло всего 2 недели, время было упущено. Перед Новым годом люди настроены совершать добрые дела и участвовать в благотворительности. А после праздника интерес сошел на нет. Безусловно, сказалась и слабая информационная поддержка. Но совершать ошибки и учиться – это часть развития.
В ближайшее время мы всё посчитаем, покажем чеки и отчитаемся, куда направили деньги. В следующей статье расскажем с цифрами, что получилось, а что не очень. Нам немного грустно, что проект закончился. Но мы знаем, когда закрывается одна дверь, где-то открывается целая планета. Полетели!