top of page

ACG Shade Development App

Frame 2121457967 (3).png

Crafting a B2B Digital Capsule Color Customization & Regulatory Compliance Engine

Domain

Bio-Pharma, Hard-Shell Capsule Manufacturing, B2B Sales Enablement, Industrial Design Tech

Role

Lead Product Designer & UX Consultant (Full-Lifecycle Design Ownership)

Design Tools

image 26.png

Figma

image 52 (1).png

Claude

image 14.png

Clevertap

image 13.png

Useberry

Galaxy Tab S8 Ultra.png

Core Impact

  • Compressed B2B quote-to-sample turnaround from 3 weeks to < 48 hours.

  • Achieved 0% regulatory rejections via automated FDA/EMA guardrails.

  • Ensured 100% factory color fidelity via spectrophotometer sync.

  • Boosted premium anti-counterfeiting finish adoption by +35%.

Strategic Overview

Context

ACG World is a global leader in solid oral dosage manufacturing, producing billions of hard-shell capsules annually for pharmaceutical and nutraceutical brands worldwide. Capsule color selection—encompassing cap/body pairing, opacity, shell polymer selection, and anti-counterfeiting print bands—is a pivotal technical and branding milestone for launching new therapies.

The Baseline Problem

Previously, capsule color customization relied on physical shade cards, Pantone swatches, and fragmented email loops between pharma R&D formulators, ACG sales representatives, and factory dye-mixing labs. This legacy approach created three core friction points:

  1. Prolonged Sampling Cycles: Physical shade matching and sample dispatch took up to 3 weeks per iteration.

  2. Regulatory & Material Mismatches: Formulators frequently selected pigments facing strict bans (e.g., Titanium Dioxide / TiO restrictions in EU/EMA vs. US/FDA markets) or improper shell polymers (Gelatin vs. HPMC) for moisture-sensitive drugs.

  3. Batch Discrepancies & Counterfeiting Risk: Digital JPEGs failed to match factory spectrophotometer color standards during commercial dye mixing, while clients missed out on high-value anti-counterfeiting finishes.

Strategic Objectives & Product Vision

To convert ACG’s color customization workflow into an agile, digital-first sales enablement engine, I aligned business targets into three streamlined design objectives:

  • Accelerate Turnaround & Co-Creation (Sales Velocity): Compress shade selection and sample dispatch to < 48 hours while equipping sales reps and client formulators with an interactive studio for real-time cap/body pairing, 2-color printing previews, and instant PDF spec-sheet generation.
     

  • Guarantee Compliance & Polymer Compatibility (Risk Mitigation): Cross-reference pigments, opacifiers (TiO-free options), and polymers (Gelatin vs. HPMC) against regional FDA, EMA, and FSSAI databases to guarantee 0% regulatory rejections.
     

  • Ensure Batch Fidelity & Brand Security (Quality & Value): Align digital 3D shade previews directly with factory spectrophotometers (L*a*b color space) to guarantee 100% manufacturing fidelity while driving adoption of pearlescent finishes and axial printing for anti-counterfeiting.

Group 4 (2).png

User Personas & Behavioral Psychology

Primary Personas

  • Dr. Aris, Lead Formulation Scientist (Client-Side R&D)
    Profile: 44-year-old scientist developing solid oral formulations for a multinational pharma brand.
    Mindset & Friction: Cautious and risk-averse. Anxious about drug degradation (hygroscopic fills) and regulatory compliance. Frustrated when color selection delays clinical trial batches.
     

  • Vikram, ACG Global Account Executive (Sales Enablement)
    Profile: 36-year-old B2B sales manager handling high-value enterprise pharma accounts.
    Mindset & Friction: Driven by contract velocity. Needs fast, interactive digital co-creation tools to present options during client meetings without depending on factory lab staff for basic shade rendering.

Group 6.png

Applied UX Psychology Frameworks

  • Hick's Law & Smart Palette Filtering (3D Studio Flow):
    Problem: Formulators faced severe choice paralysis browsing thousands of unorganized shade swatches in physical binders.
    UX Solution: Curated compliant shade buckets based on target launch region and polymer selection, reducing cognitive load and accelerating color choices.
     

  • Prevention Bias & Error Proofing (Regulatory Engine):
    Problem: Formulators suffered intense anxiety over picking banned pigments (such as $\text{TiO}_2$) that could reject clinical batches late in the development cycle.
    UX Solution: Embedded real-time regional compliance guardrails that proactively disable non-compliant colorants at Step 1, delivering instant confidence and eliminating regulatory rework.
     

  • Peak-End Rule & Physical Realism (3D Finishes & Printing):
    Problem: Static 2D JPEG mockups failed to convey the premium visual value of anti-counterfeiting finishes like metallic coats and 2-color radial printing.
    UX Solution: Rendered photorealistic studio lighting, opacity translucency, and print overlays in WebGL, creating a delight peak during client co-creation meetings and driving a +35% adoption of high-margin finishes.

Information Architecture (IA)

The platform Information Architecture is organized into a 4-Module Co-Creation Pipeline, guiding users seamlessly from visual design to technical specification and factory sample dispatch.

Task-Oriented Navigation & Prioritization
 

  • STUDIO KRA (Dynamic 3D Co-Creation Canvas): Root Navigation ➔ "3D Color Studio". Interactive WebGL viewport with split cap/body controls, Pantone/RAL matching, translucency toggles, and dual-color axial/radial printing options.
     

  • REGULATORY KRA (Compliance & Polymer Guardrails): Navigation Tab ➔ "Regulatory & Material Check". Filters illegal colorants based on target market (EU, USA, India), enforces TiO-free rules, and recommends shell polymers (Gelatin vs. HPMC) based on drug moisture sensitivity.
     

  • SPECIFICATION KRA (Digital Spec-Sheet Engine): Action Bar ➔ "Generate Spec Sheet". Instant PDF generator producing an official technical document with L*a*b* color coordinates, polymer grades, and printing layout blueprints.
     

  • QUALITY & DISPATCH KRA (Factory Lab Sync): Account Portal ➔ "Sample Dispatch Vault". Connects digital shade formulas directly to ACG factory spectrophotometers for automated dye mixing and < 48h sample dispatch.

Group 3 (2).png

Wireframing & Low-Fidelity Iterations

Regulatory Warning Pivot

  • Initial Concept: A warnings summary modal displayed after the user completed the design and clicked "Request Sample."

  • Testing Friction: High user frustration. Formulators spent 20 minutes crafting a shade, only to discover at the final step that Titanium Dioxide (TiO) or a specific dye was banned in their launch region.

  • The UX Pivot: Placed regulatory market selection at Step 1 of the creation flow. Proactively disabling forbidden dyes on the color wheel prevented non-compliant shade creation from the start.

  • UX Rationale: Applied Error Prevention Over Recovery to eliminate wasted design cycles and guarantee 100% regional compliance.

Gemini_Generated_Image_vtrzkcvtrzkcvtrz.png

Spectrophotometer Color-Matching Pivot

  • Initial Concept: Freeform RGB/HEX color picker allowing users to input any web color value.

  • Testing Friction: High risk of color mismatch (Delta E > 2.0). Web RGB colors often could not be recreated using food/pharma-grade natural dyes during factory dye mixing.

  • The UX Pivot: Restricted color inputs to Spectrophotometer-Calibrated L*a*b Dye Libraries and Pantone/RAL equivalents, displaying a real-time "Manufacturing Feasibility Score."

  • UX Rationale: Leveraged Procedural Realism to align client expectations directly with factory production capabilities.

image 9.png

High-Fidelity UI & Core Feature Breakdown

Mac Studio.png
Mac Studio-1.png

Interactive 3D Capsule Studio & Sales Co-Creation

  • WebGL Photorealistic Render: Formulators and sales reps rotate capsules 360°, adjust cap and body colors independently, toggle opacity (transparent, translucent, opaque), and preview pearlescent or metallic finishes under realistic studio lighting.

  • Axial & Radial Printing Studio: Allows users to upload brand logos or dosage numbers, previewing 2-color radial/axial band printing across the capsule body.

Regulatory & Polymer Compatibility Guardrails

  • Market-Specific Palette Filtering: Selecting launch markets (e.g., EU, USA, Japan) automatically filters forbidden pigments and flags TiO-free opacifier alternatives (e.g., ACGcaps™ TSafe).

  • Assisted Polymer Selector: Formulators input drug properties (e.g., Hygroscopic Fill, Liquid Fill, Crosslinking Risk), and the app auto-recommends the optimal polymer grade (Gelatin vs. Vegetarian HPMC options like ACGcaps™ H+).

Digital Spec Export & Factory Lab Dispatch Automation

  • 1-Click PDF Spec-Sheet: Generates a complete technical blueprint featuring L*a*b* coordinates, polymer specifications, logo placement blueprints, and regulatory compliance certificates.

  • Automated Factory Sample Dispatch: Clicking "Dispatch Physical Sample" pushes the digital dye formulation directly to ACG’s factory dye-mixing equipment, triggering sample dispatch in < 48 hours.

Design System & Scalability

To accelerate multi-platform feature rollouts and guarantee visual parity across web and tablet viewports, I architected the ACG Studio Token System (ASTS)—a unified token and component framework optimized for high-density B2B pharma customization workflows

  • Calibrated Color-Fidelity Tokens: Precise display tokens ensuring accurate L*a*b* color space reproduction across different tablet and desktop monitors.

  • Pharma-Specific UI Components: Specialized components including 3D viewport controllers, dual-tone split swatches, regulatory compliance badges, and polymer matrix tables.

  • Development Handoff Velocity: Standardized Figma-to-WebGL tokens reduced frontend implementation friction by 40%.

Gemini_Generated_Image_xaofpzxaofpzxaof.png

Real Improvements & Measurable Impact

By overhauling the legacy web app into an instant CKYC onboarding portal, 1-click MFD client delegation hub, and self-service XIRR tax dashboard, the redesigned WhiteOak Capital platform generated substantial, measurable improvements across key business performance and operational efficiency metrics

  • Legacy Benchmark: 1-2 (Physical Mail)

  • Redesigned Platform: < 2 Minutes

  • Impact & UX Rationale: Instant CKYC & UPI AutoPay. Automated PAN lookup & 1-tap UPI debit authorization.

✅ Quote-to-Sample Speed

  • Legacy Benchmark: Manual Paper & Email Approval

  • Redesigned Platform: +45% MFD Transactions

  • Impact & UX Rationale: 1-Click WhatsApp Links. MFDs send pre-filled approval links directly to client WhatsApp.

⏰ MFD Partner Transaction Velocity

🕵 Customer Support Inquiry Volume

  • Legacy Benchmark: High Call / Branch Visit Volume

  • Redesigned Platform: 60% Ticket Reduction

  • Impact & UX Rationale: Self-Service Tax Vault. Delivered 1-tap capital gains statements & dynamic XIRR meters.

🕵 NFO Subscription Conversion

  • Legacy Benchmark: High Drop-Off During Launch

  • Redesigned Platform: +38% NFO Inflows

  • Impact & UX Rationale: Co-Branded MFD Marketing. Empowered advisors with 1-click customized NFO sales kits.

bottom of page