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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что в итоге

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

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

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

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

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

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

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

Ответить
Развернуть ветку
12 комментариев
werewolfenstein
Ответить
Развернуть ветку
R777

Гениально) Как Яндекс поедает ваши денюжки)

Ответить
Развернуть ветку
1 комментарий
Sergey Gotsulyak

Тоже про пэкмана подумал

Ответить
Развернуть ветку
Bender Rodriguez

Это редизайн ради редизайна. Бессмысленный и беспощадный. Логотип — пиздец.

Был понятный сайт, с понятной навигацией, простой историей и в узнаваемой (!) стилистике Яндекса. Теперь это сайт какой-то мятной жевательной резинки, к которой ноль доверия.

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

Ну а ЛК решили видимо не менять, что несомненно огромный плюс!

К слову, Пшек, случаем, не участвовал в редизайне Кинопоиска?
Радикально как-то ...

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

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

Ответить
Развернуть ветку
2 комментария
Андрей Погожев

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

Ответить
Развернуть ветку
3 комментария
Yaroslav Tugolukovskiy

Там и с оформлением ссылок беда. Догадаешься схожу, что ссылка во второй выпадашке?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Velemir Hasidov

Едрить там бутерброд анимированный :) Все силы на него ушли! Мне нравится.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Com-CV

в реальных мобильных нет "on-hover" так что все ок

Ответить
Развернуть ветку
1 комментарий
Alexander Sorokin

А теперь отгадайте, что прячется за иконками

Ответить
Развернуть ветку
Velemir Hasidov
Ответить
Развернуть ветку
2 комментария
Yuri Khivrich

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

Ответить
Развернуть ветку
Андрей Погожев

А цвета зачем поменяли?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Money Box

Кусок от Waymo отпилили)

Ответить
Развернуть ветку
Тимофей Слепченко

Мне кажется, что ссылки не читаются никак.

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

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

Ответить
Развернуть ветку
Anna Grigoryeva

По читаемости темная версия вообще не очень хорошо работает, основные кнопки в интерфейсе тоже не достаточно контрастные.

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

Раньше как то понятно было. Хотя бы сами себе не противоречили. Может, дело не в дизайне? :)
От 2.8 – это значит, что ОТ ДВУХ И ВОСЕМЬ.
А у вас как было от 3.5, так и осталось.

Ответить
Развернуть ветку
Валерий Бабанин

Я тут вижу от 2.8%. Ну и что, что это при определенном обороте. "От" для этого и написано. Маркетинг

Ответить
Развернуть ветку
2 комментария
Ilya P

Это нормальные проценты для экварийнга? Я далек от темы и мне кажется, что слишком много...

Ответить
Развернуть ветку
2 комментария
Настя Васильченко

Добрый день. Я из Яндекс.Денег. Комиссии зависят от оборота компании и могут меняться во время роста бизнеса и оборота.

Ответить
Развернуть ветку
1 комментарий
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Кирилл Фомин

А я всегда кайфую от сайтов Яндекса. Этот тоже понравился, процентов на 80

Ответить
Развернуть ветку
Alexander Kolygin

Не увидел объяснений о том, почему эти цвета взяли, почему такой изгиб купюры выбрали, почему одна монетка, а не две? Много почему, а дали лишь решение. Почему игра с холодными, а не теплыми, и почему футболка совершенно не в тему яндекса, не делать же весь RE по цветам каждого сервиса. Мне кажется дизайнеры упустили игру цветов или им надоело, или устали, почему устали? Где цвета в "Онлайн платежи для бизнеса" ? Где же эти приятные цвета (желтый и красный) ?
Цвета подходят для какого-то фигово инвестиционного ICO, дизайнеры наверное долго сидели на таких сайтах и нюхали крипту.

Ответить
Развернуть ветку
Zina Tcvetkova

Немножко оффтоп: а это ок, что оплата в Демо-магазине ведёт на функциональный прототип InVision?

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

крутяк! :)

Ответить
Развернуть ветку
Олег Ивкин

Это всё хуйня. Переделывай.

Ответить
Развернуть ветку
Vyacheslav.O

Яндехоиды, в просто пёздн##ись.

Ответить
Развернуть ветку
Сергей Комлев

Лучше бы вместо редизайна, сделали бы Яндекс Чеки для ФЗ-54, как это сделала Робокасса, добавив этим летом новое решение для фискализации малого бизнеса и стартапов (Робочеки) на стороне самого сервиса, без посредников в лице АТОЛ, Бизнес Чеки и прочих дорогих штук, которые на старте просто убивают некоторых начинающих предпринимателей.

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

Фавикон старый весит :)

Ответить
Развернуть ветку
ivan krapivin

Весит как новый?

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

Не вижу купюру и монету, вижу клюшку и шайбу.

Ответить
Развернуть ветку
Юрий

Сервис по приему платежей вы предоставляете, а чеки - выписывай сам? Или что-то поменялось с этим? РБК.Мани принимая платежи сама выписывает чек покупателю.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
1 комментарий
Анатолий Б.
Ответить
Развернуть ветку
Вик Довнар

По-моему, глупо отходить от корпоративного желтого и называться Яндекс :)

Ответить
Развернуть ветку
Alex Kasakow

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

Ответить
Развернуть ветку
Александр

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

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

А внутри всё как и было...

Ответить
Развернуть ветку
Сергей Густун

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

А во что конверсия увеличилась если не секрет ?

Ответить
Развернуть ветку
Юлия Ладыгина

Сергей, в заявки на подключение

Ответить
Развернуть ветку
Артур Геращенко

Я как то ожидал рыже красного цвета... 5000 купюра например

Ответить
Развернуть ветку
Igor Preobrajensky

куда делся курс валют на vc?

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

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

Ответить
Развернуть ветку
Вадим Греков

Очень напоминает AdWords

Ответить
Развернуть ветку
Арсений Ахмадуллин

Я думал этим Лебедев занимался.

Ответить
Развернуть ветку
Арсений Ахмадуллин

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

Ответить
Развернуть ветку
Дима Брейвен

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

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

Комментарий удален модератором

Развернуть ветку
Дмитрий Freeman

А мне нравился старый дизайн и желтые цвета. Лого такое мультяшное, душевное, родное было, кошелееечек. А новый диз какой-то кислотный, агрессивный. Отстой короче!

Ответить
Развернуть ветку
Alex Kasakow

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

Ответить
Развернуть ветку
Nikita Mereminskiy

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

Ответить
Развернуть ветку
Сергей Снежный

Случайно не эти дизайнеры делали ребрендинг кинопоиска?

Ответить
Развернуть ветку
Дмитрий Ольшевский

текст оправдание. касса как раз читалась. получился пакман. хипстеры блть.

Ответить
Развернуть ветку
Sergey Mikhalev

что-то пошло не так.

Ответить
Развернуть ветку
Евгений Ермолаев

.

Ответить
Развернуть ветку
Евгений Ермолаев

yep

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