Challenge
The existing portfolio material leaned heavily toward public-facing landing pages. I needed a product-facing case study that could show structure, information density, and a more restrained premium tone without feeling like a static dashboard mock.
Role
This prototype was built as a deliberate portfolio piece. The goal was not to invent fictional complexity everywhere, but to prove that I can shape overview, analytics, onboarding, projects, and settings screens with the same attention to hierarchy, product logic, and believable interaction design.
System
The prototype is implemented as a Next.js app with a reusable dashboard shell, shared card language, responsive tables, and local structured data powering selectable states, filters, timelines, and focus panels across the main screens.
Interactions
- The overview screen now reacts to view modes, KPI focus, and workstream selection so the board reads like a living operator surface.
- The projects and onboarding views support real client-side exploration rather than static layout presentation.
- Analytics uses segment switching, comparative reading, and metric focus states to create more believable product depth.
Implementation
- Shared app shell with navigation, status surfaces, and interactive client-side controls.
- Local structured datasets for metrics, workstreams, program states, analytics segments, onboarding steps, and settings.
- Consistent visual system from overview to settings so the prototype feels like one product, not five unrelated screens.
Outcome
- The portfolio gains a clear B2B / SaaS register.
- Prospects can now see both marketing polish and more credible product behavior in the same body of work.
- It creates a ready-made interactive prototype that can evolve into deeper case studies or client-specific product directions.