Research Portal
- Категория
- UX/UI, Frontend
- Год
- 2024-2026
- Страна
- Кипр
- Навыки
- Product Design, Data Visualisation, Figma, Adobe, React, Next.js, TypeScript, Vite, TanStack Query, Node.js / Express, Puppeteer, Chart.js, Docker, Vitest / Playwright
Комплексный продуктовый дизайн и frontend-реализация клиентской SaaS-платформы в сфере финтеха. Для реализации проекта был спроектирован полный пользовательский путь в Figma, была создана библиотека переиспользуемых UI-компонентов и был разработан весь frontend на React и TypeScript для поиска компаний, заказа исследований, управления отчётами, подписками и операциями на вторичном рынке. Проект также включал модульную дизайн-систему и набор компонентов для генерации сложных инвестиционно-аналитических PDF-отчётов.
Arcanis Client Portal — финтех-продукт для поиска частных компаний, заказа индивидуальных инвестиционных исследований, управления отчётами, работы с возможностями вторичного рынка и анализа данных с помощью ИИ.
Mobile UX для платформы
Платформа сохраняет сложные пользовательские сценарии удобными на мобильных устройствах: статус отчёта, ключевые данные компании, действия с исследованием, шаринг, скачивание и AI-чат остаются под рукой.
PWA поддержка и кэширование в runtime помогают приблизить портал к опыту, схожему с установкой приложения, а не просто к странице с адаптивностью.
Я разработал дизайн-систему на основе токенов, охватывающую базовые и семантические цвета, типографику, отступы, интерактивные состояния и адаптивное поведение. Компонентная библиотека включала как базовые элементы управления, так и сложные продуктовые компоненты: карточки компаний, финансовые блоки, паттерны фильтрации, состояния доступа и сценарии заказа исследований для desktop- и mobile-интерфейсов. Затем система была перенесена в переиспользуемые React-компоненты, что позволило сохранить согласованность между библиотекой в Figma и production-интерфейсом.
Главная дизайнерская задача заключалась в том, чтобы организовать плотные финансовые данные и многоэтапные сценарии, не делая продукт фрагментированным или излишне техническим. Я проработал полный пользовательский путь в Figma, определил адаптивное поведение и состояния интерфейса, а также создал библиотеку компонентов, которая обеспечила единообразный опыт на desktop- и mobile-устройствах.
Я также разработал весь клиентский frontend на React и TypeScript, преобразовав систему из Figma в переиспользуемые production-компоненты и адаптировав сложные сценарии для desktop- и mobile-версий.
PDF-генератор был разработан как отдельная переиспользуемая система. Я спроектировал его визуальную структуру и создал соответствующие компоненты на React и Next.js для насыщенных данными инвестиционно-аналитических отчётов формата A4 под вывод на печать, включая графики, финансовые блоки, таблицы с пагинацией и специальные печатные макеты, рендеринг которых выполнялся через headless Puppeteer.
Главная задача дизайна заключалась в том, чтобы сделать плотные инвестиционные данные и многоэтапные исследовательские сценарии понятными, последовательными и управляемыми, не сокращая при этом глубину и функциональность продукта.