Проблема
Разрозненные сценарии поиска компаний, заказа инвестиционных исследований и управления отчётами.
Research Portal
- Год
- 2024-2026
- Страна
- Кипр
- Навыки
- Product Design · Information Architecture · User Flows · Prototyping · Design System · Frontend Implementation
Моя роль
Продуктовый дизайнер + Frontend-инженер. Отвечал за продуктовый дизайн и клиентскую реализацию.
Объём работ
Архитектура продукта · UX/UI · Дизайн-система · Адаптивный интерфейс · Реализация на React · Инструментирование аналитики
Результат
Спроектировал и реализовал основной пользовательский путь: от поиска компаний до заказа исследований, управления отчётами и сценариев вторичного рынка.
Продукт объединяет сложные сценарии работы с инвестиционными исследованиями — от поиска компаний и заказа исследований до управления отчётами и возможностей вторичного рынка. Задача дизайна — сохранить глубину продукта, сделав эти сценарии понятными и предсказуемыми на компьютере и мобильных устройствах.
Ключевые метрики
20+
маршрутов в production
5
продуктовых направлений
3
уровня аналитики и обратной связи
50+
наборов автотестов
Arcanis Client Portal — финтех-продукт для поиска частных компаний, заказа индивидуальных инвестиционных исследований, управления отчётами, работы с возможностями вторичного рынка и анализа данных с помощью ИИ.
ИСХОДНАЯ ТОЧКА
Проект начался с общей концепции, сформулированной руководством и описывающей основные продуктовые направления и связи между исследованиями и портфелями. Моя задача заключалась в том, чтобы преобразовать эти бизнес-требования в понятные пользовательские сценарии, состояния интерфейса и масштабируемую UI-систему.
Эволюция продукта и Итерации
Ранняя версия была построена вокруг каталога исследований в формате карточек, что позволяло быстро просматривать материалы и видеть статус исследования непосредственно в списке. В другом варианте рассматривалось насыщенное аналитическое рабочее пространство, объединяющее данные о компаниях, их оценке, динамике развития и анализе рисков в одном интерфейсе. По мере расширения продукта эти исследования показали необходимость в более понятной структуре, способной поддерживать сложные пользовательские сценарии, состояния и связи между компаниями, исследованиями и отчётами.
Ключевые пользовательские сценарии
Я описал ключевые пользовательские сценарии продукта до уровня целей, условий, основных и альтернативных путей, а также данных и состояний, с которыми работает интерфейс. Это помогло связать отдельные экраны в целостную систему и заранее учесть не только основной путь, но и ошибки, ограничения доступа, нехватку кредитов, незавершённые исследования и другие реальные состояния продукта.
ОТ ИССЛЕДОВАНИЯ К ПРОДУКТОВОЙ СИСТЕМЕ
Финальное направление отошло от плотных, специфичных для отдельных страниц макетов в пользу более модульной структуры продукта, построенной вокруг понятных пользовательских задач. Поиск компаний, заказ исследований, доступ к отчётам и сценарии вторичного рынка были разделены на отдельные сфокусированные процессы с переиспользуемыми паттернами и единообразными состояниями во всём продукте. Такая структура также создала более надёжную основу для адаптивного поведения и масштабируемой дизайн-системы.
Mobile UX для платформы
Платформа сохраняет сложные пользовательские сценарии удобными на мобильных устройствах: статус отчёта, ключевые данные компании, действия с исследованием, шаринг, скачивание и AI-чат остаются под рукой.
PWA поддержка и кэширование в runtime помогают приблизить портал к опыту, схожему с установкой приложения, а не просто к странице с адаптивностью.
Для мобильного экрана я не использовал масштабирование, а перепозиционировал элементы для поддержания удобства работы с интерфейсом.
Масштабируемая дизайн-система
Я разработал дизайн-систему на основе токенов, охватывающую базовые и семантические цвета, типографику, отступы, интерактивные состояния и адаптивное поведение. Компонентная библиотека включала как базовые элементы управления, так и сложные продуктовые компоненты: карточки компаний, финансовые блоки, паттерны фильтрации, состояния доступа и сценарии заказа исследований для desktop- и mobile-интерфейсов. Затем система была перенесена в переиспользуемые React-компоненты, что позволило сохранить согласованность между библиотекой в Figma и production-интерфейсом.
Я занимался как продуктовым дизайном, так и frontend-реализацией, перенося пользовательские сценарии из Figma, интерактивные состояния, адаптивное поведение и переиспользуемые UI-паттерны в production-компоненты на React. Это позволило сохранить согласованность между дизайн-спецификациями и поведением реализованного интерфейса по мере развития продукта.
Дополнительная PDF-система
PDF-генератор был разработан как отдельная переиспользуемая система. Я спроектировал его визуальную структуру и создал соответствующие компоненты на React и Next.js для насыщенных данными инвестиционно-аналитических отчётов формата A4 под вывод на печать, включая графики, финансовые блоки, таблицы с пагинацией и специальные печатные макеты, рендеринг которых выполнялся через headless Puppeteer.
Главная задача дизайна заключалась в том, чтобы сделать плотные инвестиционные данные и многоэтапные исследовательские сценарии понятными, последовательными и управляемыми, не сокращая при этом глубину и функциональность продукта.