Проектировал платформу для алготрейдеров, которые не пишут код

Behance: Кейс — откроется в новой вкладке
Роль: Продукт, UI/UX, дизайн-система, исследования
Не моё: Фронтенд и код; логотип — Elizaveta Kovalskaya — откроется в новой вкладке
Год: 2024
Инструменты: Figma

Коротко

Веб-платформа для алготрейдинга: обучение ML-модели и торговля через её стратегию.

Разобрал 15+ платформ-конкурентов и сформулировал позиционирование.
Провёл модерируемые UX-тесты по 5–7 человек за раунд. Из них выросли мастер создания модели в пять шагов, два режима сложности и AI-чат.
Спроектировал интерфейс платформы целиком и собрал дизайн-систему с нуля: токены, компоненты, состояния.

Контекст

Robotter / Labs — немецкий AI-стартап. Мы работали над тремя продуктами и запустили два: frnx.ai — откроется в новой вкладке и Fishnet. Robotter — третий, до релиза не дошёл. Для него же сделан лендинг robotter.ai, чтобы принимать заявки на ранний доступ. С 2022 по 2025 год я был в компании единственным штатным дизайнером, Robotter проектировал в 2024 году. В команде платформы были четыре разработчика и я.

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

Идея принадлежит Майку, CEO Robotter. Порог входа в алготрейдинг технический, а не финансовый. Чтобы заниматься алгоритмической торговлей, нужно поднять сервер, поставить фреймворк, разобраться в командной строке и уметь программировать. Трейдер, который отлично понимает рынок, до собственной стратегии не доходит — он застревает в инфраструктуре.

Рынок к тому моменту разошёлся на два полюса, и оба неудобны. Простые сервисы вроде 3Commas ставятся за пять минут, но у них низкий уровень кастомизации торговых стратегий. Мощные вроде Hummingbot дают полный контроль, но требуют своего сервера и навыков разработчика. Середины не было — туда мы и целились: глубина настройки Hummingbot при доступности облачного сервиса.

Что я делал

Начал с исследования: разобрал 15+ платформ-конкурентов и провёл интервью с трейдерами и разработчиками ботов. Дальше собирал интерактивные прототипы ключевых сценариев и проверял их на модерируемых UX-тестах по 5–7 человек за раунд. Спроектировал интерфейс целиком и собрал дизайн-систему с нуля.

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

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

Экраны платформы

35 экранов по пути пользователя: от обзора портфеля до профиля.

Кейс, как он оформлен на Behance

Платформу проектировал в 2024 году, до того как перестроил работу вокруг AI. Оставляю кейс как есть: по нему видно, как я работал тогда — с персонами, схемами пути и слайдами. Кейс на английском: платформа была международной.

Robotter — торговая платформа на ML и AI. Дашборд портфеля в окне браузера и вынесенные элементы интерфейса: график точности обучения, переключатель лучших и худших стратегий, круговой индикатор точности 65%, значки уведомлений

Вступление кейса: «Bringing pro-level crypto trading to a web interface». Алготрейдинговая платформа на ML и AI: трейдер покупает рыночные данные, обучает модели в облаке, проверяет стратегии на истории и запускает торговых ботов через веб, без кода и своих серверов. Год 2024, роль — продукт, UI, дизайн-система, UX-исследования. Ниже два экрана: настройка бэктеста с AI-чатом и обучение модели с графиками потерь и точности

Анализ 15+ конкурирующих платформ: простые сервисы вроде 3Commas и Cryptohopper быстро настраиваются, но дают только стратегии по правилам; Hummingbot даёт глубокую настройку, но требует своего сервера, командной строки и программирования. Позиционирование Robotter — глубина настройки Hummingbot при доступности облачного сервиса. Диаграмма сравнивает Robotter, Hummingbot и облачные сервисы по простоте, работе в облаке, настройке стратегий и обучению ML-моделей

Персона Alessandro, криптотрейдер: «Let me focus on trading strategy, not DevOps», боли и ожидания. Ниже путь пользователя — обзор, новая модель, обучение, бэктест, подключение биржи, торговля — и информационная архитектура платформы

Процесс: скетчи экранов от руки, серые вайрфреймы дашборда, таблиц и бэктеста, общий вид макетов в Figma

Исследования и выводы: интерактивные прототипы ключевых сценариев и модерируемые UX-тесты по 5–7 участников за раунд. Пользователи терялись при создании модели — отсюда мастер из пяти шагов: датасеты, индикаторы, параметры, временные окна, оплата. Ниже его экраны

AI-чат, простой режим и подсказки: экран дополнительных настроек стратегии, подсказка к переключателю Kill switch, переключатель Easy / Advanced и диалог с AI-ассистентом, который предлагает Take Profit и Stop Loss и спрашивает разрешения их применить

Финальные экраны: дашборд портфеля, список обученных моделей, настройка стратегии, обучение модели, результаты бэктеста, история стратегий, список торговых ботов и экран бота с ордерами

Дизайн-система: типографическая шкала на Inter — заголовки пяти уровней, абзацы, кнопки и подписи с кеглями и интерлиньяжами

Дизайн-система: палитра — акцентные, нейтральные, синие цвета и цвета состояний с HEX-кодами

Компоненты: кнопки трёх видов в обычном, наведённом и заблокированном состоянии, карточки ботов, поля ввода в состояниях по умолчанию, наведения, фокуса, блокировки и ошибки, календарь

Что бы сделал иначе. Тёмная тема с самого начала: криптотрейдеры живут в тёмных интерфейсах — TradingView, Binance, командная строка, децентрализованные биржи; светлая тема шла против привычки и, вероятно, стоила продукту части аудитории. Слева — дашборд в тёмной теме. Копитрейд как вход для новичков: вместо настройки ML-модели — скопировать проверенную стратегию в один клик. Справа схема: из обзора в торговлю через новую модель или напрямую через копитрейд

Отзыв Майка, CEO Robotter, с его портретом: «Nikita has been essential in leading our UI design and guiding our product research efforts, making highly technical topics accessible for everyday users.»

Результат

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

Майк, CEO Robotter, в отзыве на Behance: «Никита сыграл ключевую роль: вёл наш UI-дизайн, направлял продуктовые исследования и делал сложные технические темы понятными обычным пользователям».

AI в работе

Здесь AI не в процессе, а в продукте, и это разные вещи. В 2024 году я не собирал интерфейсы нейросетями — я проектировал интерфейс к нейросети: как AI-чат предлагает, как спрашивает разрешения, как пользователь спорит с его выводом и правит руками, что делать, когда всё пошло не так.