Horizn

This started as a design exercise for an interview — design an AI-powered platform for finance teams building board presentations. I took the brief further during an AI in UX course, using it to explore how AI tools could accelerate every phase of design, from research through prototyping.

Without access to finance teams for primary research, I used AI tools to build a synthetic research foundation, then critically evaluated the outputs for bias.

Synthetic Survey & Analysis

I designed a 30-question survey targeting finance professionals, then used Gemini and Claude to generate 50 synthetic responses with realistic variation across roles, firm sizes, and experience levels.

Bias-Corrected Personas

Three personas emerged from the corrected data, each with explicit limitations: good for structuring research and brainstorming features, not for precise market sizing or external claims.

Core User Flow: AI Content Generation

I mapped four core workflows as Mermaid diagrams. The AI content generation flow was the most critical — it shows how a user goes from asking a question to getting AI-generated content inserted into a slide with a full audit trail.

flowchart LR
    A["Select Slide\nwith Data"] --> B["Open AI\nAssistant"]
    B --> C{"Request Type"}
    C -->|"Explain Variance"| D["Build Prompt"]
    C -->|"Generate Content"| D
    C -->|"Rewrite/Edit"| D
    D --> E["Query\nSemantic Layer"]
    E --> F["Fetch Current &\nHistorical Metrics"]
    F --> G["Search Prior Decks\nfor Style Patterns"]
    G --> H["Generate Draft\nCommentary"]
    H --> I["Display Draft\nin Chat"]
    I --> J{"User Reviews"}
    J -->|"Accept"| K["Insert into\nSlide"]
    J -->|"Refine"| D
    J -->|"Reject"| L["Discard"]
    K --> M["Create Audit\nTrail Entry"]

    style A fill:#f5f5f0,stroke:#999,color:#111
    style D fill:#f5f5f0,stroke:#999,color:#111
    style H fill:#e8f5e9,stroke:#4caf50,color:#111
    style K fill:#e8f5e9,stroke:#4caf50,color:#111
    style M fill:#fff3e0,stroke:#ff9800,color:#111
        

The synthetic research and competitive analysis converged on four design goals:

The platform has three core screens, each solving a specific stage of the finance workflow.

Dashboard — real-time snapshot of financial health with direct paths to common tasks.

1

Quick Actions

Direct paths to the three most common tasks: creating a deck, updating data sources, and connecting new integrations.

2

Recent Presentations

Surface the most relevant decks with status indicators and one-click access to the editor.

3

Daily Data Brief

Alerts and new data notifications keep users aware of changes that impact their presentations.

Data Sources — connection health visibility for every integration.

1

Connection Health

Real-time status for each integration (Snowflake, Oracle, Salesforce). Error badges with tooltips reveal exact error messages — nothing hidden.

2

One-Click Integration

New sources connect through a modal flow, removing the need for IT tickets. Available integrations show what's possible.

3

Activity Log

Real-time feed of sync events, errors, and schema changes — finance teams can't afford to discover a broken pipeline during a board presentation.

Deck Editor — the core of Horizn, where data, analysis, and presentation converge.

1

Three-Panel Layout

Slide thumbnails for navigation, a center canvas with live-bound charts, and an AI assistant panel — all visible without mode switching.

2

Contextual AI Assistant

Not a generic chatbot. It understands the data context. Ask "Why is revenue up?" and it offers to generate a Variance Analysis slide with data already populated.

3

Live Data Metrics

Charts and KPI cards are connected directly to the data source. Numbers update when the source syncs — no manual refresh.

This project was as much about exploring AI-assisted design as it was about the product itself. The design system was bootstrapped with MagicPatterns, then iterated through two major visual directions before landing on the warm stone palette.

The design system went through two major iterations. V1 (originally called "Farsight") used Deep Forest (#01353C) backgrounds with Bright Blue accents — enterprise-grade but too heavy for long sessions. V2 (renamed to Horizn) landed on warm stone neutrals with Sage green CTAs and Bright Blue reserved for data visualization.

Delivered a functional prototype covering all core workflows: dashboard monitoring, data source management, AI-assisted deck creation, and presentation editing. Built with Next.js, Tailwind CSS, and shadcn/UI — production-grade technology choices that could scale beyond the prototype phase.