Ozon — один из ведущих маркетплейсов на российском рынке. Там активно размещают товары известные бренды, владельцы малого, среднего и крупного бизнеса.
2020 год был непростым для российского бизнеса: пандемия, кризис, большая нагрузка и неопределенность.
Перед нами стояла задача: подготовить новогодний спецпроект, который поможет объединить комьюнити продавцов Ozon, признать их достижения за прошедший год и поблагодарить за вклад в развитие площадки.
Клиент пришёл с идеей сделать яркий, праздничный лендинг с вовлекающей механикой «Тайный Санта». Это популярная новогодняя традиция, когда каждый участник дарит и получает рандомный подарок. Она отлично работает на объединение и сплочение коллектива.
Нам понравилась идея и мы ушли её дорабатывать:
Так, мы сформировали механику спецпроекта:
Пожелание можно написать самостоятельно или кастомизировать с помощью выпадающих списков. А полученной открыткой можно поделиться в соцсетях и публично поблагодарить своего Санту.
За отправку открытки случайному коллеге Ozon дарит 1000 рекламных бонусов на счёт — присылает на почту персональный промокод. А ещё продавец автоматически становится участником большого розыгрыша призов: VR очки, дрон и камера GoPro.
Мы стали знакомиться со стилем Ozon. Ярко-розовый луч в логотипе напомнил нам свет из летающей тарелки. Мы предложили клиенту поместить действие игры в космос. Клиенту понравилась эта идея, и мы ушли её прорабатывать.
Фирменные акцентные цвета Ozon — розовый и голубой. Мы взяли их за основу, а в качестве вспомогательных добавили бирюзовый, фиолетовый, синий и охровый.
По экранам разбросали подарки, угощения и звёзды, добавили очертания планет и млечного пути.
Разработали паттерн для перебивок экранов — вдохновлялись праздничной упаковкой подарков.
Мы сразу делали сайт с адаптивной вёрсткой, чтобы он хорошо отображался на разных устройствах.
На первых этапах концепции было три персонажа-помощника, и пользователь мог выбрать — с кем он хочет собирать открытку.
Три персонажа, значит три характера. Телевизор изначально разговаривал цитатами из советских новогодних фильмов. Флегматичный эльф-пришелец давал мудрые наставления на будущее. А звёздочка-гадалка предсказывала, насколько ретроградным будет 2021 год.
В итоге мы отказались от Эльфа и Звёздочки — они усложняли процесс создания открытки. Но мы их помним и любим.
Телевизор получил главную роль и стал неотъемлемой частью навигации и интерфейса. Он встречает пользователя на главной странице и ассистирует на всех этапах, являясь в разных образах.
Для лендинга мы написали джингл, чтобы полностью погрузить пользователя в новогоднюю и космическую атмосферу. Его настроение сформулировали как «новогодний вечер у камина под звездным небом».
Нам было важно передать тепло и ощущение праздника. За вдохновением обратились к хитам известных исполнителей:
Джингл создали в DAW-программе Cubase. Использовали инструментальные библиотеки для Kontakt 5, позволяющие добиться реалистичного звучания музыкальных инструментов.
Это основное место действия. Именно в мастерскую продавец попадает, когда рандомайзер определяет, кому из коллег он пишет пожелание.
Есть четыре темы оформления открытки: синяя, бирюзовая, фиолетовая и розовая. Продавец выбирает на свой вкус.
Ловким кликом меняются образы Телевизора-помощника. В них продавец без труда узнаёт себя: вот он радуется продажам, вот следит за погрузкой подарков, а вот производит подсчёт.
Третья составляющая кастомизации — написание пожелания коллеге. Это можно сделать самостоятельно или использовать шаблон. В первом случае продавец сочиняет свой текст, во втором — заполняет пробелы в статичной рыбе текста, выбирая готовые формулировки из выпадающего списка.
На копирайтинг открыток делали большую ставку. Хотелось, чтобы было свежо, просто, инфостильно, остроумно, разговорно. С отсылками к актуальной повестке и поп-культуре, но без забористых заигрываний.
Для стека мы выбрали PHP-фреймворк Laravel, а на стороне пользователя — React.js. В итоге получили настроенную из коробки авторизацию, гибкую архитектуру и быструю работу с базой данных PostgreSQL.
Laravel подходил из-за требований по безопасности: сайт должен защищено хранить данные корпоративных пользователей, зарегистрированных на платформе Ozon. Также были задачи по сбору статистики и работе с динамическим фронтом.
Еще одна причина выбора Laravel — современный интерфейс, построенный на архитектуре SPA (Single Page Application). Это означает, что при действиях пользователя на странице обновляется именно верстка блоков, а не сама страница целиком.
Финальный аргумент выбора Laravel: сжатые сроки реализации проекта. Бекэнд на CMS (например, Bitrix24 или Word Press) предполагает более долгую разработку и не дает нужной гибкости.
Победителей выбирали с помощью рандомайзера в прямом эфире на Facebook. Почувствуйте себя Тайным Сантой — пройдите весь путь продавца Ozon на нашей dev-среде и создайте свою новогоднюю открытку.
А вот некоторые пожелания, которые продавцы писали своим коллегам: