Привет. Меня зовут Степа, я продуктовый дизайнер в Контур.Экстерне. Экстерн — это сервис, в котором бухгалтеры сдают отчетность в контролирующие органы и ведут учет деятельности организации.
В ноябре бухгалтеры отмечают свой профессиональный праздник. В качестве поздравления мы хотели сделать для них игру: несколько дней на страницах сервиса мы должны были прятать стикеры и за нахождение давать подарки.
Я решил, что в этой задаче стоит поработать с анимациями, чтобы вызвать у пользователей больше эмоций и вовлечь их в игру. Мы сделали кучу классных анимаций, но за день до релиза нам пришлось отказаться от них. В этой статье я расскажу, как мы делали игру, и что у нас пошло не так.
Концепция поздравления
День бухгалтера пересекается с Черной пятницей. Мы хотели объединить эти два события и устроить пользователям неделю активностей.
При этом у нас были цели, которые мы хотели закрыть:
Повысить лояльность пользователей.
Привлечь новую аудиторию.
Заработать на продаже модификаторов (или услуг).
Познакомить пользователей с разделами сервиса, которые редко посещают.
Мы обсудили варианты реализации с маркетологами. Среди всех идей больше всего понравились две:
Цветок в горшке. У многих на рабочем месте встречается комнатное растение. Мы хотели поселить такое растение в сервис и предложить пользователю заботиться о нем примерно, как в тамагочи.
2. Загадочный помощник вроде скрепки в Ворде. Каждый день он должен выдавать пользователю задания, знакомить его с сервисом и с командой разработки.
Вариант с цветком многим откликнулся, поэтому мы остановились на нем.
Затем мы прописали игровую механику:
С понедельника по четверг по разделам сервиса спрятаны предметы для ухода за цветком: например, лейка. В начале дня цветок вянет и просит полить его. Пользователь находит в сервисе лейку, поливает цветок, он выздоравливает, а пользователь получает подарки и билеты для розыгрыша суперприза.
В пятницу, 22 ноября, цветок распускается, поздравляет пользователя с праздником и предлагает подключиться на розыгрыш суперприза, который должен был состояться в нашем телеграм-канале.
Во время обсуждения механики я представил в голове, как цветок по мультяшному грустит или, наоборот, радуется при поливе. Тогда еще больше загорелся идеей, что цветок должен быть анимированным. Сразу после встречи я открыл Pinterest, чтобы посмотреть как другие дизайнеры и мультипликаторы оживляют растения.
Выбор способа анимации
Мы обсудили с фронтендерами как лучше анимировать цветок. У нас было три варианта:
Нарисовать GIF. Этот вариант просто реализовать дизайнеру без помощи разработчика, а разработчику легко встроить файл в сервис. Минус — GIF-файлы могут много весить и долго подгружаться. Чтобы этого избежать, можно их сжать, но тогда пострадает качество и все будет в пикселях.
SVG анимации. В этом варианте нужно выгрузить векторное изображение в текстовый редактор и анимировать с помощью CSS. Готовый код разработчик легко разместит на страничке в сервисе. Минус — если дизайнер раньше никогда не дизайнил кодом, понадобится время, чтобы разобраться.
Подключение JavaScript-библиотеки GSAP. Здесь также потребуется выгрузить векторное изображение и анимировать кодом. Минусы — понадобится время на изучение инструмента, если раньше с ним не сталкивались. А еще нужно подключать внешнюю библиотеку в свой продукт, а это не всегда удобно поддерживать.
Сразу скажу, у нас уже был небольшой опыт встраивания SVG анимаций в сервис, поэтому мы выбрали их.
С чего начали работу
За 3-4 недели нужно было много всего нарисовать: несколько состояний цветка плюс анимировать каждое, страницу с акцией в сервисе, лендинг для привлечения внешней аудитории, кучу визуалов для телеграм-канала и рассылок.
У нас была команда из двух коммуникационных и двух продуктовых дизайнеров. Нам стало интересно, как мы можем распараллелить нашу работу. В итоге мы разбили ее на три этапа:
Поиски стиля будущего цветка
Стиль, в котором мы рисуем иллюстрации в сервисах, не подразумевает детализацию. С его помощью было бы сложно сделать цветок выразительным.
Мы решили отойти от этого стиля и начали собирать референсы.
Через некоторое время наш выбор пал на 3D. Каждый день цветок может быть больным и здоровым. Мы отрисовали больное состояние для первого дня и показали команде. Не все поняли, что цветок болеет, потому что он был характерного для суккулентов темно-зеленого цвета.
Тогда мы решили добавить для каждого больного состояния тучку — мол, не здоровится, укачивает.
Затем за несколько дней мы отрисовали остальные состояния в Фигме.
И подготовили предметы, которые пользователь будет искать в сервисе:
Пересадка растения из Фигмы в сервис
Цветок — главный персонаж акции, поэтому ему было положено больше всего места на странице. Кроме того, он должен расти, поэтому его стоило разместить так, чтобы со временем он не перекрыл важную информацию.
Помимо цветка на странице нужно было разместить правила игры, задание, полученные призы и билеты для участия в розыгрыше.
Самое сложное было не перемудрить. Полученные подарки должны располагаться рядом с заданием или нет? А нужен ли таймер обратного отсчета до начала розыгрыша? Как больной цветок превратится в здоровый? Эти и другие вопросы не давали нам покоя.
После нескольких дней поиска мы определились с композицией:
А так цветок должен был вырасти на странице в течение недели:
В какой-то момент у нас возникла идея добавить цветку имя. Мы хотели, чтобы пользователи задавали его сами. В процессе мы поняли, что не успеем это реализовать, поэтому попросили копирайтеров придумать несколько имен связанных с работой бухгалтера. И это имя пользователям выпадало рандомно.
Еще нам было интересно, сколько баллов начислять пользователю за нахождение предмета. Напомню, что баллы дают шанс выиграть суперприз. Сначала мы хотели начислять столько баллов, сколько дней длится акция: в 1 день — 1 балл, во 2 день — 2 балла и так далее.
Представьте себя на месте бухгалтера. Вы заходите в сервис, видите задание, тратите 10-15 минут на поиски предмета и получаете за это 1 балл. Несправедливая награда, не так ли? При этом было бы чересчур щедро давать за выполнение такого задания 100 или 200 баллов.
В итоге мы выбрали среднее: в 1 день — 10 баллов, во 2 день — 20 баллов и так далее.
Как оживляли растения
Оживлять растения мы хотели с помощью CSS в Sublime Text. Но перед этим нужно было сделать подготовительную работу.
Сначала мы разместили все растения в Фигме во фрейме одного размера так, чтобы горшок был «прибит» к одной точке.
Затем сгруппировали каждый элемент цветка: листочки, стебли и горшок — все отдельно. Каждой группе задали понятное название на английском языке.
После этого каждый цветок выгрузили из Фигмы в SVG и разместили в отдельной папке.
Затем мы открыли SVG файл в Sublime Text, скопировали кода цветка и вставили его в пустую html-страничку. Код одного из состояний:
Как при этом выглядела анимация:
Всего получилось больше 10 анимаций цветка и 5 анимаций предметов, которые пользователь должен найти.
Что пошло не так
Еще на старте мы договорились с фронтендерами, что разобьем задачу на 2 релиза: в первом выпустим страницу с акцией и статичным цветком в сервисе, во втором — все анимации. Времени на задачу было мало, поэтому мы допускали, что анимаций не будет совсем.
Первая анимация на моем компьютере в браузере воспроизводилась отлично, и по ее образу мы отрисовали все остальные.
Работа над первым релизом затянулась, поэтому на релиз анимаций остался всего один рабочий день. И в этот день фронтендер утром написал, что встроил анимации в сервис, и сервис начал зависать.
Я расстроился. Ну как же, неужели мы зря несколько дней кодили эти анимации. Я был уверен, что с ними не возникнет никаких проблем, поэтому даже не подумал о том, чтобы показать самый первый файл фронтендеру. А проблема заключалась в строении цветка. Он состоял из огромного количества слоев, с размытиями и прозрачностью, и браузеру было сложно его воспроизводить.
А если убрать все фильтры, цветок получался не такой красивый.
Что тогда? Мы прикидываем, что у нас есть еще несколько часов, и пробуем сделать четыре GIF превращения цветка из больного в здоровое. Мы и раньше вставляли GIF в сервис, поэтому они должны были нормально запуститься.
GIF мы делали в приложении Rive. Сразу их протестировали — проблем не возникло. Так выглядел проект:
А все, что мы накодили, ушло в стол.
Что в итоге
Увы, у нас не получилось все, что мы запланировали. Это мне напомнило простую мысль, что надо вовремя обсуждать и показывать свои решения. Нельзя быть уверенным во всем на 100%.
Несмотря на это, я понимаю, это был крутой опыт. Мы в краткие сроки сделали большую задачу с кучей неизвестных, классно выстроили взаимодействие между коммуникационными и продуктовыми дизайнерами, и практиковали анимации двумя инструментами. Теперь мы лучше понимаем технические ограничения и в следующий раз сделаем что-то еще круче.
Пользователям понравилась наша активность. Если говорить про цифры, в нашей акции поучаствовало больше 25 тысяч уникальных посетителей. Количество подписчиков в телеграм-канале увеличилось на 3 тысячи.
Некоторые пользователи так увлеклись поиском предметов, что не могли работать. Нам показалось это мило.
