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

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

Разработали дизайн международной платформы для заказчика из Германии.

Контекст

Результат

Бюджет

2019

Вводные

FinexWare — международная онлайн-платформа для брокеров. Офис компании находится в Германии.
FinexWare предоставляет брокерам площадку, на которой трейдеры могут находить инвесторов, а инвесторы — трейдеров. Если совсем упрощенно, это социальная сеть, в которой неопытные фондовые игроки могут подписываться на опытных, чтобы автоматически копировать их торговые сделки. Трейдеры зарабатывают на комиссии, а инвесторы — на росте стоимости финансовых инструментов. При этом все сделки проходят через торговые терминалы и отношения к FinexWare не имеют.
Брокеры арендуют у нашего заказчика площадку и настраивают полностью под себя: размещают на собственном домене, меняют цвета, логотипы и остальные брендовые атрибуты. В общем, полный White Label.
Основные пользователи платформы — трейдеры и инвесторы. Брокер — хозяин и управляющий.
К нам заказчик пришел, чтобы переделать FinexWare с нуля. Она была в каком-то виде готова, работала, но определенно не могла перевернуть рынок. А у заказчика были именно такие амбиции.
Впервые мы встретились с представителем FinexWare у нас в офисе. Борис, русскоязычный основатель компании, прилетел в Санкт-Петербург из Германии, чтобы помочь нам изучить инвестиционный рынок. Четыре часа он рисовал на доске схемы и объяснял, что такое MAM, PAMM и социальный трейдинг, как взаимодействуют между собой инвесторы и трейдеры, что делает брокер, причем там фонды и кто на чем зарабатывает. И это было только введение в тему.
Платформа для инвесторов и трейдеров: заказчик рассказывает и показывает | SobakaPav.ru
Борис рисовал на доске схемы, которые объясняли, как работает платформа
Борис оказался очень компетентным заказчиком. Рассказывал понятно, не требовал невозможного, хорошо представлял себе финальный результат, отвечал на любые вопросы. А еще предоставил огромное количество справочных документов, которые помогали в работе. В общем, мы остались довольны знакомством и сразу взялись за дело.
Платформа для инвесторов и трейдеров: заказчик рассказывает и показывает | SobakaPav.ru
Схем было очень много

Задача

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

Исследование

Менеджер подготовил основные сценарии использования системы и базовые профили, описал бизнес-требования к системе. Заказчик дополнил и утвердил их.
Платформа для инвесторов и трейдеров: конкурент заказчика | SobakaPav.ru
Конкурент FinexWare
Мы изучили все документы, посмотрели конкурентов и начали укладывать всю эту информацию в голове. Трейдинг — сложная тема, с наскоку понять не получится.
Чтобы побыстрее разобраться в будущей архитектуре системы, мы решили декомпозировать функции. Взяли все функциональные ожидания, сценарии и профили и начали выписывать все возможности на стикерах. Один стикер — одна функция.
Платформа для инвесторов и трейдеров: будущая функциональность | SobakaPav.ru
Будущая функциональность платформы. Один стикер — одна функция
Когда разобрались с возможностями системы, пошли рисовать первые интерфейсы на доске. К тому моменту представление о необходимых функциях в головах уже кое-как сложилось.
Платформа для инвесторов и трейдеров: наброски | SobakaPav.ru
Сделали наброски на доске, а потом перевели все в цифровой вид
Мы взяли основные экраны, выделили блоки, из которых будут состоять страницы, и сразу прогнали их по списку основных требований к системе. Когда все сложилось в единую картину, перенесли наброски в Sketch.
Платформа для инвесторов и трейдеров: рисуем и думаем | SobakaPav.ru
Рисовать на доске — хороший способ думать вместе
Всех пользователей поделили по цветам — кто что мог делать со стратегиями. Сделали для себя, чтобы побыстрее понимать, у кого какие функции будут в интерфейсе.
Платформа для инвесторов и трейдеров: стратегии инвестирования и типы пользователей | SobakaPav.ru
Многие экраны для всех типов пользователей выглядят одинаково, но различаются функциями. Чтобы не запутаться, мы присвоили инвесторам, трейдерам и управляющим стикеры разных цветов
Каждый шаг мы обсуждали с клиентом — созванивались раз в неделю, рассказывали, что уже сделали и что планируем делать дальше.
Иногда обсуждения затягивались на 2−3 часа — Борис дотошно комментировал каждый экран, предлагал решения, объяснял нюансы: как ведут себя трейдеры и инвесторы, что им важно, на какие числа смотрят, какими функциями пользуются чаще.
Платформа для инвесторов и трейдеров: информационная архитектура | SobakaPav.ru
Информационная архитектура проекта
Мы начали с MAM-стратегии — она самая большая и сложная. Две другие рассчитывали сделать позже, убрав из первой все лишнее.
После этого началась обычная дизайн-рутина: мы детализировали основные экраны, рисовали новые, согласовывали и шли дальше. Не сразу в финальной версии, но близко к ней. Брали отдельные сценарии или части интерфейсов и прорабатывали их. Например, карточку стратегии — отдельно для трейдера и инвестора, потому что они видят ее по-разному, у них разные возможности и задачи. Ну, а раз платформа поддерживает три типа инвестирования, то разрабатывать одну и ту же карточку нужно шесть раз.
Платформа для инвесторов и трейдеров: карта функциональности | SobakaPav.ru
Карта функциональности прошлой платформы. Мы ее зафиксировали, чтобы ничего не потерять при создании новой версии
В процессе нам приходилось решать много мелких дизайн-задач. Так, мы знали, что у нас будут пользователи из разных стран. Законодательство у них разное, и где-то неподготовленному человеку нельзя показывать даже интерфейсы подобных систем. Сперва нужно попросить его согласие.
Платформа для инвесторов и трейдеров: согласие на просмотр | SobakaPav.ru
В некоторых странах закон запрещает показывать интерфейсы платформ для трейдеров без согласия пользователя
Что делать, когда человек видит интерфейс? Предложить ему зарегистрироваться. Но уводить его на отдельный экран не стоит — он же хотел посмотреть, как тут все устроено. Поэтому мы добавили регистрацию справа на первом экране, который показываем посетителю.
Платформа для инвесторов и трейдеров: экран регистрации | SobakaPav.ru
Отдельный экран регистрации
С регистрацией были и другие сложности. Чтобы пользователь мог пользоваться площадкой, ему нужно открыть счет у брокера. Это отдельная процедура. Мы привязали ее к регистрации — вводишь данные, нажимаешь кнопку, и брокер создает тебе счет. Это редкая практика — обычно пользователю приходится чуть ли не в банк идти.
Что написать на кнопке в форме? «Открыть счет у брокера» или «Зарегистрироваться»? Мы остановились на втором варианте. А в форме предупредили, что одновременно откроем счет в течение двух дней.
Платформа для инвесторов и трейдеров: регистрация внутри платформы | SobakaPav.ru
Регистрация внутри платформы
Параллельно UX-писатель писал гайд к системе. Точнее, три гайда — отдельный для каждой стратегии. Писал на русском, позже заказчик собирался перевести его на другие языки — платформа-то международная.
Платформа для инвесторов и трейдеров: инвестору — рейтинг стратегий, трейдеру — гайд | SobakaPav.ru
Что делать только что зарегистрированному пользователю? Инвесторам мы предлагаем посмотреть рейтинг стратегий, а трейдерам — почитать гайд
Спустя полтора месяца, когда до завершения проекта оставался месяц, оказалось, что мы неверно оценили объемы работы. Анализ конкурентов и присланных документов дали примерное представление, сколько экранов мы будем отрисовывать, но ближе к финалу внезапно оказалось, что у одного из типов пользователей слишком много задач и возможностей.
Платформа для инвесторов и трейдеров: дашборд | SobakaPav.ru
Дашборд активного пользователя
Изначально мы прорабатывали интерфейсы инвестора, трейдера и администратора. Это основные пользователи системы. Но внезапно появился еще один, портфельный управляющий.
Платформа для инвесторов и трейдеров: портфельный управляющий | SobakaPav.ru
Раздел портфельного управляющего
Борис в начале проекта упоминал его мельком — считал, что тот повторяет возможности других пользователей, поэтому будет достаточно скопировать попозже уже имеющиеся интерфейсы. А оказалось, что у этого управляющего больше всего функций. И нам пришлось его аккуратно встраивать в готовое решение. Не просто сделать дизайн еще нескольких экранов, а продумать функциональность — как что будет работать.
Платформа для инвесторов и трейдеров: страница портфельного управляющего | SobakaPav.ru
Портфельным управляющим может быть компания, которая нанимает трейдеров. Или, наоборот, специалист, которого нанял слишком занятой трейдер. Поэтому у этого пользователя так много возможностей
С появлением портфельного управляющего увеличилось количество действий внутри системы — нам пришлось проработать новые микросценарии, которые влияли на дизайн уже существующих экранов. И при этом нужно было сохранить консистентность всей платформы. Проект увеличился на треть, сроки сдвинулись на месяц. Портфельный управляющий, хоть и абстрактный, устроил нам внезапный аврал. Да что уж там, внезапнейший! Мы от такого давно отвыкли, но ничего: закатали рукава и начали встраивать управляющего вместе с его портфелем в платформу.
Платформа для инвесторов и трейдеров: экран инвестиционной стратегии | SobakaPav.ru
Экран незаполненной стратегии. Статистики по ней, разумеется, нет, поэтому мы объясняем, что здесь появится позже
Борис планировал презентовать готовую платформу инвесторам через четыре месяца после старта проекта, а мы не успевали доделать дизайн. Поэтому начали работать параллельно с разработчиками. Доделывали часть дизайна, писали спецификацию и сразу передавали заказчику. Созваниваться стали по два раза в неделю — отдельно с Борисом и с разработчиками.
Платформа для инвесторов и трейдеров: экран инвестиционной стратегии со статистикой | SobakaPav.ru
Экран стратегии, по которой уже есть статистика
Последний месяц проходил в авральном режиме. Мы доделывали дизайн, передавали макеты разработчикам, доделывали оставшееся: панель администратора, дашборды, гайдлайн. Борис оказался из тех заказчиков, которые не любят комментировать дизайн по частям и ждут финальную версию, чтобы оценить все сразу. Поэтому еще какую-то часть времени мы корректировали уже готовые макеты.
Платформа для инвесторов и трейдеров: перераспределение денег между инвестиционными стратегиями | SobakaPav.ru
К одному счету могут быть привязаны несколько стратегий. Перераспределить между ними деньги можно в одном окне
Платформа для инвесторов и трейдеров: настройки инвестиционных стратегий | SobakaPav.ru
В этом же окне можно поменять настройки каждой стратегии: долю на счете, сумму инвестиций, тип аллокации и коэффициент

Смысл

Ситуация с авралом получилась рискованная. Понимаем.
Увы, без таких рисков невозможно взяться ни за один проект. Когда вводных слишком много, а тема незнакомая, запланировать работы с точным сроком крайне сложно. Как и в этом кейсе, никогда не угадаешь, что произойдет в середине работы — появятся новые вводные, изменятся бизнес-ожидания, затянется аналитика. У нас выскочил портфельный управляющий, на которого не обращал внимания и сам заказчик. Что ж, бывает.
С FinexWare у нас случилась и другая показательная история, связанная с неожиданным четвертым пользователем. Дело в том, что часто заказчик — носитель огромного объема знаний. Он разбирается в теме так хорошо, что его буквально разрывает от желания уместить все сразу в одном месте. В голове заказчика уже существует суперпродукт, который создаст новый стандарт на рынке.
В жизни же путь до идеала долог и труден. А еще ограничен временем и бюджетом. Поэтому в какой-то момент заказчика нужно останавливать, чтобы получить хоть что-то. При огромных амбициях проект грозится разрастись до невероятных размеров и занять годы разработки.
Главное — мы остановили заказчика, чтобы он получил продукт. Борису хватило бы экспертизы и видения, чтобы добавить в интерфейс еще нескольких пользователей, несколько видов стратегий, десяток-другой уникальных функций. Но и того, что мы сделали, было достаточно. Потому что готовый неидеальный продукт лучше неготового идеального. А результат, который получил FinexWare, уже превзошел его ожидания. И это за бюджет, которого на Западе хватило бы лишь на четверть того, что сделали мы.
Пройдет время, и FinexWare соберет статистику по рабочему продукту. У Бориса появятся новые идеи, примут стройный вид старые, инвесторы выделят бюджет на расширение платформы. И тогда уже можно будет браться за вторую версию продукта. Возможно, этим займемся мы. А может, и нет. Кто знает? Главное — спустя два месяца после разработки дизайна Борис запустил рабочую версию платформы. И остался ей доволен.
Заказчик сказал, что новая платформа  устроит революцию на рынке
~ 1 000 000 ₽
Результат
Бюджет
Другие кейсы