{"id":14270,"url":"\/distributions\/14270\/click?bit=1&hash=a51bb85a950ab21cdf691932d23b81e76bd428323f3fda8d1e62b0843a9e5699","title":"\u041b\u044b\u0436\u0438, \u043c\u0443\u0437\u044b\u043a\u0430 \u0438 \u0410\u043b\u044c\u0444\u0430-\u0411\u0430\u043d\u043a \u2014 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0433\u043e\u0440\u0435","buttonText":"\u041d\u0430 \u043a\u0430\u043a\u043e\u0439?","imageUuid":"f84aced9-2f9d-5a50-9157-8e37d6ce1060"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что в итоге

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Yaroslav Tugolukovskiy

Ассоциироваться то будет, но речь о другом. Автор пишет:

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

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

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

В этой части текста речь шла о прямоугольнике и круге как о базовых формах

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