Александр Степанов

Дизайнер

Иксфирм

Редизайн сервиса проверки контрагентов. Новая версия, обогащена данными из открытых источников

Задача

Обогатить сервис данными из открытых источников и занять нишу бесплатных проверок контрагентов

Целевая аудитория

Юрлица которые хотят быстро и бесплатно проверить контрагентов или изучить их подробнее

Роль

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

Дискавери

Аудит

Провел экспертизу предыдущего решения. Выявил основные проблемы и сформировал гипотезы по их улучшению

Большие данные

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

Ресерч

Исследовал рынок и изучил основных конкурентов: их интерфейсы и доступные возможности

МВП

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

Обогащение данными

В МВП взяли алерты, связи и историзмы — опции, которые помогают пользователю быстрее оценить риски

Алерты

Массовые учредители и руководители, налоговые задолженности, дисквалифици-рованные лица и т. д.

Историзмы

Позволяет оценить компанию в ретроспективе

Связи

С другими юридическими или физическими лицами

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

Связи с другими организациями. Проверяем, не связан ли контрагент с фирмами-однодневками или потенциальными конкурентами

Исторические данные о финансах, юр. адресах, предшественниках и т. д. Анализируем компанию в ретроспективе

Графики

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

Детализация

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

Итог

Передал проект в разработку. Следующие шаги: 1) Протестировать МВП на целевой аудитории, собрать фитбэк и двигаться дальше по обогащению сервиса новыми данными; 2) Перейти с библиотеки стилей на переменные; 3) Сделать ночную тему

Переменные

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

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

Иерархия включает 3 уровня переменных:

Глобальные

Им присваиваются все элементарные значения дизайн-системы

Семантические

Их назначение достаточно общее: стили текста, фонов, иконок, бордеров

Компонентные

Они хранят стили конкретного компонента, например, кнопки

Глобальное влияние

Если заменить палитру фирменных цветов на глобальном уровне, это повлияет на стили всего проекта

Среднее влияние

На семантическом уровне можно перекрасить только фоны, сохранив стили текстов иконок и бордеров

Ограничнное влияние

На компонентном — изменить выбранный компонент, никак не повлияв на остальную библиотеку

Ночная тема

Переменной в Фигме можно присвоить несколько значений, в нашем случае нужно два, для светлой и темной тем

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

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

Normal
Hover
Active
Completed