Создание третьей версии «Яндекс-денег»

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

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

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

При совершении многих операций нужно вводить платежный пароль. Иногда его путают с паролем к Яндексу. Думаем, как исключить неразбериху. Решаем всегда показывать платежный пароль на совершенно особенной плашке. Чтобы у человека срабатывал рефлекс: «Необычная плашка — значит, пароль от „Яндекс-денег“».

Думаем над видом плашки. Сначала делаем оранжевую.

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

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

Возвращаемся к главной. Думаем над возможностью объединения главного меню и блоков с подсказками и рекомендациями. Прячем логотипы в скролл, а категории — в табы.

Пробуем вариант с цветным фоном. Не пошел.

Решаем делать главную «под пользователя» — с настраиваемыми вкладками для частых операций. Например, благотворителям удобно сразу видеть «Пополнение», а плательщикам — «Избранное».

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

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

Упрощаем дизайн, делая его более лаконичным.

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

Отрисовываем иконки.

Готовим финальный документ — гайдлайны с описанием всех элементов.