Ищете крутые кейсы в digital? Посмотрите на номинантов Workspace Digital Awards 2026!
Kokoc Tech
Как мы превратили сложные финансовые данные в понятные дашборды
Kokoc Tech
#Дизайн сайта#Программирование сайта

Как мы превратили сложные финансовые данные в понятные дашборды

41 
Kokoc Tech Россия, Москва
Поделиться: 0 0 0
Как мы превратили сложные финансовые данные в понятные дашборды
Клиент

NDA

Сфера

Государство и общество

Регион

Швейцария, Zürich

Сдано

Ноябрь 2023

Задача

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

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

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

• оперативно анализировать данные;

• отслеживать динамику изменений;

• быстро выявлять отклонения;

• принимать решения на основе актуальных KPI.

Решение

В рамках проекта было решено:

• разработать систему дашбордов для финансовой аналитики;

• реализовать интерактивную карту и KPI-карточки;

• внедрить наглядную визуализацию и детализацию данных;

• добавить гибкие фильтры и настройки отображения;

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

• настроить роли пользователей и администрирование;

• обеспечить интеграцию и расчеты данных в реальном времени.

1Концепция

Мы стремились превратить набор разрозненных данных в удобный инструмент для анализа и принятия решений.

В основе решения — три ключевых принципа:

• Живые данные

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

• Простота интерфейса

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

• Гибкость контекста

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

2Интерактивная карта

Карта стала центральным элементом дашбордов, позволяя быстро оценить ситуацию по регионам.

Реализованы:

• интерактивная легенда;

• подсветка проблемных зон;

• подсказки при наведении;

• фильтрация по регионам.

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

3Визуализация данных

 Ключевые метрики вынесены в KPI-карточки с отображением динамики и сравнением с предыдущими периодами.

Использованы разные типы визуализации:

• линейные графики — для анализа динамики;

• столбчатые диаграммы — для сравнений по регионам и категориям;

• круговые диаграммы — для отображения структуры распределения средств.

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

4Интерактивность и гибкость

Пользователь может углубляться в данные без потери общего контекста:

• KPI-карточки разворачиваются в полноценные графики;

• доступны виджеты с уточняющей информацией;

• реализована система гибких фильтров.

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

5Темная тема

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

6Личный кабинет и админ-панель

Через административную панель администраторы могут:

• управлять пользователями;

• добавлять и удалять учетные записи;

• настраивать доступ к дашбордам.

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

7Портал сотрудника

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

8Интеграции

Для управления пользователями и доступами реализована интеграция через Django-прокси между frontend и backend клиента.

Это позволило:

• управлять правами доступа к дашбордам и графикам;

• модерировать профили и аватары;

• назначать роли администраторов и модераторов.

9Frontend и работа с данными

С помощью фреймворка Next.js мы настроили расчет ключевых и финансовых показателей, получаемых от клиента, с помощью интерактивных формул.

Расчеты производятся в реальном времени, а алгоритмы адаптируются под изменяющиеся данные, что дает возможность детально сравнивать плановые и фактические показатели.

Результат

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


Стек технологий

  • Django Django Фреймворк/библиотека
  • Vue.js Vue.js Фреймворк/библиотека

Оцените кейс
Спасибо за оценку
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Kokoc Tech с удовольствием обсудит вашу задачу

Оставить заявку