Главное Свежее Вакансии Образование
Выбор редакции:
84 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Промо-сайт «Иду на выборы»

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

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

b_5a66bd131a2fb.jpg

«В проектах, завязанных на конкретный ивент, нельзя опоздать со сдачей ни на день. У нас было 3 недели на разработку с нуля.» Илья Горбаров — Технический директор.

100% соблюдение сроков за весь период разработки и поддержки проекта.

Дизайн принят с первого раза

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

b_5a66bedf58ccd.jpg

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

Карта из аватарок

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

b_5a66bfb515490.jpg

Во-первых, на максимально большом мониторе помещается 1206 ячеек. Ожидамое число пользователей было во много десятков раз больше (за отметку на карте можно было выиграть два шестых айфона). И чем меньше монитор, тем меньше ячеек видно (уменьшать картинку 25*25 пикселей просто некуда). Заказчик сказал, что авторизованный пользователь должен найти свою аватарку ровно в том месте, где он ее добавил. Вариант полностью рандомной генерации карты не рассматривался.

Посовещавшись, мы нашли решение задачи. Положение залогиненного юзера сохраняется ему в куки. Далее при каждой перезагрузке страницы в каждой ячейке запускается функция: с определенной долей вероятности ячейка остается пустой (доступной для добавления нового пользователя), если вероятность не сработала, из всех пользователей, кто отметился в ячейке рандомно выбирается кто-то один. Таким образом, около 10% мест отображаются вакантными, а пользователи случайны в рамках одной ячейки, а не целой карты. Места по центру экрана оказались наиболее популярными, зато по краям (где в одной ячейке сохранено меньше аватарок) конкретный пользователь отображался чаще.

Решив одну техническую сложность, мы приступили к следующей: 1205 аватарок, даже не из-за веса файлов, а просто из-за количества, отдавались базой данных целую вечность (более 10 секунд).

Варианты были разные. Например, каждую минуту на сервере генерировать из мелких картинок рандомно одну большую и уже ее передавать в браузер. В итоге остановились на том, чтобы хранить аватарки и положение на карте не в MySQL, а в Redis’е. Карта стала загружаться мгновенно (менее 1 секунды).

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

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

Викторина

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

b_5a66c082c070f.jpg

Ситуацией воспользовались программисты. Лидерборд практически полностью состоял из представителей этой профессии. Чтобы убедиться в нечестной игре, мы посмотрели у одного из победителей в соц. сети время репоста записи (обязательное условие участия) и нашли в веб-визоре (инструмент Яндекс.Метрики) запись действий предполагаемого юзера. Это было не так сложно, потому что он провел на сайте 2,5 часа (дело было утром, явно в рабочее время) и испольновал Линукс (отличительная особенность программистов). Все 2,5 часа у него была открыта консоль браузера, и в ней совершались активные действия.

В рекордный срок - 2 дня - мы полностью переписали логику работы викторины. Варианты ответа больше не являются самостоятельными блоками. Текст автоматически генерируется в картинку (каждую секунду создается 24 картинки на один вопрос, потому что ответы меняются местами), а поверх накладывается полупрозрачная обводка, которая для пользователей выглядит как кнопка. На сервер отправляются не варианты ответов, а координаты клика. Адрес картинки с ответами дополнительно шифруется. Кроме того, была написана максимально подробная система логирования, по которой можно восстановить действия пользователя в спорной ситуации. Оспаривать баллы не пришлось. Но мы получили интересную статистику. Пользователи, занявшие призовые места, проходили викторину 500-600 раз. Один раунд длится 42 секунды. Т.е. это 6-7 часов времени, не считая времени на поиск ответов. Мы были крайне поражены таким упорством.

500 раз и 7 часов потребовалось, чтобы победить в викторине.

«Мы дополнительно отслеживали три ситуации: когда запрос на окончание викторины приходил более, чем на 42 секунды позднее, чем на начало. Когда ответы отсылались не в том порядке, в котором были вопросы. И когда запросов на окончание было больше, чем на начало. Эти данные выводились на специальной странице для админов, чтобы те могли контролировать участников, чьи результаты сомнительны.»Юрий Кабанов — Программист

Селфи-конкурс

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

b_5a66c1be7f7c5.jpg

Встал вопрос, как проще всего получить список ников для дальнейшей печати и нарезки. Вариант открыть Инстаграм и вручную скопировать ники мог превратиться в 3 дня работы, потому что количество участников было непредсказуемо, но однозначно велико. Стали искать автоматизированные пути.

Мы предложили и реализовали следующую логику: Инстаграмм позволяет получать фото по указанному хештегу. За один запрос отдается 20 самых новых снимков. Еще запрос - следующие 20. Все, что получаем, мы сохраняем в базу данных: ник пользователя, ссылку на картинку и т.д. Скрипт запускается каждую минуту и шлет запросы до тех пор, пока не сохранит все вновь выложенные снимки, сверка происходит по тайм-штампу (время добавления поста с точностью до секунды).

Список уникальных пользователей, которые добавили фото до 23:59:59 13 сентября 2015 г., выводится на специальной странице, доступной только админам. Он позволяет посмотреть точное количество участников и быстро открыть снимок любого их них. На еще одной странице все ники группируются в таблицу так, чтобы при печати получались плашки оптимального размера. Организаторам осталось только нарезать их по разметке и положить в лототрон.

«Жаль, что члены команды проекта не могли стать победителями. В селфи-мастерстве мне нет равных!»

Степан Краснов — Веб-дизайнер

Дополнительные возможности

Помимо пользовательских функций мы сделали несколько специальных разделов для администраторов сайта.

b_5a66c239d2cfe.jpg

Например, для розыгрыша призов за отметку на карте мы сформировали страницу со списком всех участников. Это помогло организатором быcтро проверять выпавшие в рандоме номера: узнавать имя/фамилию пользователя и переходить в его профиль в соц. сети для проверки выполнения условий акции.

Поддержка сайта 24/7

После официального запуска 1 августа и до 15 сентября проект перешел к нам на поддержку.

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

За этот период проект разросся практически в 2 раза. Было добавлено несколько крупных блоков: призовой фонд, поиск избирательно участка, фотогалерея #люблюКузбасс и т.д. Доработаны и дополнены пользовательские функции: счетчик пользователей, поп-апы, призывающие вступать в группы в соц. сетях и др.

«Мы работали в бешеном ритме. И в такой ситуации приятно порадовала вовлеченность людей со стороны заказчика. Они не просто предъявляли требования, они вникали во все вопросы, быстро принимали решения, когда те требовались, сами отрабатывали с не меньшей отдачей. Когда чувствуешь, что команде не все равно, сам начинаешь творить чудеса.»Полина Юрьева — Проект-менеджер

Факты о проекте

  • 10 000 человек в среднем посещали сайт за день;
  • 99,99% времени был сайт доступен, несмотря на пиковые нагрузки;
  • 510 часов составили трудозатраты проекта;
  • 93 пункта в задаче «Мелкие правки и доработки».

Команда проекта

  • Менеджер проекта — Полина Юрьева;
  • Дизайн — Алексей Соколов, Степан Краснов;
  • Верстка и программирование — Антон Калугин, Роман Филипов, Юрий Кабанов.

Заказать у нас разработку сайта

Другие наши проекты

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Не пропустите публикацию!
Atwinta
Digital-агентство
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.