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

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

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

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

От смысла к форме

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

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

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

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

А что у «Денег»

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

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

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

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

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

Если передать что-то «Кассе», гарантированно получаешь взамен что-то другое, нужное и ценное. Идеи движения денег и полученной ценности можно увидеть за теми же геометрическими фигурами. Прямоугольник— купюра, банковская карточка, чек намекает на финансовое движение, абстрактную идею денег.

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

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

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

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

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

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

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

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

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

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

Редизайн такой редизайн

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

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

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

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

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

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

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

Можно сделать выбор, исходя из собственных предпочтений, перекрасить сайт ещё и ещё раз, посмотреть статистику и выбрать лучшее решение. Столько вариантов, что дух захватывает. Результат: сайт «Кассы» в новом виде уже работает, можно посмотреть.

Что в итоге

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

0
90 комментариев
Написать комментарий...
Alexey Volkov

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

Ответить
Развернуть ветку
Michael Smith
Подобные метафоры легко опознаются в базовых геометрических формах

Дизайн УГ, если нужна статья, чтобы рассказать, что там изображено и на что раскладывается...

Ответить
Развернуть ветку
Максим Мостовой

Статья не об этом. Логотип в принципе не обязан быть понятным. Большинство логотипов выглядят как абстракция.Рядом с логотипом указано название, через некоторое время "какая-то синяя штука" будет ассоциироваться с Я.Кассой без текста - это главное.

Ответить
Развернуть ветку
Pixel Lens
это главное

зачем тогда все эти бредни про купюру с монетой? Одно дело изначально целится на абстрактность, другое - натягивать сову на глобус.

Ответить
Развернуть ветку
Максим Мостовой

Вы дизайнер? Хотите понять или похоливарить? Разработка логотипа это творческий процесс, опирающийся на конкретные предметы и ассоциации с ними.

Ответить
Развернуть ветку
Pixel Lens

Я дизайнер. Этот логотип не вызывает ассоциаций ни с деньгами, ни с буквой К, ни с чем либо еще. Он абсолютно абстрактен. Поэтому обоснование его смысла вызывает недоумения.

Ответить
Развернуть ветку
Максим Мостовой

у вас логотип мерседеса вызывает ассоциации с автомобилями?) много назовете автологотипов с изображением автомобилей?

Ответить
Развернуть ветку
Michael Smith

Ну так от мерседеса и нет статей в духе, что в нашем логотипе "легко опознается и раскладывается" и список зашифрованных концепций.

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

Ответить
Развернуть ветку
Максим Мостовой

Вы зачем свои домыслы за цитаты выдаете?

"Логотип хорошо узнаётся"

Речь идет о том, что получившийся логотип люди запомнят и узнают при случае.

Расскажите найку или адидасу или мерседесу про абстрактные логотипы.

Ответить
Развернуть ветку
Michael Smith
Речь идет о том, что получившийся логотип люди запомнят и узнают при случае.

вы что-то путаете, в этой ветке речь шла про то, что "Дизайн УГ, если нужна статья, чтобы рассказать, что там изображено и на что раскладывается"

Ответить
Развернуть ветку
Максим Мостовой

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

Ответить
Развернуть ветку
87 комментариев
Раскрывать всегда