«Яндекс.Касса» представила новый сайт и логотип

Арт-директор «Яндекс.Денег» Дмитрий Пшек — о том, как начать с дизайна логотипа, а затем переделать сайт, визуальный стиль и совсем всё.

Поделиться

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

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

У сервисов Яндекса традиционно говорящие названия, которые поддерживаются материальным объектом на логотипе. Касса — финансовый сервис, и первая ассоциация (после кассового аппарата) — это деньги.

Простая метафора: финансовый сервис — купюры и монеты. Простые геометрические формы: прямоугольник и круг.

А что у Денег

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

Следите за руками: раз, и кошелёк раскладывается на геометрические составляющие, всё те же — прямоугольник и круг.

Пока таких трансформаций с символом Яндекс.Денег не происходит, но возможность есть — и это здорово.

Касса превращается

Ассоциация с деньгами —это хорошо и понятно. Но нам показалось, что пора выйти на уровень абстракции новых логотипов Яндекса— таких, как у Такси или Драйва. Касса на самом верхнем, понятийном уровне — это не конкретный инструмент для приёма платежей, а чистая идея коммуникации и обмена. Если передать что-то Кассе, гарантированно получаешь взамен что-то другое, нужное и ценное. Идеи движения денег и полученной ценности можно увидеть за теми же геометрическими фигурами. Прямоугольник— купюра, банковская карточка, чек —намекает на финансовое движение, абстрактную идею денег. Круг— товар, покупка, то, что человек получает в обмен на деньги. Простые формы и высокий уровень абстракции позволяют представить что угодно:

— банкомат и карточку

— оплату и её результат

— любую валюту и ценность, на которую её меняют

Подобные метафоры легко опознаются в базовых геометрических формах. Знакомьтесь — новый логотип Яндекс.Кассы.

От формы к смыслу

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

Внимание, трансформируемся!

Простая геометрия позволяет логотипу меняться: он может стать трёхмерным, могут измениться размер и расположение частей, но логотип останется собой: будет понятно, что это Касса или что-то, что с ней связано.

А ещё все эти формы отлично анимируются. Анимация помогает показать, как связаны сервисы внутри Кассы.

А давайте я его стукну, и он станет фиолетовым

Логотип хорошо узнаётся, поэтому мы готовы перекрашивать его и наши сервисы в любые цвета в пределах палитры Яндекса (которая становится только шире). Редизайн такой редизайн

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

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

«Жёлтая бета» — вспомним, что мы Яндекс, «фиолетовая бета» — привет, Алиса! И, наконец, наш фаворит —«чёрная бета» — потому что мы всегда знали, что Касса просто космос.

Мы немного волновались: не все в компании поддерживали этот вариант. Но тестирование показало очень интересные результаты, которые оказались полезны всем.

На этапе сплит-тестирования новая версия показала улучшение конверсии на 20% по сравнению с прежней версией сайта Яндекс.Кассы.

Во-первых, новые варианты сработали сильно лучше, чем старый, по всем важным показателям. Это значит, что мы молодцы и редизайн можно считать успешным.А во-вторых, новые варианты сработали одинаково хорошо (с разницей в пределах погрешности). Можно сделать выбор, исходя из собственных предпочтений, перекрасить сайт ещё и ещё раз, посмотреть статистику и выбрать лучшее решение. Столько вариантов, что дух захватывает :) Результат: сайт Кассы в новом виде уже работает, можно посмотреть. Что в итоге

Мы начали с создания логотипа, а закончили стройной визуальной системой— базой геометрических метафор, которая подходит для всех наших продуктов, настоящих и будущих. Кстати, на сайте Кассы нет логотипа. Достаточно того, что он существует — это позволяет разграничить все наши продукты и решения и одновременно объединить их в одной непротиворечивой метафорической системе.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте. Написать