От сложной аналитики к понятному UI: FinTech-сервис с AI во главе

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

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

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

Задачи и вызовы проекта:

[1] Спроектировать с нуля торговую платформу с интуитивной логикой и понятной структурой

[2] Сделать акцент на AI-трейдинг, но не обойти стороной традиционные инструменты: спот, маржинальная торговля, бинарные опционы

[3] Встроить систему персональной поддержки: менеджер, чат, демодоступ

[4] Продумать плавный UX от лендинга до платформы

[5] Создать визуально привлекательный интерфейс, способный работать на имидж компании и доверие пользователей

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

Из бизнес-описания существовала только идея AI-бота и персонального менеджера. Остальные элементы платформы — режимы торговли, работу с пользователями, структуру интерфейса — нужно было определить «с нуля». На этом этапе мы зафиксировали все пожелания и гипотезы команды клиента, а также первичные выводы из анализа конкурентов, чтобы перейти к систематизации сценариев.

Чтобы снять абстрактность и перейти к предметному проектированию, создали нестандартную карту пользовательских историй:

• Сначала была сформирована первичная архитектура платформы с выделением основных разделов и зон ответственности

• Затем мы собрали пользовательские задачи и идеи, которые прозвучали в ходе обсуждений и анализа, и оформили их в виде User Story

• К каждой User Story расписали конкретные функции, чтобы обозначить, какой функционал должен решать какие задачи и зачем он вообще нужен

Это стало основой для согласований и дискуссий с заказчиком: ненужное убирали, дублирующее — объединяли, противоречивое — пересматривали. На этом этапе в ходе обсуждения также появилось много новых идей.

На основе пользовательских историй и разделов платформы, собранных на этапе user story map, мы сгруппировали функциональность по ключевым пользовательским сценариям. А дальше разнесли их по соответствующим разделам. Так появилась внешняя информационная архитектура, удобная для пользователя (без учета backend-структуры), и сформировалось дерево разделов со сценариями, которое легло в основу проектирования.

Затем мы начали проектировать пользовательские сценарии на основе информационной архитектуры. Вместо классического подхода «один сценарий — одна карта» мы выбрали комплексный task flow для каждого раздела платформы. Это было осознанным решением, обусловленным спецификой проекта и высокой взаимосвязью задач внутри разделов.

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

Что было сделано:

• Создано 4 комплексных task flow — по каждому из ключевых разделов платформы

• Каждая карта охватывает всевозможные сценарии в рамках раздела, включая альтернативные, вспомогательные и аварийные пути

• Проработаны точки перехода между сценариями, чтобы избежать изолированных тупиковых веток

• Продуманы решения для типовых ошибок пользователя и системных сбоев — чтобы обеспечить полноценный пользовательский опыт даже в нестандартных условиях

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

В результате мы получили чёткий функциональный каркас, на основе которого можно было строить архитектуру платформы и переходить к UX-дизайну. Это был принципиальный этап, который помог избежать хаотичного и нелогичного проектирования интерфейсов. Решение идти этим путём было нашим профессиональным выбором — осознанно более долгим, но стратегически выверенным.

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

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

Структура экранов строилась с учётом:

• проработанной карты архитектуры и task-flow

• общепринятых UX-паттернов в трейдинговых и AI-сервисах

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

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

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

• соответствует ожиданиям целевой аудитории — пользователям трейдинговых платформ

• поддерживает функциональность

• усиливает доверие к продукту за счёт визуальной стабильности и чистоты

• формирует уникальную визуальную идентификацию сервиса среди конкурентной среды

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

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

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

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

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

Такая система помогает собирать интерфейс как конструктор: на этапе отрисовки экранов мы использовали уже готовые блоки, а не придумывали всё заново для каждого экрана.

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

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

Каждый экран разрабатывался с учётом:

• заложенной концепции

• проектных решений

• лучших UX/UI-практик

• сценариев взаимодействия

• баланса между функциональностью и эстетикой.

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

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

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

Мобильная часть проекта строилась на основе гайдов GMD и HIG с соблюдением всех нативных паттернов. Основные визуальные и UX-решения оставались прежними, а концепция сохранялась.

Здесь важно было:

• адаптировать структуру и дизайн под меньшие экраны

• сохранить логику взаимодействия

• учесть сценарии касания, жестов и прочих мобильных особенностей

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

Одним из новых вызовов стало создание светлой темы интерфейса. Изначально это не входило в изначальный объём задач, но благодаря гибкому подходу (Agile) и работе по спринтам мы легко масштабировали дизайн-систему и адаптировали интерфейс под новую визуальную схему.

Было создано ещё около 300 экранов (мобайл + десктоп) — уже с учётом светлой темы. Главная задача заключалась в том, чтобы интерфейс выглядел чисто, лаконично и функционально без визуального шума. Светлая тема требовала особого внимания к балансу между контентом и UI: легко потерять чёткость, если цвета и контрасты подобраны неправильно.

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

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

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

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

От бизнес-идеи до логичного интерфейса: итоги и ключевые аспекты проекта

[1] Глубокая предпроектная аналитика: разобрали бизнес-задачи, рынок, конкурентов и целевую аудиторию, поэтому заложили прочный фундамент для всех решений.

[2] Системный подход к дизайну: проект строился на последовательном проектировании и дизайн-системе: от токенов и атомов до масштабируемых компонентов — это обеспечило консистентность и гибкость интерфейса

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

[4] Итерационная работа по спринтам: гибкий процесс разработки с возможностью быстро адаптироваться к изменениям — например, при появлении новых разделов и сценариев.

[5] Максимальная детализация интерфейсов: отрисованы все состояния — от рабочих экранов до системных ошибок. Это упростило разработку и обеспечило предсказуемость поведения.

[6] Баланс между функциональностью и эмоцией: интерфейс не только удобен, но и вызывает доверие: рациональные решения сочетаются с визуальной выразительностью, что делает взаимодействие с продуктом комфортным и уверенным.

[7] Гибкое масштабирование без потери качества: Благодаря логике и структуре решений проект легко масштабировался — как по функциям, так и по визуальным темам.