Читайте наш Telegram-канал про ужасы интерфейсных проектов!
Главная / Портфолио / Интерфейс онлайн-платформы для трейдеров и инвесторов

2019

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

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

Цена

~ 1 000 000 ₽
Собака Павлова • FinexWare • Интерфейс онлайн-платформы для трейдеров и инвесторов

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

Вводные

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

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

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

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

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

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Борис рисовал на доске схемы, которые объясняли, как работает платформа

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Схем было очень много

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

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

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

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

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Конкурент FinexWare

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

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Будущая функциональность платформы. Один стикер — одна функция

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Сделали наброски на доске, а потом перевели все в цифровой вид

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Рисовать на доске — хороший способ думать вместе

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

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

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

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Информационная архитектура проекта

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

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

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

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

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

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Отдельный экран регистрации

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

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Регистрация внутри платформы

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Что делать только что зарегистрированному пользователю? Инвесторам мы предлагаем посмотреть рейтинг стратегий, а трейдерам — почитать гайд

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Дашборд активного пользователя

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Раздел портфельного управляющего

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

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

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

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

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

Интерфейс онлайн-платформы для трейдеров • Собака Павлова Экран стратегии, по которой уже есть статистика

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

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

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

Смысл

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

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

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

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

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

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

Вам нужен интерфейс?

Заказать дизайн

Напишите нам на we@sobakapav.ru

Что мы можем сделать?

UX-исследование и дизайн под ключ, как в этом кейсе, и многое другое.

Продуктовое исследование
UX/UI-дизайн под ключ

Хотите сделать сами?

Научим создавать хорошие интерфейсы.

Похожие проекты

Цена

~ 1 000 000 ₽

Пишите нам: @sobakapavpro