Logo
Главный дашборд: ключевые метрики, тренды и инсайты по денежным потокам.

AxiomLens – Финансовая аналитика для малого бизнеса

Четкий план действий из разрозненных данных

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

Перейти к визуалам

Проект в двух словах

Моя роль

Концепт продукта, UX/UI-дизайн, UX-исследования, паттерны взаимодействий, информационная архитектура, микротексты, основы визуальной дизайн-системы

Сроки

~2 недели вечерней работы – от первых набросков до выверенных hi-fi-экранов

Инструменты

Figma, Google Sheets & Docs, Notion, ChatGPT, UX Pilot

UX дашборда Насыщенный данными UI Исследования Брендинг Финансовый SaaS Базовая дизайн-система Микротексты (EN)

Вызовы

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

Задача

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

Мои основные достижения

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

Результаты

  • Консистентный набор из 4 hi-fi-экранов, готовых к передаче в разработку или прототипированию
  • Информационная архитектура, связывающая денежные потоки, счета и ИИ-инсайты
  • Базовый набор дизайн-системы (типографика, сетка, карточки, бейджи, стили)
  • Кейс о постановке задачи, ключевых дизайн-решениях и бизнес-ценности продукта

Проблема и контекст

Отправная точка

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

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

Основные вызовы

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

Критерии успешного интерфейса

  • Главный экран должен отвечать на три простых вопроса:
    - «Как сейчас обстоят дела?»;
    - «На что нужно обратить внимание?»;
    - «Есть ли на горизонте риски?»
  • Риски – кассовые разрывы, просроченные счета, крупные предстоящие расходы – сгруппированы в блоках и не спрятаны за фильтрами.
  • Даже самые плотные таблицы и графики остаются легкими для восприятия за счет расположения элементов, цветовой палитры и узнаваемых паттернов.

Ограничения концепта

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

Пользователи и задачи

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

Занятой владелец малого бизнеса

Guy avatar

Геннадий, 33

Владелец небольшой креативной студии

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

Какие сведения нужны моментально

  • Закрыты ли ближайшие 2-4 недели (аренда, зарплаты, базовые расходы).
  • Какие счета просрочены, на какую сумму, и как это влияет на текущий месяц.
  • Быстрый экран «сейчас + перспектива» без еженедельного перелопачивания таблиц.

Болевые точки

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

Консультант-фрилансер

Max avatar

Мин, 29

Консультант с несколькими постоянными клиентами

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

Какие сведения нужны моментально

  • Список регулярных счетов и «дыры» в будущих поступлениях.
  • Разбивка по клиентам и проектам, чтобы понять, кто приносит львиную долю выручки.
  • Подсказки выставить счет или напомналку клиенту до неловких задержек.

Болевые точки

  • Нет единого места, где видны будущие поступления и кэшфлоу целиком.
  • Слабые месяцы становятся сюрпризом: проблемы заметны только когда на счете уже мало денег.
  • Мысли «а отправила ли я тот счет?» по ночам, приводящие к частой фоновой тревоге.

Цели дашборда и дизайна

Цели пользователей

  • Видеть текущую ликвидность и 30-45 ближайших дней в одном экране.
  • Замечать просроченные и проблемные счета без копания в почте и таблицах.
  • Понимать, что двигает тренд вверх или вниз – конкретные клиенты, месяцы или счета.
  • Быстрые решения: инвестировать, отложить или поторопить оплату.
  • Экспорт обзора для бухгалтера, сооснователя или партнеров.

Принципы продукта и UX

  • Превратить разрозненные финансовые данные в один надежный рабочий экран, а не стену из графиков.
  • Подсвечивать риски чистой, легко считываемой визуализацией.
  • Держать навигацию интуитивной: от дашборда к деталям за 1-2 клика.
  • Проработать флоу, которые позже масштабируются на налоги, подписки и более глубокие AI-инсайты без переделки ядра.

Ключевые экраны

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

Главный дашборд. Общий обзор денежного потока: ключевые метрики, тренды и AI-инсайты в одном окне.
01 · Главный дашборд

Экран для ежедневной работы + знакомство с продуктом

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

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

Ключевые решения:

  • Карточки метрик по доходам, расходам, чистой прибыли и налогам плюс короткие заметки о тренде к прошлому месяцу дают быстрый срез ситуации.
  • Обзор денежного потока показывает, как вы пришли к текущему состоянию за выбранный период, и дает простой переход к полной картине.
  • Панель AI-инсайтов простым языком подсвечивает риски и возможности и включает прямые ссылки на нужные экраны.
  • Таблица последних счетов отражает текущую картину по клиентам и суммам с понятными статусами и действиями в один клик.
  • Темный, спокойный интерфейс с плотной сеткой и сдержанными цветами делает насыщенные данные читаемыми, не превращая экран в торговый терминал (а еще он круто выглядит).
Обзор денежного потока. График притока и оттока с фильтрами и карточками инсайтов – что изменилось и за счет чего.
02 · Обзор денежного потока

Вгзляд на динамику дает понимание, что за ней стоит

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

Ключевые решения:

  • График с единой шкалой и легкой сеткой показывает приток и отток рядом – тренды и провалы видны сразу.
  • Фильтры по счету, году и кварталу/месяцу отвечают на вопросы типа «Каким был Q4 по основному счету?» без перехода на другие экраны.
  • Карточки под графиком переводят цифры на понятный язык: когда сезонный всплеск, где можно сэкономить и какие счета уже тянут квартал вниз.
  • Минимум интерфейсного шума вокруг графика – второстепенные действия вроде «экспорта отчета» убраны в сторону, но всегда под рукой.
Список счетов. Плотная, но понятная таблица со статусами, быстрыми действиями и карточками инсайтов для работы с длинной историей.
03 · Счета

Рабочая лошадка любого самозанятого

Здесь Геннадий и Мин управляют входящими платежами. Экран совмещает ключевые метрики по счетам с плотной, но читаемой таблицей, так что за несколько секунд можно перейти от «Сколько денег зависло в счетах?» к «За какие взяться в первую очередь?».

Ключевые решения:

  • Карточки сверху дают быстрый обзор: всего выставлено, оплачено, просрочено и какая средняя задержка оплаты.
  • Фильтры по статусу, счету и году позволяют быстро сузить список без перехода на другой экран.
  • Аккуратная таблица счетов удобна для быстрого просмотра и сортировки даже длинной истории..
  • Действия прямо в строке таблицы позволяют выполнить типовые задачи в один клик без необходимости копаться в меню.
Детали счета. Оверлей с данными клиента, разбивкой по позициям, итогами и наглядной лентой оплаты.
04 · Детали счета

Детали счета под рукой, без потери фокуса

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

Ключевые решения:

  • Оверлей поверх списка оставляет пользователя в разделе счетов, а не уводит на отдельную страницу.
  • Блок клиента (контакты и адрес для выставления счета) расположены наверху для удобной быстрой сверки.
  • Блок с суммами явно разводит нетто, НДС и итог – так сложнее неправильно прочитать сумму.
  • Лента истории когда счет создан, отправлен, просмотрен и оплачен – поэтому «мы ничего не получали» будет гиблой отговоркой, если и клиент и специалист работают в AxiomLens.

Логотип и айдентика

Для финансового продукта доверие часто начинается с логотипа. Внятная айдентика сглаживает многие шероховатости ранних версий, а неуклюжая – легко делает даже неплохую концепцию любительской еще до первого клика. Для AxiomLens нужно было решение, которое ощущается аналитичным и современным, намекает на «умную» помощь ИИ, но при этом в первую очередь воспринимается как финансовый инструмент. Само название уже задает направление: «Axiom» – как опора на надежную истину, «Lens» – как способ смотреть на данные под увеличением. Эскизы ниже показывают путь от довольно общего знака в духе «AI + диафрагма» к более приземленному символу на основе графиков, который лучше отражает суть продукта (хотя до идеала ему еще далеко).

Что стоит за брендом

  • Финансовая ясность. Достаточно серьезный, чтобы доверить ему финансы, но без образа спекулятивного трейдинга или криптоплощадки.
  • Умный, но не Sci-Fi. Легкий намек на ИИ и автоматизацию, без превращения логотипа в иконку очередного гаджета.
  • Устойчивый и приземленный. Четкая геометрия и сетка в основе, чтобы считывались структура, надежность и долгая жизнь продукта.

Логика наименования

  • Axiom – опорное утверждение, надежная база для решений.
  • Lens – фокус и ясность, прямая метафора того, что мы поможем смотреть вперед.
  • AxiomLens считывается как «надежные цифры, которые видно ясно».

Эволюция логотипа

Диафрагма камеры плюс дорожки «платы» – попытка скрестить образ линзы с ощущением умной системы
Итерация 2: тот же знак с горизонтальным логотипом – лучше смотрится в заголовках и на белом фоне
Иконка на основе графика на темном фоне: финансовый смысл читается, но выглядит немного агрессивно
Логотип шрифтом Electrolize сохраняет легкий техно-оттенок, палитра стала мягче

Процесс дизайна и итерации

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

От сценариев к финальному дашборду

  1. Карта сценариев и логика вайрфреймов. Сначала я свел ключевые зоны – денежный поток, счета, клиенты, расходы, налоги, инсайты, настройки и мобильную версию – в один общий поток вайрфреймов. Это помогло зафиксировать, какие экраны вообще нужны, как они связаны и на какие вопросы отвечает каждый.
  2. Lo-fi макет с помощью AI. Опираясь на карту сценариев как на бриф, я собрал грубый lo-fi вариант главного дашборда, чтобы проверить плотность информации: какие метрики заслуживают место в верхней части экрана, что можно отправить на второй план и сколько контента вообще поместится на один экран, не превращаясь в кашу.
  3. Hi-fi итерации и работа с иерархией. На этапе hi-fi я перепробовал несколько вариантов расстановки акцентов между быстрым обзором, блоком счетов и графиками. В одних макетах добавлял больше градиентов и глубины, в других – делал подачу более плоской и почти журнальной, чтобы продукт казался спокойным, но при этом оставался премиальным инструментом.
  4. Юзабилити-тесты и обратная связь. Я провел десять удаленных сессий с немецкими фрилансерами, давая им поработать с интерактивным прототипом. Мне было важно увидеть, насколько естественно им даются ключевые сценарии и где появляются непонятные места, тупики в навигации или перегрузка информацией – еще до того, как фиксировать финальное направление. По их комментариям я поменял расположение AI-инсайтов, усилил контраст статусов и смягчил палитру.
  5. Переход к финальному макету. Итоговый дашборд собирает сильные стороны прошлых версий: более наглядный блок со счетами, информативную сводку наверху, последовательные роли цвета и более живой ритм между карточками, графиками и таблицами.

В итоге главный экран работает просто и предсказуемо: на нем нет элементов «для галочки», навигация остается короткой, а та же структура без проблем выдержит и будущие экраны.

От карты сценариев к финальному дашборду

Первая итерация: карта экранов по ключевым разделам AxiomLens, основа первого lo-fi дашборда и навигации.

Основы дизайн-системы

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

Типографика

  • Читается под нагрузкой. Кегли выдерживают соседство с плотными таблицами и графиками.
  • Двухуровневая иерархия. Заголовки ведут взгляд, подписи и подсказки не отвлекают.
  • Моноширинные акценты. Точечно для выровненных сумм и «кодовых» деталей.

Цвет и поверхности

  • Темный фон. Современно, удобно для долгой работы и помогает линиям графиков выделяться. Светлая тема тоже в планах!
  • Мягкие оттенки синего. Акценты выглядят аналитично и спокойно, избегая крикливый «growth»-хайп.
  • Рамки вместо теней. Минимальный объем, чтобы внимание оставалось на данных.

Отступы и ритм макета

  • Единый масштаб. Общая система отступов и размеров в разных секциях и компонентах делает продукт цельным.
  • Структура вокруг карточек. Плотные данные разбиты на понятные, «дышащие» модули.
  • Чистые края. Сильные внешние отступы не дают дашборду захламиться и сохраняют ощущение продуманной компоновки.

Базовые компоненты

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

Карточки метрик. Для доходов, расходов, прибыли, налогов и показателей по счетам. Один шаблон: подпись, главное число, небольшой тренд или дельта и иконка.
Статусные ярлыки. Обозначают состояние оплаты и инсайтов. Одна палитра в таблицах и карточках помогает быстро запомнить значения цветов.
Карточки AI-инсайтов. Более содержательные блоки: иконка, короткий заголовок, пояснение и понятное действие. Они превращают сырые данные в точечные советы.
Набор иконок. Используется в навигации, метриках и действиях. Толщина линий и скругления совпадают с остальным UI, поэтому иконки поддерживают иерархию.

Следующие шаги

AxiomLens пока остается концептом. Чтобы превратить его в рабочий инструмент, понадобилась бы полноценная команда: разработчики, специалисты по данным и AI, эксперты по безопасности и комплаенсу, налоговые юристы и нормальная служба поддержки. Тем не менее, вопрос «что дальше?» предлагает полезное упражнение. Если развивать AxiomLens далее, я бы сосредоточился на следующем:

  • Светлая и темная темы. Темный режим – вариант по умолчанию, но будет создана светлая тема и автопереключение по системным настройкам. Современные браузеры уже поддерживают это, поэтому макет и цвета должны одинаково хорошо работать в обоих режимах.
  • Работа с разными валютами и НДС. Важно для предпринимателей, которые работают с разными странами: один экран, где суммы, ставки НДС и налоговые правила приводятся к общей картине по всем юрисдикциям.
  • Командный режим. Роли и права доступа для ситуаций, когда за денежным потоком следит не один человек – основатели, ассистенты или внешние бухгалтеры в общем рабочем пространстве.
  • Более глубокие интеграции с банками. Сначала – простые встроенные импорты банковских выписок и счетов, потом – прямые интеграции с ключевыми EU-провайдерами (Stripe, PayPal, SEPA, локальные банки), чтобы пользователям не пришлось сверять цифры вручную.
  • Разные типы аккаунтов. Полноценный режим для владельцев бизнеса и более легкий – для клиентов: общение, просмотр и оплата счетов.
  • Налоговый раздел. Отдельная зона, где видно, какие налоги применяются, по имеющимся данным считается примерная ставка и показываются ключевые дедлайны и напоминания по каждой стране или региону.

Уроки

В своей работе над AxiomLens я ставил целью не просто «нарисовать красивый дашборд», а разобраться, что на самом деле делает финансовый инструмент удобным и внушающим доверие. Вот несколько вещей, которые мне особенно запомнились:

  • Сначала вопросы, потом экраны. В какой-то момент я перестал думать «какие еще фичи еще добавить?» и начал спрашивать себя: что юзеру важнее всего понять за первые 30 секунд? Лишний UI сам отвалился. Так стало гораздо проще решить, что должно быть в верхней строке, а что можно спокойно увести в детали.

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

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

  • Бренд и продукт должны говорить об одном и том же. Ранний логотип «диафрагма + платы» выглядел остроумно, но считывался как абстрактный AI-сервис. Переход к более явно финансовому символу сразу выровнял ожидания: еще до текста людям было понятно, с каким типом продукта они имеют дело.

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