«Яндекс.Касса» представила новый сайт и логотип
Арт-директор «Яндекс.Денег» Дмитрий Пшек — о том, как начать с дизайна логотипа, а затем переделать сайт, визуальный стиль и совсем всё.
«Яндекс.Касса» появилась пять лет назад. Она запускалась как инструмент, который позволит организациям принимать платежи, но за это время обросла новыми сервисами и перестала быть просто кассой.
Сервис массовых выплат перечисляет деньги клиентам, «Антифрод» защищает платежи, «Бизнес-маркет» собирает скидки, и это не всё — есть и другие продукты. Мы расскажем, как начали с логотипа, а пришли к целой визуальной системе и заодно сделали редизайн сайта.
От смысла к форме
Придумать символ для «Кассы» оказалось неожиданно сложно. Вариант с очевидной метафорой — кассовым аппаратом — не слишком удачный. Во-первых, кассу, которая ест монетки и выдаёт чеки, трудно сделать однозначно узнаваемой, особенно если изображение небольшое.
Во-вторых, «Касса» выросла и совсем перестала быть похожей на аппарат для пробивания чеков. То есть ни по смыслу, ни по форме изображение кассового аппарата нам уже не подходило. Старая иконка, в которой сложно узнать кассу:
У сервисов «Яндекса» традиционно говорящие названия, которые поддерживаются материальным объектом на логотипе. «Касса» — финансовый сервис, и первая ассоциация (после кассового аппарата) — это деньги.
Простая метафора: финансовый сервис — купюры и монеты. Простые геометрические формы: прямоугольник и круг.
А что у «Денег»
Логотип не может существовать в пустоте, он должен соответствовать другим брендам «Яндекса». В первую очередь — направлению нашего бизнеса для физических лиц, а значит, и всему бренду «Денег» с устоявшимся и хорошо узнаваемым знаком.
Следите за руками: раз, и кошелёк раскладывается на геометрические составляющие, всё те же — прямоугольник и круг.
Пока таких трансформаций с символом «Яндекс.Денег» не происходит, но возможность есть — и это здорово.
Касса превращается
Ассоциация с деньгами — это хорошо и понятно. Но нам показалось, что пора выйти на уровень абстракции новых логотипов «Яндекса» — таких, как у «Такси» или «Драйва». Касса на самом верхнем, понятийном уровне — это не конкретный инструмент для приёма платежей, а чистая идея коммуникации и обмена.
Если передать что-то «Кассе», гарантированно получаешь взамен что-то другое, нужное и ценное. Идеи движения денег и полученной ценности можно увидеть за теми же геометрическими фигурами. Прямоугольник— купюра, банковская карточка, чек намекает на финансовое движение, абстрактную идею денег.
Круг— товар, покупка, то, что человек получает в обмен на деньги. Простые формы и высокий уровень абстракции позволяют представить что угодно:
- банкомат и карточку
- оплату и её результат
- любую валюту и ценность, на которую её меняют
Подобные метафоры легко опознаются в базовых геометрических формах. Знакомьтесь — новый логотип «Яндекс.Кассы».
От формы к смыслу
Новый логотип легко ложится в основу нового визуального стиля «Кассы» и помогает собрать в единую систему все внутренние сервисы.
Внимание, трансформируемся
Простая геометрия позволяет логотипу меняться: он может стать трёхмерным, могут измениться размер и расположение частей, но логотип останется собой: будет понятно, что это «Касса» или что-то, что с ней связано.
А ещё все эти формы отлично анимируются. Анимация помогает показать, как связаны сервисы внутри «Кассы».
А давайте я его стукну, и он станет фиолетовым
Логотип хорошо узнаётся, поэтому мы готовы перекрашивать его и наши сервисы в любые цвета в пределах палитры «Яндекса» (которая становится только шире).
Редизайн такой редизайн
Пока логотип не появится в реальных продуктах и не заживёт своей жизнью, нельзя сказать, что редизайн случился. Нужно было попробовать его в деле. Конечно, можно сделать это так, как обычно делают дизайнеры — примерить к реальности:
Но раз у нас веб-сервис, то проверять логотип и созданную с его помощью визуальную систему стоит именно в вебе. У нас есть идеальный объект для воплощения новых идей и экспериментов — сайт «Кассы» и несколько новых продуктов. Поэтому мы сделали редизайн сайта и запустили тестирование трёх вариантов с разными компоновками блоков и в разных стилях.
На тесты хватило двух недель, чтобы оценить результаты и сделать выводы. Старый вариант — контрольный. Он когда-то нам очень нравился, но сервис стал больше, а сайт нет. Пришло время всё переделать.
«Жёлтая бета» — вспомним, что мы «Яндекс», «фиолетовая бета» — привет, «Алиса». И, наконец, наш фаворит — «чёрная бета», потому что мы всегда знали, что «Касса» просто космос.
Мы немного волновались: не все в компании поддерживали этот вариант. Но тестирование показало очень интересные результаты, которые оказались полезны всем.
На этапе сплит-тестирования новая версия показала улучшение конверсии на 20% по сравнению с прежней версией сайта «Яндекс.Кассы».
Во-первых, новые варианты сработали сильно лучше, чем старый, по всем важным показателям. Это значит, что мы молодцы и редизайн можно считать успешным. А во-вторых, новые варианты сработали одинаково хорошо (с разницей в пределах погрешности).
Можно сделать выбор, исходя из собственных предпочтений, перекрасить сайт ещё и ещё раз, посмотреть статистику и выбрать лучшее решение. Столько вариантов, что дух захватывает. Результат: сайт «Кассы» в новом виде уже работает, можно посмотреть.
Что в итоге
Мы начали с создания логотипа, а закончили стройной визуальной системой— базой геометрических метафор, которая подходит для всех наших продуктов, настоящих и будущих. Кстати, на сайте «Кассы» нет логотипа. Достаточно того, что он существует — это позволяет разграничить все наши продукты, решения и одновременно объединить их в одной непротиворечивой метафорической системе.
Без всего этого текста я бы никогда не догадался, что на логотипе изображена купюра и монета. Впрочем, так часто бывает...
Потому что бумажная купюра так не сгибается, а монеты другого цвета. Короче логотип абсолютно оторванный и абстрактный.
Дизайн УГ, если нужна статья, чтобы рассказать, что там изображено и на что раскладывается...
Гениально) Как Яндекс поедает ваши денюжки)
Тоже про пэкмана подумал
Это редизайн ради редизайна. Бессмысленный и беспощадный. Логотип — пиздец.
Был понятный сайт, с понятной навигацией, простой историей и в узнаваемой (!) стилистике Яндекса. Теперь это сайт какой-то мятной жевательной резинки, к которой ноль доверия.
Помимо того, что абстракции прям много и она не ясна, а от стилистики Яндекса остался только фирменный шрифт и маленький логотип «Яндекс.Касса», так еще и единства нет:
* в первой выпадалке «фирменные» абстрактные фигуры-иконки одного размера и стилистики,
* во второй выпадалке одна иконка в моно-цвете второго размера и стилистики,
* в третьей выпадалке иконки градиентные третьего размера и стилистики.
Ну а ЛК решили видимо не менять, что несомненно огромный плюс!
К слову, Пшек, случаем, не участвовал в редизайне Кинопоиска?
Радикально как-то ...
Да, иконки тихий ужас, на них не читается ничего, от слова совсем.
Ладно бы это был просто декор из абстрактные геометрические фигуры, но они позиционируются как пиктограммы, и это отвлекает и запутывает, когда пытаешься расшифровать.
Пиктограммы должны считываться без текста. А тут что тут можно понять?
Да просто эта Касса Яндексу не сдалась. Условия у них невыгодные, есть более удобные системы эквайринга. Может они решили синий цвет потестировать прежде, чем глобально на него перейти.
Там и с оформлением ссылок беда. Догадаешься схожу, что ссылка во второй выпадашке?
Комментарий недоступен
Комментарий недоступен
Едрить там бутерброд анимированный :) Все силы на него ушли! Мне нравится.
Комментарий недоступен
в реальных мобильных нет "on-hover" так что все ок
А теперь отгадайте, что прячется за иконками
Не хватает смелости признать, что логотип слабый (мягко говоря), приходится доказывать самим себе на страницах популярных изданий, что все ок. Нет, не ок. Выглядит как бессмысленный знак из бесплатной базы логотипов, который можно просто поставить рядом с любым названием
А цвета зачем поменяли?
Комментарий недоступен
Кусок от Waymo отпилили)
Мне кажется, что ссылки не читаются никак.
Яндекс, пока равнялся на гуголь, перенял гугольную импотенцию к дизайну, похоже
По читаемости темная версия вообще не очень хорошо работает, основные кнопки в интерфейсе тоже не достаточно контрастные.
Раньше как то понятно было. Хотя бы сами себе не противоречили. Может, дело не в дизайне? :)
От 2.8 – это значит, что ОТ ДВУХ И ВОСЕМЬ.
А у вас как было от 3.5, так и осталось.
Я тут вижу от 2.8%. Ну и что, что это при определенном обороте. "От" для этого и написано. Маркетинг
Это нормальные проценты для экварийнга? Я далек от темы и мне кажется, что слишком много...
Добрый день. Я из Яндекс.Денег. Комиссии зависят от оборота компании и могут меняться во время роста бизнеса и оборота.
Комментарий недоступен
А я всегда кайфую от сайтов Яндекса. Этот тоже понравился, процентов на 80
Не увидел объяснений о том, почему эти цвета взяли, почему такой изгиб купюры выбрали, почему одна монетка, а не две? Много почему, а дали лишь решение. Почему игра с холодными, а не теплыми, и почему футболка совершенно не в тему яндекса, не делать же весь RE по цветам каждого сервиса. Мне кажется дизайнеры упустили игру цветов или им надоело, или устали, почему устали? Где цвета в "Онлайн платежи для бизнеса" ? Где же эти приятные цвета (желтый и красный) ?
Цвета подходят для какого-то фигово инвестиционного ICO, дизайнеры наверное долго сидели на таких сайтах и нюхали крипту.
Немножко оффтоп: а это ок, что оплата в Демо-магазине ведёт на функциональный прототип InVision?
крутяк! :)
Это всё хуйня. Переделывай.
Яндехоиды, в просто пёздн##ись.
Лучше бы вместо редизайна, сделали бы Яндекс Чеки для ФЗ-54, как это сделала Робокасса, добавив этим летом новое решение для фискализации малого бизнеса и стартапов (Робочеки) на стороне самого сервиса, без посредников в лице АТОЛ, Бизнес Чеки и прочих дорогих штук, которые на старте просто убивают некоторых начинающих предпринимателей.
Фавикон старый весит :)
Весит как новый?
Не вижу купюру и монету, вижу клюшку и шайбу.
Сервис по приему платежей вы предоставляете, а чеки - выписывай сам? Или что-то поменялось с этим? РБК.Мани принимая платежи сама выписывает чек покупателю.
Комментарий недоступен
По-моему, глупо отходить от корпоративного желтого и называться Яндекс :)
Согласен, тут или бренд менеджер не адекватен или руководство которые в первую очередь что-то меняют, чтобы загладить предыдущие ошибки. )
Понаберут людей после "школы разработки интерфейсов", в итоге получаются такие продукты)
А внутри всё как и было...
На этапе сплит-тестирования новая версия показала улучшение конверсии на 20% по сравнению с прежней версией сайта «Яндекс.Кассы».
А во что конверсия увеличилась если не секрет ?
Сергей, в заявки на подключение
Я как то ожидал рыже красного цвета... 5000 купюра например
куда делся курс валют на vc?
хоспадя, стоит переделать что-либо - в комментах всегда срач однотипный. скажу вам по секрету - "им пох*й", вот бы комменты на vc учитывать при редизайне.
Очень напоминает AdWords
Я думал этим Лебедев занимался.
Вот вы ругаетесь, а через полгода они отчитаются о росте профита и снижении костов.
Исправьте пожалуйста ошибку, не понимаю как такое могли не заметить? Кто ардиректор или кто вообще следит за сайтом. Куча косяков можно найти, если по сайту пробежаться.
Комментарий удален модератором
А мне нравился старый дизайн и желтые цвета. Лого такое мультяшное, душевное, родное было, кошелееечек. А новый диз какой-то кислотный, агрессивный. Отстой короче!
Если логотип будет черным, потеряет вся форма смысла. Полное нарушение правил при разработки. Лучше бы создали значимую эволюцию того, что уже есть, и то что люди уже знают. Типа такой идеи:
Лучше б потратили это время и деньги на замену своего техпода, особенно в такси и драйве.
Случайно не эти дизайнеры делали ребрендинг кинопоиска?
текст оправдание. касса как раз читалась. получился пакман. хипстеры блть.
что-то пошло не так.
.
yep