Из MVP в продукт высокого уровня при помощи дизайна: оптимизация интерфейса для финансового проекта

О подходе к дизайн-решениям таблиц, статистики и инфографики, а также инновационном методе управления данными — кейс Uprising, студии дизайна и разработки

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

Заказчик создал MVP платформы для ведения учёта финансов, основной фишкой которого в будущем станет аккредитация программы у различных корпораций поддержки МСП и банков. Говоря иначе, если ваша компания хочет запросить финансовую поддержку, то будущие кредиторы смогут проводить проверку и оценку рисков, исходя из данных по финансовому состоянию, указанных на платформе Startis — помимо удобства программы, это должно послужить дополнительным стимулом к её использованию.

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

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

Startis, будучи классическим миксом из таблиц, инфографики и обширного массива данных, был вдохновлён работами Артёма Горбунова, Олега Пащенко и Ильи Михайлова в бытность их арт-директорами «Студии Артемия Лебедева» и всему лучшему, что было создано под их руководством в период 2003...2010 гг. Творчеством информационных дизайнеров «New York Times», «Washington Post», «Politico», «Reuters» и «Bloomberg». Мы обратились к философии Дитера Рамса, заметкам Ильи Бирмана, советскому энциклопедическому дизайну и, конечно же, Эдварду Тафти, его книгам и видению.

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

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

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

Числовые данные вводятся в четыре таблицы:

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

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

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

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

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

В отличие от Excel, пользователь при интерактивном взаимодеиствии сразу видит, как взаимозависимые параметры связываются и суммируются. Например, в таблице «Движение денежных средств» взаимозависимыми параметрами являются:

Всё вместе:

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

Интерактивная отдача также проработана: строки при наведении выделяются плашками, изменяемые числовые данные подчёркиваются жёлтыми линиями, информеры показывают вложенные сравнительные данные, в некоторых местах всплывают подсказки, рисуются взаимосвязи и зависимости. Здесь ключевым источником вдохновения послужил «Biathlontime» от Ильи Бирмана.

В зависимости от настроек при создании финансовои модели:

Рассчитана техническая возможность импорта числовых данных из Excel. А таблицеи «Технико-экономические показатели» в состоянии «Показывать факт и план совместно» мы реализовали формат классических индикаторов роста и падения в минималистичных биржевых котировках.

В качестве программного фундамента мы использовали Javascript-библиотеку Chart.js. Библиотека работает на основе HTML5, предлагает наиболее популярные типы инфографики с возможностью кастомизации, поддерживает все современные версии браузеров и имеет встроенную анимацию. Проект подробно представлен на Github и работает по принципу open source community.

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

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

Впервые в нашеи практике мы применили принцип редактирования «on spot»: если параметр является textfield, то он подаётся сразу текстом — без полей, рамок или подчёркивании. Аналогичный механизм можно встретить в Notion и Asana. Данныи принцип упрощения в итоге распространился и на другие элементы интерфеиса:

График можно просматривать по месяцам, кварталам и годам; он может быть большим или малым; каждыи параметр может отображать только план, факт, или всё сразу.

У графиков типа «curve» линии могут быть с точками или без точек, полноценными или пунктирными.

А колонки в графиках типа «histogram» могут идти раздельно или же собираться в кластеры, надстраиваясь друг над другом. Всё адаптируется к ширине браузера, расширяется на мониторах и сужается, перестраиваясь, на смартфонах.

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

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

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

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

Как и везде на сайте, данные в профиле меняются на месте — без полей, лишних подчёркиваний и прочего UI/UX-декора.

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