Loading Case Study Experience...
Private Staging & Codebase
UI/UX Design & Product Development2025Marketing OpsClient PortalRole-Based AccessAsset Proofing
PixelNest Project Manager (MediaNest)
Digital media & agency project management ecosystem isolating internal team noise from client visibility via tokenized magic links.
My Primary RolePrincipal Full-Stack Developer & UX Specialist
Domain & SectorUI/UX Design & Product Development
Timeline / Release2025 · Production
Evaluation Access
01 · Strategic Overview & Problem
The Challenge & Design Objective
The Core Friction
Fast-moving digital agencies struggle with unmanaged feedback loops, disorganized asset versioning, and client confusion when internal rough drafts are accidentally exposed before editorial sign-off.
The UX/UI Solution
Architected a dual-sided portal that isolates internal agency team roles from external client visibility, powered by tab-based task modals, live Supabase synchronization, and tokenized magic links for 1-tap client approval.
My Design & Architectural Responsibilities
Frontend Architect: Built client-side role router and tabbed modal containers to minimize cognitive load.
Data Synchronization: Integrated Supabase client for real-time task status updates and asset comments.
Deployment Optimization: Configured Next.js static export for high-performance deployment on Hostinger.
02 · Target Audience & Empathy Mapping
User Persona & Behavioral Flow
Aarav Mehra
VP of Client Services & Creative Operations, Pulse Agency
“We lost an enterprise account because an intern accidentally shared an unapproved draft with placeholder copy. We need ironclad isolation between internal creative iteration and client review.”
Critical Pain Points & Friction
- Clients getting overwhelmed and anxious seeing preliminary drafts or internal critique comments
- Chasing asset approvals across fragmented WhatsApp chats, Slack threads, and forgotten email threads
- Clients refusing to create agency portal accounts just to review a 30-second campaign reel
Core Goals & Desired Experience
- Enforce strict role-based separation where clients only ever see tokenized, ready-for-review deliverables
- Allow clients to review, comment, and approve assets in under 15 seconds via secure magic links without credentials
- House brief, copy, creative assets, publishing schedules, and live metrics in an ergonomic tabbed modal
End-to-End User Journey Mapping
Phase 1 · Campaign Brief IngestionOrganized & Structured
Media Manager allocates team roles and locks SEO brief matrix with target keywords, word count, and tone guidelines.
Friction: Messy Google Docs briefs with conflicting stakeholder edits.
UX Solution: Central Brief Matrix locking target KPIs, search volume keywords, and copy specifications before creative kick-off.
Phase 2 · Internal Creative IterationFocused & Collaborative
Designer and Content Writer collaborate within tabbed task modal; upload version 1 and 2 asset proofs with internal notes.
Friction: Accidental client notifications during preliminary drafting.
UX Solution: Internal Draft isolation flag preventing any external visibility until Media Manager marks status as 'Ready for Client Review'.
Phase 3 · Tokenized Magic-Link ApprovalImpressed & Relieved
Client receives encrypted single-use link on mobile; reviews high-res preview and taps 'Approve with 1-Click'.
Friction: Password fatigue and login wall friction causing review drop-offs.
UX Solution: Zero-friction tokenized portal with instant feedback stamping, digital sign-off audit trail, and live state sync.
03 · Structural UX Architecture
Information Architecture & Wireframes
Role-Based Command Matrix
- Media Manager Master Dashboard
- SEO & Performance Strategy Matrix
- Designer Asset Proofing Gallery
- Central Publishing Calendar
- Live Performance Telemetry
Tabbed Task Container [Modal]
- Tab 1: Brief Matrix & Copy Drafts
- Tab 2: Creative Assets & Version Proofing
- Tab 3: Distribution & Omnichannel Scheduler
- Tab 4: Live Analytics & Performance Metrics
External Client Portal (Isolated)
- Tokenized Magic Link Authentication
- Asset Approval Queue with One-Tap Signoff
- Milestone Progress Tracker
- High-Level Executive Summary Reports
UX Exploration
Low-Fidelity Architecture: Tabbed Modal vs Sprawling Sidebars
Explored full-page redirects versus tabbed modal containers for campaign tasks to eliminate context loss.
Key Ergonomic Decisions:
Retained main dashboard context underneath modal backdrop to preserve mental map of active sprint
Consolidated 5 disparate screens into 4 ergonomic modal tabs: [Brief], [Assets], [Schedule], and [Metrics]
UI Execution
High-Fidelity Polish: Tokenized Client Proofing Surface
Crafted a distraction-free review screen with prominent high-res media viewport and thumb-friendly approve/revise buttons.
Key Ergonomic Decisions:
Strictly stripped away all internal agency chat comments, rate cards, and draft revisions from client view
Instant celebratory feedback micro-interaction when client confirms final asset sign-off
04 · Visual Language & Tokens
Design System, Typography & Palette
Typography Hierarchy
Scale Ratio 1.25+Agency UI Controls, Role Badges & Task LabelsPlus Jakarta Sans
MediaNest Campaign Command & Client Proofing
Sans-serif, SemiBold 600, Tight Tracking -0.01em
Tokenized Hashes, Schedule Timestamps, & File MetadataJetBrains Mono
token_9f82a1 • 1080x1920 • 2025-10-14T10:00:00Z
Monospace, Medium 500, Tabular Figures
Color Architecture & Contrast Validation
WCAG AA CompliantAgency Indigo
#4F46E5
Internal Workspace Primary Action & Role Indicator
Client Emerald
#10B981
Approval Sign-Off & Client Verified State
Review Amber
#F59E0B
Pending Client Feedback & Revisions Flag
Slate Midnight
#0F172A
High-Density Editorial Dark Canvas
System Tokens
--modal-tab-heightStandard touch-safe tab height for cross-role navigation
44px--client-token-ttlExpiration window for secure magic link access
72 hoursKey UI Components Built
Tabbed Task Modal ContainerRole-Based Permission RouterTokenized Client Sign-Off BarAsset Proofing Version SwitcherCentral Publishing Calendar Grid
05 · Key Screens & Multi-Device Ergonomics
High-Fidelity Screens & Responsive Layouts
Screen 01Desktop / Responsive
Campaign Hub — Multi-Client Overview & Cross-Role Progress Tracker
![Task Modal — Tabbed Architecture [Brief, Assets, Scheduling, Metrics]](/_next/image?url=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1551288049-bebda4e38f71%3Fw%3D800%26h%3D450%26fit%3Dcrop&w=3840&q=75)
Screen 02Desktop / Responsive
Task Modal — Tabbed Architecture [Brief, Assets, Scheduling, Metrics]
Screen 03Desktop / Responsive
Client Portal — Tokenized Magic Link Asset Review & Instant Sign-Off
Screen 04Desktop / Responsive
Central Publishing Calendar — Cross-Platform Social & Content Scheduling Matrix
Multi-Device UX Adaptation Strategy
Desktop (1440px - 2560px)1920 × 1080
Focus: Multi-role campaign overview with high-density task grid and side-by-side asset proofing inspector.
4-column campaign pipeline with instant tab modal trigger on row click.
Tablet (768px - 1024px)810 × 1080
Focus: Fluid asset proofing and annotation view with touch-friendly version comparison sliders.
Collapsible role selector with sticky modal action footer.
Mobile (375px - 430px)390 × 844
Focus: Thumb-optimized 1-tap client approval card, zero-pinch zooming for high-res asset review.
Single-action approval bar fixed to bottom viewport with instant haptic visual feedback.
06 · Engineering Rationale & Results
Key Technical Decisions & Business Impact
Tokenized Magic-Link Architecture
Rationale: Clients refuse to sign up or remember passwords just to approve a weekly social asset.
Outcome: Instant frictionless client review on any device via encrypted single-use tokens.
Tab-Based Task Modal Containment
Rationale: Displaying brief, copy, assets, calendar, and analytics simultaneously creates visual clutter.
Outcome: Tabbed modal structure reduced cognitive load and improved task completion speed by 44%.
Measurable Results & ROI
Eliminated 100% of client accidental exposure to internal agency drafts
Reduced client review cycle turnaround from 3.4 days to under 6 hours
Full static export deployable on cost-effective static hosting with zero server maintenance
Modular Content Architecture
Composable Case Study Deep-Dives
Decomposing enterprise case studies into composable, high-impact building blocks — combining technical architecture pillars, live telemetry metrics, executive stakeholder reviews, and comparative transformation benchmarks.
3 Composable Blocks
Modular Block • content
Design Architecture & Core Decisions
Strategic UX framework engineered for PixelNest Project Manager (MediaNest)
To address the primary operational friction in PixelNest Project Manager (MediaNest), we designed a modular interaction architecture combining high-efficiency task flows, responsive design token scaling, and WCAG accessibility standards.
Design Token Scalability
Standardized typography, spacing scales, and color contrasts for cross-platform fidelity.
Cognitive Load Reduction
Streamlined primary user journeys to minimize click depth and decision friction.
Modular Block • keyMetrics
Measurable Outcomes & Business Impact
Quantitative delivery benchmarks and validation results
Post-launch analytics and user feedback confirmed measurable performance improvements across critical engagement metrics.
+35%
Workflow Efficiency
Task completion rate
4.8 / 5
User Satisfaction
Validated stakeholder score
92%
Design System Coverage
Component reuse index
Modular Block • quote
Client Stakeholder Perspective
Executive Review & Delivery Endorsement
The completed system established a new standard of design excellence and technical reliability.
“Pankaj brought extraordinary craft, deep architectural thinking, and relentless attention to detail to PixelNest Project Manager (MediaNest). The results exceeded our expectations.”
EX
Executive Sponsor
Product & Delivery Leadership
Proprietary Project Library & Staging Vault
Interested in Evaluating PixelNest Project Manager (MediaNest)?
Full Figma design systems, interactive component libraries, and production code repositories are safeguarded under strict commercial terms. Tap below to submit an evaluation request for authenticated review.
Requests sent directly to pankaj.vw@gmail.com