Месяц от нуля до продакшена
Брокер
Проп-компания запускала собственного регулируемого брокера. На проектирование был месяц, а документ описывал, что должно быть на сайте, но не то, как это работает.
- Продуктовый дизайн
- UI/UX
- Исследование домена
Что за продукт
Проп-компания запускала собственного регулируемого брокера. Переход из проп-трейдинга в финансовый продукт со своими правилами. На проектирование был примерно месяц.
Чем занимался я
Документ на структуру сайта писал не я, я по нему работал. Он отвечал на вопрос что должно быть, а вопрос как это считается и откуда берёт данные оставался открытым. Это и была моя часть.
Как работали
Вдвоём с Глебом. На мне были разбор конкурентов, архитектура, требования к данным и большая часть макетов.
В итоге несколько десятков страниц, библиотека компонентов и около шестидесяти макетов. Передано в разработку и запущено.
Сайт работает. Дальше продукт развивается без меня, типы аккаунтов на проде уже не те, что были в документе.
Разбор рынка
Прошёл около двух десятков сайтов конкурентов, эталоном был exness. Смотрел калькуляторы, типы аккаунтов, подачу исполнения ордеров, элементы доверия.
Задача была не «посмотреть, как у людей», а декомпилировать механику. Понять, как считает чужой калькулятор, откуда берёт данные, какие параметры реально влияют на результат, а какие стоят для вида.
Считают у всех честно, а выглядит по-разному: где-то два таба, где-то шесть переключателей. Выбирал не тот, что красивее, а тот, что не расходится с математикой нашего продукта. Скопировать чужую форму нельзя, за ней стоит другая модель ценообразования, и получишь интерфейс, который спрашивает про то, что ни на что не влияет, и молчит о том, что решает всё.
Вот те, кого разбирал по документу, и ради чего.
| Конкурент | Что смотрел |
|---|---|
| exness | Безопасность и защита клиента, VPS-хостинг, конвертер валют, аналитика рынка, ценообразование, социальная ответственность |
| blackbull | TradingView, копитрейдинг, свопы на исламских счетах, реферальная программа |
| ig | Форекс, графики, институциональные аккаунты |
| thinkmarkets | TradingView, типы аккаунтов, спецификации контрактов |
| interactivebrokers | Платформы, регистрация и демо |
| oanda | VPS-хостинг, часы торгов |
| capital | Конвертер валют, как формируется цена |
| Конкурент | Что смотрел |
|---|---|
| xtb | Аналитика рынка, инвест-аккаунт |
| fxpro | Калькулятор CFD |
| fundednext | Калькулятор CFD |
| xm | Аналитика рынка |
| icmarkets | Типы аккаунтов |
| fbs | Депозит и вывод |
| fnmarkets | Депозит и вывод |
| trackdesk | Страницы сравнения с конкурентами |
Фрагменты тех самых страниц.
Три типа решений
Взять как есть
Отраслевые паттерны, ломать которые вредно. Узнаваемость дороже оригинальности. Так пришла сертификация PCI DSS. Увидел, как её подаёт лидер рынка, и не стал изобретать свой способ говорить о безопасности денег.
Починить
Механику взял, читаемость переработал. Экономический календарь. Адаптивность, разделители, акценты.
Принести извне отрасли
Страницы сравнения подсмотрел у trackdesk, это софт для партнёрских программ и к брокерам отношения не имеет. Заметил, что такие страницы ловят поиск по запросам «альтернатива такому-то», и притащил формат.
Чужие решения под свои условия
Страницы отдельного инструмента в документе не было вовсе, только категории вроде Forex и Crypto со списком пар внутри. Собирал её, разбирая чужие. Слева одна из тех, что смотрел.
Что убрал. У них сверху переключатель между CFD и knock-out, отдельным инструментом, которого у нас нет. У нас на этом месте сразу начинаются условия.
Что переставил. У них таблица условий справа, а слева узкая колонка с графиком. У нас наоборот, условия ведут, торговая панель уходит вправо.
Что спросил у трейдеров. Как они на самом деле читают такую страницу, что важно, а что шум. По итогам разговоров часть параметров, которые есть у конкурентов, я убрал. Страница в итоге стала короче.
У конкурента
У нас
Весь сайт одним листом
Большая часть страниц брокера сразу. Они разложены по трём группам. Рынки и главная, платформа с инструментами, торговля.
Отдельная страница на каждый инструмент. Forex, CFD, металлы, акции, индексы, крипта, товары, фьючерсы, ETF. Плюс типы аккаунтов, плюс всё вокруг торговых условий.
Поэтому проектировались шаблоны. При таком количестве рисовать каждую отдельно нельзя, страницы разойдутся между собой раньше, чем закончится месяц.
Один шаблон на шесть направлений
CFD Trading это узловая страница. С неё расходятся шесть направлений, форекс, товары, акции, индексы, крипта и металлы, плюс общая таблица всех рынков.
Внутри один шаблон. Экраны везде идут в одном порядке. Рассказ о направлении, доступные платформы, частые вопросы, четыре шага до первой сделки, таблица доступных рынков, торговые условия, спреды и свопы, требования по марже, качество исполнения.
Разное только содержимое. Своя фотография, свои типовые пары, свои цифры в условиях, свои призывы к действию. Шесть страниц собираются как одна, а выглядят каждая по-своему.
Внизу перекрёстные ссылки. С любого направления видно три соседних. Человек, пришедший из поиска на металлы, узнаёт, что есть ещё пять рынков.
Дизайн-система
Продолжение той же мысли про шаблоны. Библиотека собрана отдельно от страниц, и каждый элемент лежит сразу во всех состояниях. Обычное, заполненное, с ошибкой, недоступное. И для светлых блоков, и для тёмных.
Формы. Поля, списки, чекбоксы, переключатели, поиск, ввод телефона с флагом. На брокерском сайте их больше, чем кажется со стороны: регистрация, фильтры, калькуляторы, заявки.
Меню как компонент. Верхнее меню разобрано по всем разделам, Markets, Platforms & Tools, Trading, About, плюс мобильная гармошка. Раскрытое меню тут отдельный элемент со своими состояниями, живущий отдельно от макета главной.
Иконки и флаги. Своя сетка. Инструментов на сайте сотни, и без значка списки превращаются в простыню текста.
Шесть типов аккаунтов
Cent, Standard, Raw, Invest, Institutional и демо. Слева общая сравнительная страница, справа отдельные страницы под каждый тип.
У каждого своя графика. Свой кадр, где название выложено купюрами, монетами или лентой. Тип узнаётся по картинке раньше, чем прочитан заголовок.
Зачем так. Аккаунты отличаются цифрами, а цифры между собой похожи. Картинка даёт то, чего не даёт таблица, и человек запоминает, какой он выбрал.
На кадре показаны не все страницы, иначе ряд не помещается.
Платформы и инструменты
Platform & Tools это витрина. Две платформы и девять инструментов на одной странице, каждый карточкой с фотографией, названием и одной строкой сути.
За каждой карточкой своя страница. MetaTrader 5, TradingView, VPS-хостинг, калькулятор CFD, конвертер валют, аналитика рынка, часы торгов, копитрейдинг, календарь, графики, торговые сигналы.
Под карточками разные сущности. Платформа, работающий инструмент и услуга это три разные вещи, но в сетке они обязаны читаться одинаково ровно, иначе витрина рассыпается на список несвязанного. Отсюда одна карточка на всех.
Внутри скелет общий, наполнение нет. Где-то объяснение и четыре шага до подключения, где-то работающий калькулятор с живыми курсами, где-то рассказ про выгоду. Порядок экранов один, содержимое разное.
Общая страница
Внутренние страницы
Условия и о компании
Разделы, которые обычно рисуют по остаточному принципу. У брокера они несут доверие, поэтому собраны той же сеткой, что рынки и аккаунты.
Восемь карточек в условиях, семь в разделе о компании. Плюс лонгрид про технологии и безопасность, где текст и кадры идут через строку.
Вместо иконок предметы. У каждой карточки свой отрендеренный объект. Тот же приём, что на аккаунтах, и по той же причине. Одинаковые по смыслу пункты иначе сливаются в список.
Библиотека баннеров на переменных
Рекламные баннеры к брокеру собраны одной системой, поштучно их никто не рисовал. Набор живёт сразу во всех размерах под все площадки и на трёх языках.
Новый баннер это три правки. Заменить картинку в одном месте, выбрать цвет, заменить переводы в одном месте. Всё остальное пересчитывается само.
На записи видно, что меняется одно, а перерисовывается всё. Сначала переключается цвет, потом подменяется предметный кадр, и следом цвет ещё раз, уже с новой картинкой. Каждый раз пересобирается весь лист целиком.
Дальше пачка уходит на выгрузку. Ради этого всё и затевалось: не рисовать руками каждый размер под каждую площадку и каждый язык.
Календарь событий
Тот самый календарь, про который выше сказано починить. Механику взял у конкурентов, читаемость собрал заново.
Раскрытая строка. Событие разворачивается в итог с графиком, не уводя со страницы.
Своя вкладка под каждый вид событий. У макроэкономики, отчётностей и дивидендов разные колонки, и одной таблицей их не покрыть.
Отдельно объяснение, как этим пользоваться. Три сценария, ради которых на календарь заходят. Плюс мобильная версия, справа на кадре.
Откуда всё это берётся. Отдельная часть работы: котировки, спреды, календарь, история цен. Разбирался, что технически достижимо, и передавал требования в разработку. Для брокерского сайта это половина сложности, потому что красивая страница инструмента без ответа на вопрос «а данные откуда» остаётся картинкой.
Копитрейдинг, две версии подряд
Для MVP копитрейдинг взяли готовым: блок от MT5 через iframe. Быстро, некрасиво, зато к сроку. Но проектировали сразу обе версии, зная, что вторая придёт.
Своя версия внутри кабинета. Через несколько месяцев то же самое пересобрали своими средствами. Внешне почти то же, а разница в том, что данные и сценарии стали своими и перестали упираться в чужой блок.
Два направления вместо одного. Можно копировать чужие сделки, а можно открыться и позволить копировать себя. Переключателем на одной странице тут не обойтись, сценария два, и у каждого свои экраны.
Внутренняя часть. Карточка стратегии, автор с рейтингом и числом подписчиков, доходность за период, из чего она набрана по инструментам, и вся история ордеров. То, ради чего человек и выбирает, за кем идти.
MVP, iframe от MT5
Наша версия
Внутри стратегии