Технологический стек
Laravel
React
БД PostgreSQL

Клиент и задача

Скопировано

Ozon — один из ведущих маркетплейсов на российском рынке. Там активно размещают товары известные бренды, владельцы малого, среднего и крупного бизнеса.

2020 год был непростым для российского бизнеса: пандемия, кризис, большая нагрузка и неопределенность.

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

Идея и механика

Скопировано

Клиент пришёл с идеей сделать яркий, праздничный лендинг с вовлекающей механикой «Тайный Санта». Это популярная новогодняя традиция, когда каждый участник дарит и получает рандомный подарок. Она отлично работает на объединение и сплочение коллектива.

Нам понравилась идея и мы ушли её дорабатывать:

  • Подарком, который продавцы дарят друг другу, стала новогодняя открытка с пожеланием;
  • Санта перестал быть тайным. Благодаря этому условию продавцы знают, от кого пришла открытка, и могут почувствовать себя частью большого комьюнити партнёров Ozon;
  • Дополнительно проводится большой розыгрыш подарков среди участников, которые поделились открыткой.

Так, мы сформировали механику спецпроекта:

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

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

За отправку открытки случайному коллеге Ozon дарит 1000 рекламных бонусов на счёт присылает на почту персональный промокод. А ещё продавец автоматически становится участником большого розыгрыша призов: VR очки, дрон и камера GoPro.

Визуальная концепция

Скопировано

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

Цвета и оформление

Скопировано

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

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

Разработали паттерн для перебивок экранов — вдохновлялись праздничной упаковкой подарков.

Адаптивы

Скопировано

Мы сразу делали сайт с адаптивной вёрсткой, чтобы он хорошо отображался на разных устройствах.

Персонажи

Скопировано

На первых этапах концепции было три персонажа-помощника, и пользователь мог выбрать — с кем он хочет собирать открытку.

Три персонажа, значит три характера. Телевизор изначально разговаривал цитатами из советских новогодних фильмов. Флегматичный эльф-пришелец давал мудрые наставления на будущее. А звёздочка-гадалка предсказывала, насколько ретроградным будет 2021 год.

В итоге мы отказались от Эльфа и Звёздочки — они усложняли процесс создания открытки. Но мы их помним и любим.

Телевизор получил главную роль и стал неотъемлемой частью навигации и интерфейса. Он встречает пользователя на главной странице и ассистирует на всех этапах, являясь в разных образах.

Аудиосопровождение

Скопировано

Для лендинга мы написали джингл, чтобы полностью погрузить пользователя в новогоднюю и космическую атмосферу. Его настроение сформулировали как «новогодний вечер у камина под звездным небом».

Нам было важно передать тепло и ощущение праздника. За вдохновением обратились к хитам известных исполнителей:

  • Wham! — Last Christmas
  • Chris Rea — Driving Home for Christmas
  • Space — Just Blue
  • Эдуард Артемьев — Поход (из к/ф «Сибириада»)

Джингл создали в DAW-программе Cubase. Использовали инструментальные библиотеки для Kontakt 5, позволяющие добиться реалистичного звучания музыкальных инструментов.

«Мастерская поздравлений»

Скопировано

Это основное место действия. Именно в мастерскую продавец попадает, когда рандомайзер определяет, кому из коллег он пишет пожелание.

Есть четыре темы оформления открытки: синяя, бирюзовая, фиолетовая и розовая. Продавец выбирает на свой вкус.

Ловким кликом меняются образы Телевизора-помощника. В них продавец без труда узнаёт себя: вот он радуется продажам, вот следит за погрузкой подарков, а вот производит подсчёт.

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

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

Разработка

Скопировано

Для стека мы выбрали PHP-фреймворк Laravel, а на стороне пользователя — React.js. В итоге получили настроенную из коробки авторизацию, гибкую архитектуру и быструю работу с базой данных PostgreSQL.

Laravel подходил из-за требований по безопасности: сайт должен защищено хранить данные корпоративных пользователей, зарегистрированных на платформе Ozon. Также были задачи по сбору статистики и работе с динамическим фронтом.

Еще одна причина выбора Laravel — современный интерфейс, построенный на архитектуре SPA (Single Page Application). Это означает, что при действиях пользователя на странице обновляется именно верстка блоков, а не сама страница целиком.

Финальный аргумент выбора Laravel: сжатые сроки реализации проекта. Бекэнд на CMS (например, Bitrix24 или Word Press) предполагает более долгую разработку и не дает нужной гибкости.

Результаты

Скопировано
В розыгрыше подарков поучаствовало
2569
чел.

Победителей выбирали с помощью рандомайзера в прямом эфире на Facebook. Почувствуйте себя Тайным Сантой — пройдите весь путь продавца Ozon на нашей dev-среде и создайте свою новогоднюю открытку.

А вот некоторые пожелания, которые продавцы писали своим коллегам:

Над проектом работали

Концепция
Аша Саакян
Анастасия Евдокимова
Елена Влахова
Прототипы и дизайн
Аша Саакян
Анастасия Евдокимова
Продюсер
Сеня Синица
Копирайтинг
Анна Худякова
Куратор
Катя Руденко
Аудиосопровождение
Павел Сухих
Аккаунт-менеджер
Наталья Савинцева
Разработка
Сергей Успенский
Руслан Дзюбанов
Игорь Вересов
Сборка и PR кейса
Елена Влахова
Анна Гордейчук
Давуд Сафаров
Екатерина Бурцева
Дмитрий Румянцев
Команда Ozon
Анна Смирнова
Игорь Каменский
Оставьте заявку,
чтобы обсудить проект
Ваши контакты
О проекте
  1. Из какой вы компании, чем она занимается?
  2. С чем мы можем помочь? Как представляете результат?
  3. На какой срок работы и бюджет рассчитываете?
  4. Напишите, если удобнее общаться в мессенджере.
Нажав на кнопку, соглашаюсь на обработку персональных данных
Загрузка