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

Сложный продукт, сложная задача: с чего всё началось

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

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

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

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

Как разобраться в абстрактном AI-продукте и начать проектировать

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

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

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

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

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

UX в условиях неопределённости: строим сценарии с нуля

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

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

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

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

• Создано 4 комплексных task flow — по каждому из ключевых разделов платформы
• Каждая карта охватывает всевозможные сценарии в рамках раздела, включая альтернативные, вспомогательные и аварийные пути
• Проработаны точки перехода между сценариями, чтобы избежать изолированных тупиковых веток
• Продуманы решения для типовых ошибок пользователя и системных сбоев — чтобы обеспечить полноценный пользовательский опыт даже в нестандартных условиях

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

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

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

Первые контуры продукта: от карты до вайфреймов

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

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

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

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

Поиск визуального языка: как мы подошли к UI

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

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

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

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

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

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

разобрали на атомы: создание дизайн-системы

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

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

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

Основной продукт: десктопный интерфейс под реальные сценарии

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

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

• заложенной концепции
• проектных решений
• лучших UX/ui-практик
• сценариев взаимодействия
• баланса между функциональностью и эстетикой

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

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

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

когда Адаптация под мобильный не просто responsive

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

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

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

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

Светлая тема: как быстро масштабировать дизайн без потерь

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

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

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

Лендинг с эмоцией или визуальный вход в сервис

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

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

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

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

комментарии команды

команда проекта