Интерфейс онлайн-платформы для трейдеров и инвесторов

Компания уже несколько лет разрабатывала платформу, но мы создали новую с нуля.

Вводные

FinexWare — международная онлайн-платформа для брокеров. Офис компании находится в Германии.

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

Брокеры арендуют у нашего заказчика площадку и настраивают полностью под себя: размещают на собственном домене, меняют цвета, логотипы и остальные брендовые атрибуты. В общем, полный White Label.

Основные пользователи платформы — трейдеры и инвесторы. Брокер — хозяин и управляющий.

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

Впервые мы встретились с представителем FinexWare у нас в офисе. Борис, русскоязычный основатель компании, прилетел в Санкт-Петербург из Германии, чтобы помочь нам изучить инвестиционный рынок. Четыре часа он рисовал на доске схемы и объяснял, что такое MAM, PAMM и социальный трейдинг, как взаимодействуют между собой инвесторы и трейдеры, что делает брокер, причем там фонды и кто на чем зарабатывает. И это было только введение в тему.

Борис рисовал на доске схемы, которые объясняли, как работает платформа

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

Схем было очень много

Дизайн-задача

Борис хотел сделать платформу, которая заткнет за пояс остальные брокерские площадки. В общем, устроить революцию на рынке.

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

Дизайн-процесс

Менеджер подготовил основные сценарии использования системы и базовые профили, описал бизнес-требования к системе. Заказчик дополнил и утвердил их.

Конкурент FinexWare

Мы изучили все документы, посмотрели конкурентов и начали укладывать всю эту информацию в голове. Трейдинг — сложная тема, с наскоку понять не получится.

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

Будущая функциональность платформы. Один стикер — одна функция

Когда разобрались с возможностями системы, пошли рисовать первые интерфейсы на доске. К тому моменту представление о необходимых функциях в головах уже кое-как сложилось.

Сделали наброски на доске, а потом перевели все в цифровой вид

Мы взяли основные экраны, выделили блоки, из которых будут состоять страницы, и сразу прогнали их по списку основных требований к системе. Когда все сложилось в единую картину, перенесли наброски в Sketch.

Рисовать на доске — хороший способ думать вместе

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

Многие экраны для всех типов пользователей выглядят одинаково, но различаются функциями. Чтобы не запутаться, мы присвоили инвесторам, трейдерам и управляющим стикеры разных цветов

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

Иногда обсуждения затягивались на 2−3 часа — Борис дотошно комментировал каждый экран, предлагал решения, объяснял нюансы: как ведут себя трейдеры и инвесторы, что им важно, на какие числа смотрят, какими функциями пользуются чаще.

Информационная архитектура проекта

Мы начали с MAM-стратегии — она самая большая и сложная. Две другие рассчитывали сделать позже, убрав из первой все лишнее.

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

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

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

В некоторых странах закон запрещает показывать интерфейсы платформ для трейдеров без согласия пользователя

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

Отдельный экран регистрации

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

Что написать на кнопке в форме? «Открыть счет у брокера» или «Зарегистрироваться»? Мы остановились на втором варианте. А в форме предупредили, что одновременно откроем счет в течение двух дней.

Регистрация внутри платформы

Параллельно UX-писатель писал гайд к системе. Точнее, три гайда — отдельный для каждой стратегии. Писал на русском, позже заказчик собирался перевести его на другие языки — платформа-то международная.

Что делать только что зарегистрированному пользователю? Инвесторам мы предлагаем посмотреть рейтинг стратегий, а трейдерам — почитать гайд

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

Дашборд активного пользователя

Изначально мы прорабатывали интерфейсы инвестора, трейдера и администратора. Это основные пользователи системы. Но внезапно появился еще один, портфельный управляющий.

Раздел портфельного управляющего

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

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

С появлением портфельного управляющего увеличилось количество действий внутри системы — нам пришлось проработать новые микросценарии, которые влияли на дизайн уже существующих экранов. И при этом нужно было сохранить консистентность всей платформы. Проект увеличился на треть, сроки сдвинулись на месяц. Портфельный управляющий, хоть и абстрактный, устроил нам внезапный аврал. Да что уж там, внезапнейший! Мы от такого давно отвыкли, но ничего: закатали рукава и начали встраивать управляющего вместе с его портфелем в платформу.

Экран незаполненной стратегии. Статистики по ней, разумеется, нет, поэтому мы объясняем, что здесь появится позже

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

Экран стратегии, по которой уже есть статистика

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

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

В этом же окне можно поменять настройки каждой стратегии: долю на счете, сумму инвестиций, тип аллокации и коэффициент

Смысл

Ситуация с авралом получилась рискованная. Понимаем.

Увы, без таких рисков невозможно взяться ни за один проект. Когда вводных слишком много, а тема незнакомая, запланировать работы с точным сроком крайне сложно. Как и в этом кейсе, никогда не угадаешь, что произойдет в середине работы — появятся новые вводные, изменятся бизнес-ожидания, затянется аналитика. У нас выскочил портфельный управляющий, на которого не обращал внимания и сам заказчик. Что ж, бывает.

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

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

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

Пройдет время, и FinexWare соберет статистику по рабочему продукту. У Бориса появятся новые идеи, примут стройный вид старые, инвесторы выделят бюджет на расширение платформы. И тогда уже можно будет браться за вторую версию продукта. Возможно, этим займемся мы. А может, и нет. Кто знает? Главное — спустя два месяца после разработки дизайна Борис запустил рабочую версию платформы. И остался ей доволен.