📄 Case Study: Enterprise Client Portal & Project Management Dashboard

Metadata

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

1. Executive Summary

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.

2. The Challenge

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.

3. Key Features & Interface Design

A. High-Level Progress & Milestone Tracker

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+).

B. Interactive Task Approval Workflow

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.

C. Integrated Drag-and-Drop Document Intake

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).

D. Audit-Ready Activity Feed

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.

4. Design System & Tech Specs

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.

5. Key Takeaways & Impact

"By transforming complex technical integration phases into a visual, self-serve client dashboard, Northgate Capital eliminated communication lag, accelerated milestone sign-offs, and established an enterprise-grade experience for high-ticket accounts."