Research Portal
- Category
- UX/UI, Frontend
- Year
- 2024-2026
- Country
- Cyprus
- Skills
- Product Design, Data Visualisation,Figma, Adobe, React, Next.js, TypeScript, Vite, TanStack Query, Node.js / Express, Puppeteer, Chart.js, Docker, Vitest / Playwright
End-to-end product design and frontend implementation for a client-facing SaaS fintech platform. I designed the complete user journey in Figma, created a reusable UI component library, and built the entire React/TypeScript frontend for company discovery, research ordering, report management, subscriptions, and secondary-market workflows. The project also included a modular design and component system for generating complex investment research PDFs.
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.
Mobile UX for research workflows
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.
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.
The design challenge was to organise dense financial data and multi-step workflows without making the product feel fragmented or overly technical. I mapped the complete user journey in Figma, defined responsive behaviour and interface states, and built a component library that kept the experience consistent across desktop and mobile.
I also built the entire client-facing frontend in React and TypeScript, translating the Figma system into reusable production components and adapting complex workflows for both desktop and mobile.
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.
The main design challenge was to make dense investment data and multi-step research workflows feel clear, consistent, and manageable without reducing the depth or functionality of the product.