Кейсы АЭРО

Бизнес с каждым днем проявлял потребность в грамотном управлении данными. Регулярно требовалось создать отчет или выгрузить базу SQL. Мы решили починить это несовершенство и создать внятную, доступную и гибкую платформу управления данными.

«Ключевой задачей АЭРО в рамках проекта с Кофеманией было стать драйвером изменений. Помочь компании сделать первый шаг в построении data-культуры. Такие проекты делаются по выработанной методологии, которая включает 3 основных этапа: выявление бизнес-ценности, определение технологий и процесса вокруг данных, который необходимо реализовать в компании», – Вячеслав Жуков, Chief Data Officer АЭРО.

Культовый бренд кед «Два Мяча», возрожденный в 2016 году, представил новый интернет-магазин, специально для которого был разработан digital-брендинг. За обновление бренда в цифровых коммуникациях, дизайн и разработку интернет-магазина отвечало креативное агентство Fantastic Works (part of АЭРО).

Марка, производящая кеды по той же технологии, что и 50 лет назад, обратилась к Fantastic Works с желанием полностью обновить сайт. Команда агентства совместно с клиентом определили точки опоры и то, что казалось важным при редизайне. Глобальной задачей было отразить через все слои дизайна нарратив бренда от богатого прошлого к новому позиционированию и предстоящим коллекциям.

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

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

В новом digital-брендинге все элементы от цветов и графики до логотипа гармонируют между собой. Как основной цвет был выбран синий («мирное небо»), а красный («мамина помада»), бежевый («крем-брюле») и чёрный — дополнительными. Эта цветовая палитра встречается в классических моделях кед. Логотип бренда для цифровой среды стал более простым и функциональным, в полном и сокращенном варианте. Первый в целом уравновешивает дизайн, а второй, два мяча в виде двух окружностей, — понятная метафора, которая органично вписывается в навигацию, и наглядно иллюстрирует название бренда.

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

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

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

Новый сайт, созданный в партнерстве бренда «Два Мяча» и Fantastic Works (part of АЭРО), отражает новую айдентику и одновременно с этим сохраняет свое наследие, оставаясь вне времени и тенденций. Два Мяча — одна любовь!

Ключевая проблема компании Четыре лапы, с которой они обратились в АЭРО, заключалась в безудержном росте доли рекламных расходов (DRR). Этот показатель отражает то, насколько люди искренне лояльны к бренду, уходят ли они после покупки и возвращаются ли, чтобы сделать новую.

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

Нашей задачей было создать такой интернет-магазин, который мог бы конкурировать с маркетплейсами по ценам, удобству, ассортименту, скорости доставки.

Мы провели исследование среди владельцев домашних животных и спросили их, почему они решили завести питомцев. Ответ на этот вопрос – ради эмоций! Они и легли в основу концепции нового интернет-магазины Четырех лап.

Разработали единую цифровую платформу группы компаний «Просвещение», где объединили корпоративный и пользовательский сайты, обеспечили удобную навигацию и продумали пользовательский опыт для четырех разных аудиторий.

ГК «Просвещение» — ведущий российский холдинг в сфере образования, досуга и развития, с 1930 года на рынке. Реализует комплексные образовательные проекты: издание печатного и цифрового контента, обучение детей и взрослых, повышение квалификации педагогов, оснащение всех типов образовательных организаций.

В России каждый взрослый учился, а каждый школьник сегодня учится по учебникам «Просвещения». Но это не единственное направление деятельности компании — сегодня «Просвещение» не только известное издательство учебной литературы, но и создатель цифровых образовательных сервисов, размещённых на образовательной платформе LECTA, разработчик игр и игрушек, а также организатор социально-образовательных и просветительских проектов для учёбы и развития — от дошкольного образования и школы, до методической поддержки педагогов. Помимо этого, в 2023 году онлайн-проекты «Родительский университет» и «Учитель.Club» получили почетные награды в сфере образования.

Нам предстояло объединить их на одном ресурсе, чтобы представить «Просвещение» как полноценную цифровую экосистему и рассказать пользователям обо всех её возможностях.

Задача — создать единую цифровую платформу

Изначально сервисы «Просвещения» существовали на отдельных сайтах и не были связаны друг с другом. Некоторые создавалась много лет назад и требовали модернизации. Вопрос переработки всей цифровой инфраструктуры назревал давно, и в 2023 году компания обратилась к АЭРО с целью создания объединённой информационной среды и единого «окна» доступа для коммуникации всех целевых аудиторий группы компаний, представления полного перечня продуктов и сервисов ГК «Просвещение», для того чтобы обеспечить: 

• реализацию стратегии маркетинга и продаж: привлечение и возврат клиентов,

• оптимизация каналов коммуникаций, формирование единой клиентской базы;

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

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

В рамках этой задачи АЭРО требовалось создать корпоративную и пользовательскую части платформы.

Корпоративный сайт

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

Для этого следовало уделить большое внимание дизайну и разработчики «Просвещения» комбинировали разные оттенки синего и зеленого цветов, тщательно прорабатывали шрифты и графические элементы. В итоге в ходе командной работы мы получили по-настоящему монументальный образ бренда.

Здесь же была интегрирована CMS для работы с платформой — её используют сотрудники, ответственные за наполнение страниц контентом.

Пользовательский сайт

Пользовательская часть сайта состоит из двух частей — контуров — объединяющих взаимодействие всех клиентов «Просвещения» на один мультисервис.

Внешний контур — это основное цифровое пространство с единой точкой входа во все сервисы. На главной странице пользователь может выбрать свою роль: родитель, педагог, ученик или образовательная организация. И далее посмотреть, что полезного может предложить ему «Просвещение». Например, ученики найдут на сайте не только учебные материалы, но ещё смогут узнать о разных профессиях, подготовиться к ЕГЭ или послушать онлайн-лекции по искусству.

Из внешнего контура пользователь может легко попасть в e-commerce часть сайта (внутренний контур) — единый каталог с печатной продукцией, электронными учебниками, цифровыми сервисами (такие как «Начинайзер», «К школе готов» и т.п.), а также бесплатными материалами (аудиоприложениями, методическими пособиями и пр.).

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

Навигация по большому числу сервисов

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

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

Из-за такой супернавигации нам пришлось искать, где разместить остальные элементы, в частности кнопку каталога и бургер-меню. Поскольку боковое меню заняло привычное место кнопки каталога (справа от поисковой строки), мы решили сделать её слева — получилось немного нетипично, но всё равно рядом с поиском. Бургер-меню расположили под поисковой строкой.

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

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

1. Предусмотрели все возможные паттерны поиска. Клиенты «Просвещения» ищут образовательную продукцию по-разному: кто-то — в каталоге, кто-то — через поисковую строку, кто-то использует оба инструмента. Мы постарались сделать удобный поиск сразу для всех — много точек входа в каталог, скроллинг товаров, фильтры, сортировка, рекомендации. Неважно, как человек привык искать товар — он может это сделать из любой точки сайта и удобным ему способом.

2. Выделили характеристики товаров, важные конкретным пользователям. Учителя и родители выбирают учебники по разным критериям. Например, первые обращают внимание на содержание, книжный номер ISBN, соответствует ли учебник ФГОС и входит ли он в ФПУ. Такие характеристики мы для удобства выносили на первый экран.

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

Технологии

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

IT-ландшафт ГК «Просвещение» построен на сервис-ориентированной архитектуре (SOA) и микросервисах. Backend разработан на PHP и Symphony, frontend — на vue.js, React и Next.js

Инфраструктура работает на основе сервисов Яндекс.Облако и описана в Terraform, процесс CI/CD построен через Gitlab. Для хранения данных используется кластерная управляемая база данных PostgreSQL. Для мониторинга — Яндекс.Мониторинг, Prometheus и Grafana.

Результаты

Для оперативности мы сначала запускали MVP с базовой функциональностью, а потом дорабатывали. В результате нам удалось создать объёмную цифровую платформу, которая объединяет все продукты и сервисы ГК «Просвещение», даёт её клиентам полное представление обо всех возможностях холдинга, а также обеспечивает удобный доступ в e-commerce часть.

По итогам работ заметно вырос трафик на сайт. Число уникальных посетителей увеличилось почти в 2 раза, по сравнению с 2022 годом. При этом количество прямых заходов стало больше в 2,8 раз, что свидетельствует о росте узнаваемости нового бренда «Просвещения».

Новый сайт Burger King как часть глобального культурного кода в электронной коммерции

Рассказываем, как команда АЭРО поддерживает крупнейшего фуд-ритейлера в цифровых активностях.

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

Старый сайт не был приспособлен для продаж: по сути, это была витрина с меню и обратной связью для пользователей. Иногда Burger King тестировал возможность оплаты через клон мобильного приложения, но полноценного рабочего решения не было. Конверсия была очень низкой. Бургеры заказывали только в мобильном приложении или на фуд-агрегаторах.

«Команда АЭРО обновила сайт российского Burger King в 2020 году, с февраля 2021 года он стал доступен пользователям. На сайте появился интернет-магазин и усовершенствованная корпоративная часть. Масштабные изменения помогли Burger King создать новый канал продаж, отстроиться от агрегаторов и увеличить количество лояльных клиентов в мобильном приложении благодаря лидогенерации через сайт. Рост заказов и средняя конверсия увеличились на 30%, выручка Burger King возросла на 16,6%», – Иван Рябков, Project Manager.

Перед нами стояли три главные задачи:

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

• Перенести инфраструктуру на более современный стек и ускорить работу сайта.

• Усовершенствовать корпоративную часть, где клиенты могут оставить обратную связь, а соискатели — откликнуться на вакансии.

Как это было

Объединенная команда АЭРО и Burger King начала работу над проектом осенью 2020 года. В общей сложности над ним работает более 50 человек.

У нас два режима работы над проектом: спринтерский и выжидательный. Одни задачи требуют немедленного решения, другие — вдумчивой аналитики. На Burger King мы можем сначала очень долго изучать «Вебвизор» и разбираться, почему клиент не совершает покупку, а потом, поняв причину, писать код на сверхмощностях.

Продажи и имидж: два этапа проекта

В 2021 году компания Burger King провела первый полноценный ребрендинг за более чем 20 лет существования сети. Нововведения затрагивают все точки взаимодействия бренда с посетителями: фирменный стиль, сайт, рекламную стратегию и многое другое.

«Мы хотели сделать новый сайт удобным для миллионов клиентов и стали изучать зарубежные сайты Burger King, чтобы на фоне культурных различий найти и общие UX-паттерны. Выяснилось, что единой стилистики компания не придерживается: в малайзийских ресторанах для рекламы используют очень много эмодзи, в русской рекламе основной акцент делают на яркие провокационные формулировки, например «Похоже на какое-то наедалово», – Алексей Филимонов, Project manager.

Интернет-магазин

Проектируем корзину

До релиза нового сайта у нас не было аналитических данных, на которые можно было бы опереться при проектировании пользовательского опыта. Сразу после релиза мы подключили Google Analytics, Яндекс.Метрику, сделали расширенные настройки и разметили сайт. Выяснилось, что самый распространенный пользовательский сценарий — это выбор комбо и купона, то есть покупка набора со скидкой. При этом путь состоит из выбора множества блюд и ингредиентов: добавить хрустящий лук, убрать сыр чеддер, выбрать гарнир с подходящим соусом и так далее.

Комбо — аналог бизнес-ланча в ресторанах. В него входят: бургер, гарнир, крылышки, напиток и многое другое, — в каждом наборе может быть от двух до 25 позиций. А купоны дают большую скидку на комбо: например, набор за 389,97 рублей с купоном можно купить всего за 299,99 рублей.

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

Комбо помогает облегчить жизнь пользователю и упростить UX: не нужно заходить в разделы «Напитки», «Гарниры» или «Соусы» — заказ оформляется на одном экране. Для клиента это способ быстрее собрать корзину, а для бизнеса — повысить сумму среднего чека.

Основываясь на данных аналитики, мы оптимизировали этот процесс и сделали его максимально простым и бесшовным для всех устройств — от небольших планшетов до стационарных компьютеров с диагональю экрана 35”.

Разработка и проектирование онлайн-покупок для Burger King очень отличается от продуктового ритейла, которые мы делали раньше — «Утконос», Metro, «Глобус», «Ароматный мир» и других. В классическом ритейле в «Корзине» обычно более 50 товаров и у каждого покупателя свой уникальный состав продуктов — например, пять упаковок чипсов, три бутылки Pepsi, шесть сырных соусов. В ресторанах сети Burger King выбирают сразу наборами: например, один комбо — это два Pepsi, два воппера, одна картошка и наггетсы, причем каждую позицию можно изменить, поменяв картошку на луковые колечки, или дополнить, добавив сырную начинку в воппер. В ресторанах сети Burger King меню и состав комбо отличается в зависимости от города, района и способа доставки. То есть комбо, заказанное в Саратове, и комбо, заказанное в Шереметьеве, будут разными, – Алексей Филимонов, Project manager.

Наша команда интегрировалась с бэкендом мобильного приложения и кассовыми системами 750 ресторанов. Это позволило аккумулировать информацию из всех точек продаж компании в реальном времени, транслировать объединенный продуктовый каталог с актуальным меню, ценами, промоакциями в зависимости от местоположения покупателя. А кроме того, интеграции реализуют взаимодействие кассовых систем конкретного Burger King с приложением покупателя. Другими словами, если пользователь будет делать заказ из Burger King на Краснопресненской, в его выдачу на сайте попадет только то, что есть в наличии именно в этом ресторане.

«Есть стандартная воронка продаж, когда рекламу размещают на каком-нибудь ресурсе и потом через сайт проверяют, как она отрабатывает. Но наш целевой сценарий гораздо шире: мы направляем пользователя по тому предложению, которое его заинтересовало. То есть человек увидит рекламу с «Окрыляющим комбо», перейдет по QR-коду на сайт — и ему предложат установить мобильное приложение. После установки у него автоматически откроется экран с той же «окрыляющей» акцией, где он сможет в 2–3 шага сделать заказ. Это — ключевая и самая длинная цепочка, над которой мы сейчас работаем», – Иван Рябков, Project manager.

Короны за еду: разрабатываем раздел программы лояльности

В Burger King действует бонусная программа KING CLUB, в которой пользователи получают баллы — короны — за любые заказы. Короны можно обменять на любую продукцию ресторанов сети — от наггетсов и кофе до сытных комбо с премиальными бургерами.

Раздел «О компании»

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

Команда — огонь: делаем раздел с вакансиями

На старом сайте Burger King была единая форма для откликов соискателей: все заявки приходили на одну почту и отдел кадров распределял их по 750 ресторанам по всей России. Каждый день в компанию приходит около тысячи обращений.

На новом сайте мы сделали страницы-клоны — отдельные версии страниц с вакансиями для каждого ресторана. Так, если соискатель увидел в Воронеже объявление о работе в Burger King на ул. 20-летия Октября, он отсканирует QR-код, заполнит анкету на вакансию, и его заявка попадет в тот самый ресторан, где он увидел объявление.

Админка для людей

На старом сайте все изменения вносили программисты. В обновленном burgerking.ru мы сделали разные уровни доступа для разных ролей пользователей: маркетологи заполняют только разделы акций и спецпредложений, пресс-секретари — пишут новости компании. Чтобы маркетологи могли сами работать в админке, не привлекая программистов, мы разработали конструкторы шаблонных страниц и визуальный редактор для текстового контента.

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

Тестирование бургерами

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

«Оплата была только боевая, и нам постоянно нужно было проверять, как она работает. В 23:00 мы «гасили» основной сайт, включали новый, запускали боевую оплату и делали заказы с 23:00 до 02:00 в круглосуточных ресторанах сети. Через пару недель мы заметили, что некоторые члены команды поправились на 5 кг, и стали заказывать только пакеты и влажные салфетки. Иногда нам даже перезванивали из ресторанов и уточняли, ничего ли мы не забыли добавить в заказ», – Иван Рябков, Project manager.

Аналитика после релиза

В Burger King отметили, что после обновления сайта выросли конверсия, трафик и средний чек, однако вместе с ними процент отмененных заказов существенно вырос, и это было очень странно.

Большинство пользователей «отваливались» на странице оплаты банка эквайера. Аналитики предположили, что это связано с укороченным пользовательским путем, и мы пошли проверять гипотезу.

«Мы организовали штаб прозвона и всю неделю звонили респондентам, выясняя, почему они не стали ничего покупать. Оказалось, что большинству не хватило экрана, где они могли бы увидеть список товаров в заказе и адрес доставки. Многие возвращались в корзину, чтобы проверить свой заказ или изменить адрес. Из-за того, что у Burger King цены могут отличаться в зависимости от ресторана, заказ отменялся и пересобирался заново», – Алексей Филимонов, Project manager.

После многочисленных звонков с выяснениями мы добавили промежуточный этап со списком заказа и запустили A/B-тестирование: половине пользователей показывали список, другой — нет. Оказалось, что та часть пользователей, которая видела поп-ап чекаута, отменяла заказы на 30% реже, поэтому мы добавили этот промежуточный этап всем посетителям сайта.

Итог

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

Конверсия выросла на 30%, и это всего за 2 месяца с начала работы. Вместе с командой Burger King планируем повышать экспертизу для всего рынка омниканальности и задавать тренды фуд-ритейла.

Международная компания Shell производит моторные масла с использованием передовых технологий. Они защищают двигатель и продлевают срок его службы.

Так компания заботится об автомобилях своих клиентов.

А мы, команда АЭРО, уже позаботились о том, чтобы купить моторное масло Shell было легко и просто.