Содержание

    38 дней от идеи до релиза. Сделали на субподряде срочный спецпроект для hh.ru

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

    Именно с таким вызовом к нам обратилось агентство Hate Agency, которое занималось проектом «День заботы на работе» для hh.ru (HeadHunter) с участием компаний-партнёров. Коллегам требовался надёжный подрядчик, который возьмёт на себя ключевой этап работы — создание интерактивного лендинга.

    Вводные

    Задача лендинга — рассказать, как компании-партнёры hh.ru заботятся о своих сотрудниках: помогают развиваться, обеспечивают комфорт, борются с выгоранием. Проект, ставший традиционным «Днём заботы на работе», ежегодно привлекает внимание аудитории hh.

    Но был нюанс: до запуска проекта у нас было всего 38 дней. Тщательно проработав и согласовав условия с Hate Agency, мы пошли на нетипичный для себя шаг и договорились, что команда будет работать без выходных (за дополнительную плату, конечно). Поэтому нам требовалось оперативное взаимодействие с клиентом на всех этапах, чтобы быстро решать возникающие вопросы.

    Креатив

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

    • Идея. Hate Agency предложили концепцию интерактивной карты, напоминающей фестиваль Burning Man, где пользователь мог бы исследовать, как разные компании поддерживают сотрудников. Однако, учитывая временные ограничения, мы предложили перейти от сложной изометрии к более простому двухмерному решению. Этот подход сохранил дух оригинальной идеи, но позволил нам сократить сроки разработки.
    • Тексты. Мы разработали вводные тексты для лендинга, которые задавали тон всей кампании. Основной акцент сделали на редактуре текстов, подготовленных партнёрскими компаниями: Сбером, «Черкизово» и другими. Эти материалы касались поддержки сотрудников и борьбы с выгоранием. Мы помогли сделать их более структурированными, доступными и вдохновляющими для пользователей, сохранив индивидуальность каждой компании.
    • Дизайн. Этот этап начался с согласования общего драфта, на основе которого создавались визуальные элементы проекта. Чтобы соответствовать концепции и не перегружать команду, мы распределили работу между несколькими дизайнерами. Это позволило сохранить креативную свежесть и оперативно решать задачи.

    Создавая идею лендинга, мы разделили его на два ключевых элемента:

    1. Страница-анонс. На ней мы разместили обратный отсчёт до запуска кампании, дополненный цитатами из промо hh.ru с проектом «ЭТО ЗНАК» в Москве.

    Страница-анонс для спецпроекта hh.ru

    2. Основная страница. Она представляла собой интерактивную карту в формате двухмерного «города». Здания на карте символизировали партнёров: их реальные офисы или деятельность компании. Это визуальное решение передавало суть кампании и подчёркивало вклад каждого партнёра в благополучие сотрудников.

    Интерактивный лендинг для hh.ru

    Из-за сжатых сроков мы решили использовать нейросети — это позволило протестировать несколько концепций.

    Концпеции для спецпроекта hh.ru

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

    Юрий Гусев

    Юрий Гусев
    тимлид дизайнеров EMAILMATRIX

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

    Кирилл Мосин

    Кирилл Мосин
    старший дизайнер EMAILMATRIX

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

    Вариант дизайна для спецпроекта hh.ru
    Вариант дизайна для спецпроекта hh.ru

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

    Анонс спецпроекта в приложении hh.ru

    Техническая часть

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

    Что касается бэкенда, клиент попросил максимально сократить его использование из-за внутренних ограничений hh.ru. После обсуждений и анализа с командой разработчиков клиента наш технический консультант Антон Чирков предложил эффективное решение.

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

    Антон Чирков

    Антон Чирков
    технический консультант EMAILMATRIX

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

    Результаты

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

    Посмотреть лендинг

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

    Отзыв клиента

    С EMAILMATRIX и Hate Agency мы сделали спецпроект, в котором всё — от визуала до технических решений — должно было работать точно, ярко и вовремя. И команда справилась отлично.

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

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

    Важно отметить, что всё это было сделано в жёсткие сроки — 38 дней от идеи до релиза (такова реальность, да). При этом — минимум правок, максимум понимания и диалога. Мы всё время были на связи, ребята реагировали всегда вовремя и предлагали возможные варианты.

    Работа над спецпроектом «День заботы на работе» — это про погружение и про партнёрство. Спасибо за работу, которая вдохновляет!

    Диана Пенджиева

    Диана Пенджиева
    менеджер маркетинговых проектов hh.ru

    КОМАНДА
    ПРОЕКТА

    Даниил Кияшко
    менеджер проекта
    Аделина Амирзянова
    копирайтер
    Марина Мартынихина
    корректор-редактор
    Юрий Гусев
    дизайнер
    Кирилл Мосин
    дизайнер
    Анна Михайлова
    разработчик
    Антон Чирков
    технический консультант

    Нужен спецпроект?

    Сделаем под ключ или поможем на конкретных этапах — давайте обсудим!
    Имя
    Корпоративный email *
    Array
    (
        [0] => WP_Term Object
            (
                [term_id] => 1475
                [name] => Кейсы
                [slug] => cases
                [term_group] => 0
                [term_taxonomy_id] => 1957
                [taxonomy] => category
                [description] => 
                [parent] => 1425
                [count] => 68
                [filter] => raw
                [cat_ID] => 1475
                [category_count] => 68
                [category_description] => 
                [cat_name] => Кейсы
                [category_nicename] => cases
                [category_parent] => 1425
            )
    
    )
    
    Поделиться кейсом
    Подписаться на рассылку