Portfolio case study
Visuioration
An AI-powered visual intelligence platform, designed and built end to end as a working product rather than a set of mockups.
- Role
- Product design, frontend
- Scope
- Marketing site + app
- Stack
- Next.js, TypeScript
- Status
- Working demo
Challenge
Businesses have large amounts of data but struggle to turn it into clear decisions. The gap is not tooling for charts; it is the handoff between analysis, explanation and communication.
Approach
Combine the six stages people normally spread across tools into one connected workspace:
- 1Data ingestion
- 2Visualization
- 3AI-assisted analysis
- 4Dashboard building
- 5Reporting
- 6Sharing
Product architecture
The core story, from the user's point of view: I have data, the product helps me understand it, I visualize it, AI explains what changed, I turn it into a report, and I share it.
Data
Analysis
Visualization
AI insights
Dashboard
Report
Share
Key product areas
Each area is live in the demo. Open any of them in a new tab.
Data workspace
Datasets are profiled on import: row counts, column types, missing values.
OpenVisualization builder
Dimensions and measures on the left, live preview in the centre, configuration on the right.
OpenAI insights
Questions answered with the evidence charts that support them.
OpenDashboard
KPIs with comparison periods, a revenue trend and regional drill-down.
OpenReport builder
Reorderable sections that compose into an executive report.
OpenSharing
A clean public view with presentation mode, separate from the app.
OpenTeam collaboration
Roles, permissions and activity across the workspace.
Open
Revenue
$12.84M
+14.8% vs FY25
Conversion
4.82%
+0.21 pts vs FY25
Customers
68,420
+11.2% vs FY25
Growth
+14.8%
+2.1 pts vs plan
Revenue, FY26
Monthly · orders dashed
| Period | Revenue | Orders |
|---|---|---|
| Jul | $960,000 | 13,933 |
| Aug | $975,000 | 14,110 |
| Sep | $1,000,000 | 14,430 |
| Oct | $1,035,000 | 14,871 |
| Nov | $1,205,000 | 16,877 |
| Dec | $1,340,000 | 18,407 |
| Jan | $950,000 | 13,930 |
| Feb | $1,090,000 | 15,797 |
| Mar | $998,440 | 14,597 |
| Apr | $1,050,000 | 15,152 |
| May | $1,095,000 | 15,733 |
| Jun | $1,141,560 | 16,453 |
Regional performance
Insight · demo analysis
West drove 44% of March's 8.4% revenue dip, led by a 13% fall in orders.
Design principles
- Clarity
- Every chart has a takeaway title and direct labels.
- Hierarchy
- Answer first: KPIs, then trend, then breakdown, then detail.
- Speed
- Keyboard-first command palette and search; server-rendered marketing pages.
- Trust
- Demo data is always labelled. AI answers cite their numbers.
- Actionability
- Insights end in a recommended investigation, reports in next steps.
Technology
- Next.js
- React
- TypeScript
- Tailwind CSS
- Recharts
- Lucide icons
- Demo data architecture
- Vercel-ready deployment
All figures derive from one monthly ledger in /lib/demo-data, and every data call goes through service abstractions in /lib/services that can be pointed at a real API later.
Demo vs production
This portfolio implementation uses demo/local data and simulated services. Sign-in, imports, AI answers, exports and sharing are demonstrations. A production version would connect authentication, databases, cloud storage, AI providers, analytics and enterprise integrations, as described on the technology page. It is not presented as a production enterprise platform.