English
Контакты
Москва
Серебряническая наб., 29
+7 (495) 108-24-49
Кемерово
Ноградская, 5, офис 404
+7 (3842) 65-04-90
Digital-агентство
Мэйк

Fibell

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

О сервисе

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

  • 280 часов проектирования интерфейсов
  • 360 часов дизайна
  • 2 дизайн-концепции и 143 дизайн-макета

Рынок криптовалюты существенно отличается от других валютных рынков прежде всего тем, что тут все как бы неофициально. Криптовалюта на данном этапе своего развития ничем не подкреплена и за ней никто не стоит (ни государство, ни другие структуры). Однако, это вовсе не мешает миллионам людей неплохо зарабатывать на биткоинах, лайткоинах, эфирах и других криптоденьгах.

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

У инвестора же есть свои сложности – найти толкового трейдера, который не только не просадит деньги, но и будет стабильно генерировать доход. Помимо поиска трейдера важно контролировать все движения по счету в режиме 24/7.

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

Разработка пользовательских сценариев

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

Кроме того, примеров из отрасли не было. Если сегодня вы соберетесь делать сервис для управления инвестициями, то увидите, что заказчики обозначают свои требования так: «Сделайте нам, как у Тинькофф Банка, АльфаБанка или БКС». Если нужно написать торговый клиент для криптотрейдеров, можно изучить интерфейсы криптобирж. Увы, для управления несколькими криптокошельками таких бенчмарков на российском рынке не было, а западный опыт оказался не слишком удачным с точки зрения UX. Поэтому все бизнес-кейсы мы разрабатывали вместе с заказчиком с нуля.

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

Проектирование интерфейсов сервиса

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

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

Прототипы интерфейса мы разрабатывали в Axure. Программа позволяет генерировать для проекта одну ссылку, раздать её команде и по необходимости «заливать» в облако наработки. Комментарии к прототипу можно оставлять тут же. Команда со стороны заказчика была распределенная, эти возможности очень облегчили совместную работу.

Список ордеров

На примере одного из разделов представим то, как проходил процесс проектирования и дизайна. Мы долго ломали голову над отображением списка ордеров. Есть два типа ордера – те, которые выполняются сразу и отложенные (ордера, которые исполняются позже, по достижению определенных условий). Отложенные ордера какое-то время являются активными, а после выполнения становятся завершенными.

Логично, что необходимо хранить и активные, и завершенные ордера, чтобы трейдер мог их периодически отсматривать.

Осталось решить несколько вопросов:

  • В каком разделе их размещать? Будут ли они мешать на странице создания ордеров или наооброт, будут «под рукой»?;
  • В каком виде представлять? Удобнее сделать подробный список или краткий с карточкой каждого ордера по клику?

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

Проектирование списка ордеров

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

Задачу решили так: объединили три таблицы с разным набором полей в один блок, таблицы открываются при клике на табы. При клике на ордер открывается страница-всплывашка с подробной информацией о нем.

Также нам требовалось добавить элементы управления для активных ордеров – редактирование, отмена. На этапе прототипа мы разместили их тут же, в списке, поскольку требовалось сделать массовое редактирование. 

Дизайн списка ордеров

После разработки дизайна страницы стало понятно, что торговый терминал слишком перегружен информацией. Это подтверждали юзабилити-тесты трейдеров. Поэтому было решено все-таки переместить список ордеров на отдельную страницу «Ордера». Табы сделали в виде фильтров и разместили их справа. Всплывающая страница с подробной информацией об ордере осталась, единственное улучшение – добавили график визуализации профита ордера.

В списке ордеров тоже произошли некоторые изменения: заказчик отказался от функционала массового редактирования ордеров, поэтому редактирование перенесли на страницу ордера.

Дизайн сервиса

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

Клиенту были представлены две дизайн-концепции. Первый концепт был основан на персонализации контента и визуала для двух групп пользователей – трейдера и инвестора. Для трейдера представили графики и подобные элементы на three.js, для клиента — сферы. Во второй концепции не было креатива, только визуально оформленные данные с прототипа. Клиент утвердил второй вариант.

На основании прототипа, исследований и дизайн-концепции мы разработали 143 макета сервиса и утвердили принципы анимации интерфейса. Для интерфейса было создано более 500 уникальных компонентов.

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

 

Функционал сервиса

  • Торговый терминал для трейдеров: смена бирж и валютных пар, создание и редактирование ордеров для бесконечного количества кошельков и клиентов, стоп и трейлинг-стоп ордера, график курсов валют, торговые стаканы, просмотр активных ордеров и истории ордеров.
  • Глобальный рейтинг трейдеров, составленный на основе их профита и многих других параметров, карточка трейдера с его аналитикой и сделками,
  • Передача счетов в управление трейдеру.
  • Просмотр и копирование ордеров трейдера, отображение ордеров на валютном графике. Пользователь наблюдает за сделками опытных трейдеров и, следуя их примеру, учится выгодно инвестировать сам. 
  • Просмотр подписок на трейдеров, управление подписками.
  • Управление балансом счета, статистика и финансовая отчетность, услуги с автопродлением.
  • Управление биржевыми аккаунтами пользователя. 
  • Отчетность по управлению счетом с визуализацией динамики профита и других параметров, выгрузка отчетности в xls и pdf.
  • Несколько типов уведомлений в telegram, email и личном кабинете, гибкая настройка их отправки. Продуманная система уведомлений позволяет оставаться в курсе действий трейдеров и ситуации на рынке в режиме реального времени.
  • Внешний сайт: главная, трейдерам, тарифы, помощь, блог.

Сроки

Проект стартовал в середине сентября. Ещё на пресейле заказчик обозначил, что аналитику, прототипы и дизайн нужно сделать до конца года. Но на этапе аналитики стало ясно, что объем работы увеличится в три-четыре раза, и до конца года мы не успеем. Не смотря на это мы все-таки попытались сдать проект в желаемые сроки – работали практически без выходных и 30 декабря вечером защитили дизайн-концепцию. Разработку дизайн-макетов пришлось отложить на следующий год, её завершили в конце января. 

Результат

Заказчик был погружен в проект на все 100%. Каждый день появлялись новые идеи, улучшения, изменения, дополнения. Каждый блок был переосмыслен несколько раз. Это несколько усложняло нам жизнь, зато улучшило качество конечного продукта. В процессе разработки мы сами так глубоко погрузились в мир криптовалют, что впору открывать собственный стартап на данную тематику, наш директор даже купил крипты:)

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