Northgate Capital B2B Client Operations Portal

Project Title: Northgate Capital B2B Client Operations Portal

Client / Niche: Northgate Capital (B2B Financial Services & Tech Integration)

Industry: Financial Tech / Enterprise Project Management

Role: Lead UI/UX Designer & Systems Integration Architect

Tech Stack: React, Tailwind CSS, Dark Mode UI System, Custom Metric Tracking Components

Key Metric Target: Streamline milestone approvals, document sign-offs, and live project tracking for high-ticket clients

Northgate Capital required a centralized, secure B2B client dashboard to manage multi-phase systems integration and data migration projects. Enterprise clients needed full visibility into progress metrics, task approvals, pending deliverables, and billing status without relying on fragmented email threads. We designed and engineered a unified, dark-mode operations portal that gives enterprise stakeholders real-time transparency into every project milestone.

Opaque Progress Tracking: B2B technical projects (like legacy data migrations and CRM pipeline setups) often feel like a black box to non-technical client executives.

Friction in Sign-Offs: Delays in approving deliverables (such as data schemas or discovery reports) stall project momentum and create billing bottlenecks.

Fragmented Communication: Managing documents, invoices, and activity logs across separate tools increased administrative overhead and missed deadlines.

Real-Time Progress Bar: Displays overall project completion percentage (e.g., 68% complete) alongside phase breakdowns (Discovery & Audit, Architecture & Data Model, Systems Integration, Enablement & Handover).

Open Approvals & Documents Overview: Instant top-level counters displaying pending approvals, active documents, and outstanding invoices ($20,500+).

Deliverable Status Badges: Uses clear visual status tags (Approved, Pending Review, In Progress) for major deliverables like CRM pipeline configurations and attribution dashboards.

Direct Sign-Off Action: Enables client managers to review and approve technical deliverables directly inside the interface to unlock subsequent project phases.

Multi-Format Upload Zone: A dedicated, secure container for dropping compliance files, data schema sheets, and logs (supporting PDF, XLSX, CSV, ZIP up to 50MB).

Chronological System Logs: Displays a time-stamped feed of critical actions (e.g., uploaded test logs, approved deliverables, issued invoices) to maintain complete operational transparency.

Color Palette: Deep slate canvas (#090A0F) paired with high-contrast slate cards (#12151E), electric blue progress indicators (#2563EB), and status pills (Emerald Green for Approved, Amber for Review).

Typography & Layout: Clean hierarchy with high legibility for dense technical data, micro-interactions for button hover states, and smooth collapsible navigation.