InvestFlow: концепт главного экрана инвест-платформы

Задача

Первый экран лендинга, desktop 1440, без скролла. На экране должны были поместиться меню из семи пунктов, заголовок, описание, блок выбора формата и строка показателей эффективности. Экран должен был:

• объяснить, что это за продукт;
• показать разницу между форматами;
• помочь выбрать подходящий;
• привести к регистрации.

Ограничения

Интерфейса приложения не было, поэтому экраны в телефонах условные. Данных об индексе и периоде для доходности тоже не было, поэтому у цифр стоит общая сноска о рисках.

Для кого

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

Что увидел у конкурентов

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

• Российские брокеры продают на первом экране акцию и 3D-картинку: процент, монеты, подарок. Что за сервис, понятно не сразу.
• Западные платформы показывают сам продукт и подают цифры честно: с периодом, условиями и сноской о риске.
• Выбора формата на первом экране нет ни у кого. На этом можно выделиться.
• Доходность нельзя подавать как обещание, это запрещает ст. 28 закона «О рекламе». Поэтому у цифр нужна сноска о рисках.

Направления

Начал с визуала: собрал четыре прототипа по референсам, формулировки оставил на потом.

• Неожиданный образ. Отказался: такой образ больше подходит фестивальному сайту, чем софту для трейдеров.
• Брутализм. Отказался: продукт считывается во вторую очередь, а человек с деньгами ищет надёжность. Забрал из варианта крупные подписи от первого лица, «Решаю сам» и «Соберите за меня».
• Заголовок и две карточки. Самый понятный вариант, но продукта на экране не видно. Довёл его до финала как запасной.
• Два смартфона. Выбрал: разницу форматов видно на экранах продукта, читать ничего не нужно.

Как пришёл к решению

Телефоны и кнопки. В базовом варианте кнопки стояли отдельно от телефонов. Я связал их заливкой: у белого экрана белая кнопка. Потом завёл первую строку заголовка на телефоны, и экран собрался в одну композицию.

Названия форматов. Новичок не считает себя новичком, но свою ситуацию узнаёт сразу. Поэтому над названием формата стоит ситуация: «Решаю сам» и «Соберите за меня». Кнопки написал в одной грамматике: «Начать торговать» и «Подобрать портфель».

Шрифт. Два раунда, 18 версий на трёх прототипах. Для этого варианта выбрал широкий Unbounded для заголовка и Manrope для текста. С ними продукт выглядит современным приложением, на банк он не похож.

Цвет. Лайм выделяет продукт среди синих банков и не путается с зелёным «+» у цифр. Зелёный и красный оставил только для «+» и «−».

Фон и размытие. Со свечением экран выглядел шаблонно. Я убрал свечение и добавил сетку из шести колонок для ритма. Переход под заголовком сделал размытием слоями вместо полосы цвета. Так текст читается над белым телефоном и экран не режется на части.

Шапка. Базовая выглядела слишком стандартно. Меню я поставил по оси экрана, Premium перенёс в конец меню, «Приложение iOS / Android» оставил простым текстом. Язык сделал списком: свитч и «RU / EN» ломаются, если языков станет больше двух.

Решение

Почему так

UI

• Unbounded и Manrope. Широкий технологичный шрифт на тёмном фоне. Продукт выглядит приложением, на банк не похож.
• Лайм только на действиях. Выделяет продукт среди синих банков и не спорит с зелёным «+».
• Пилюли. Повторяют скругление телефонов. Острые углы спорили с формой устройства.
• Сетка из шести колонок. Без неё экран был пустоватым, линии колонок дают ритм.
• Размытие вместо полосы. Заголовок читается над белым телефоном, экран не делится на части.

UX

• Два телефона, два формата. Разницу видно на экранах продукта, читать не нужно.
• Кнопка в своём телефоне. Формат и действие читаются вместе.
• Ситуация над названием формата. В «Решаю сам» и «Соберите за меня» человек узнаёт себя. Ярлыка «для новичков» на экране нет.
• Цифры со сноской о рисках. Доходность не подаётся как обещание.
• «Не знаете, что выбрать?» под кнопками. Путь для того, кто не узнал себя ни в одном формате.

Мобильная версия

На 390 px два телефона рядом не помещаются, поэтому форматы переключаются. Меню открывается поверх экрана.

UI-кит

Альтернативы

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

Как проверил бы

Сначала прошёл по сценарию первого экрана сам: что это за продукт → какой формат мой → можно ли доверять → действие. Первый и последний шаги прошли без проблем. На втором и третьем я застревал: подписи форматов были мелкими, сноска о рисках была 11 px, в телефоне висела заготовка графика.

Подписи увеличил с 10 до 13 px, сноску тоже до 13 px. Заготовку графика убрал: интерфейса приложения нет, экраны в телефонах передают суть формата.

Проверку на людях описал планом: гипотеза, метод на целевой аудитории, метрика. Главная метрика — клики по кнопкам форматов, сдерживающая — доля ушедших без клика.

Что сделал бы дальше

• Настроил бы метрики первого экрана: клики по форматам и уходы без клика.
• Замерил бы производительность размытия: на экране около десяти слоёв.
• Поставил бы в телефоны живые данные и реальные экраны приложения.
• Спроектировал бы анкету автопортфеля, куда ведёт «Подобрать портфель».