Problem
Investors had to navigate fragmented workflows for discovering companies, ordering custom research and managing purchased reports.
Research Portal
- Year
- 2024-2026
- Country
- Cyprus
- Skills
- Product Design · Information Architecture · User Flows · Prototyping · Design System · Frontend Implementation
My role
Product Designer + Frontend Engineer. End-to-end ownership from UX to production UI.
Scope
Product architecture · UX/UI · Design System · Mobile interaction design · React implementation · Analytics
Outcome
Shipped an end-to-end client portal spanning company discovery, research ordering, report management, AI-assisted research and secondary-market workflows.
The product brings complex financial research workflows into one interface — from company discovery and custom research ordering to report management and secondary-market opportunities. The challenge was to keep this depth clear and predictable across desktop and mobile.
Key Metrics
20+
production routes
5
product areas
3
analytics & feedback layers
50+
automated test suites
Arcanis Client Portal is a fintech product for discovering private companies, ordering custom investment research, managing reports, exploring secondary-market opportunities, and working with AI-assisted analysis.
THE STARTING POINT
The project started from a high-level stakeholder concept describing the main product areas and relationships between research and portfolios. My role was to translate these business-level requirements into navigable product workflows, interface states, and a scalable UI system.
Evolution and Iteration Process
An early version organised research around a card-based catalogue, providing quick scanning and exposing research status directly in the listing. Another direction explored a dense analytical workspace that combined company data, valuation, traction, and risk analysis in a single view. As the scope expanded, these explorations revealed the need for a clearer product structure capable of supporting more complex workflows, states, and relationships between companies, research, and reports.
Key user flows
I mapped the product’s key user flows around goals, preconditions, primary and alternative paths, as well as the data and states behind each interaction. This helped connect individual screens into a coherent system and account not only for happy paths, but also for access constraints, insufficient credits, in-progress research and other real product states
FROM EXPLORATION TO PRODUCT SYSTEM
The final direction moved away from dense, page-specific layouts toward a more modular product structure built around clear user tasks. Discovery, research ordering, report access, and secondary-market workflows were separated into focused experiences, with reusable patterns and consistent states across the product. This structure also created a stronger foundation for responsive behaviour and a scalable design system.
Adapting complex workflows to mobile
Arcanis keeps complex research workflows usable on mobile: report status, key company data, research actions, sharing, downloads, and AI chat stay close at hand.
PWA support and runtime caching help make the portal feel closer to an installable product experience, not just a responsive web page.
Rather than simply scaling desktop layouts down, I reprioritised information and actions for narrow screens while keeping the same product states and workflow logic.
SCALABLE PRODUCT DESIGN SYSTEM
I designed a token-based design system covering primitive and semantic colours, typography, spacing, interaction states, and responsive behaviour. The component library ranged from foundational controls to complex product components, including company cards, financial data blocks, filtering patterns, access states, and research-ordering actions for desktop and mobile. The system was then translated into reusable React components, keeping the Figma library and production interface aligned.
I worked across both product design and frontend implementation, translating Figma flows, interaction states, responsive behaviour, and reusable UI patterns into production React components. This helped keep design specifications and implementation behaviour aligned as the product evolved.
Additional pdf-system
The PDF generator was developed as a separate reusable system. I designed its visual structure and created the corresponding React/Next.js components for data-heavy A4 research reports, including charts, financial data blocks, paginated tables, and print-specific layouts rendered through headless Puppeteer.
I worked across both product design and implementation, which made it possible to carry interaction decisions from early product requirements through reusable UI patterns to production behaviour.