KAUSTOBH BHATTACHARYA
UX ENGINEER // PORTFOLIO
Calibration sequence active
[SYSTEM] Initialization started...
[SYSTEM] Hooking Three.js graphics canopy...
[OK] Vibrant aurora gradient shader compiled.
[OK] Audio click synthesizer armed.
Design that ships results. I engineer premium digital experiences that bridge the gap between ruthless user logic and cinematic visual craft.
Projects Shipped
Avg. Metric Lift
Hires/Consults
Structured pillars of blue data supporting product growth—bridging the gap between design vision and production-grade engineering without back-and-forth friction.
Creating scalable, code-ready UI component libraries with standardized tokens for colors, spacing, and typography across Figma and CSS variables.
Moving beyond static Figma screens into production-grade micro-interactions, spring physics animations, and realistic user testing flows.
Writing clean, documented UI code, flexbox layout specs, and production components that frontend engineers can copy and deploy without guesswork.
Core skills, verified certificates, and tools known — an interactive matrix connecting technical competencies directly to project proof and credentials.
Component Libraries & Tokens
Spring Physics & Motion Design
Persona Audits & Journey Flows
Component Architecture & SSR
Responsive Grids & GPU Animations
Procedural Shaders & 3D Canvas
Token Standardization & Governance
Contrast AA & Focus Rings
Spatial Layout Ramps & Baseline
An AI-powered team management platform that transforms raw project data into proactive manager decisions, eliminating reactive burnout and sprint delays with one-tap AI actions.
01 Product Strategy & Manager Persona Audits
02 Proactive AI UI Systems & 8pt Dark Grid
03 300ms Motion Design & Interactive Figma Prototyping
Engineered a frictionless device configuration and checkout experience, minimizing cart drop-offs through elegant micro-interactions and real-time feedback validations.
Engineered an immersive digital gallery and acquisition experience, minimizing bounce rates and maximizing artwork engagement through fluid canvas interactions, contextual scaling visualizers, and an elegant, low-friction inquiry flow.
01 Immersive Spatial Canvas
02 Draggable A/B Wireframes
03 Contextual Scaling Visualizer
Designed a flexible subscription management experience for daily milk delivery, optimizing weekly schedules, vacation pause states, and respectful exit flows.
01 Subscription State Logic
02 Dynamic Weekly Scheduling
03 Respectful Exit Flows
Designed a clinical-grade, real-time medical monitoring dashboard designed to aggregate biometric telemetry, simulate physiology adjustments, and visualize 3D anatomical scans.
01 Symmetrical Telemetry Grid
02 Horizontal KPI Carousel
03 WCAG AA Contrast Ratios
A museum-grade, scroll-linked 3D digital showroom for the Mercedes-AMG GT4 & GT3 EVO. Merges WebGL, procedural GLSL exhaust shaders, and a real-time synthesized V8 Web Audio engine into a cinematic racing experience.
01 Three.js WebGL + GSAP Scroll Timeline
02 Synthesized V8 Web Audio Engine
03 Volumetric GLSL Exhaust Flame Shaders
A contemporary wooden retreat set between forest and water. Built a pixel-perfect, Astro-powered landing page from Figma designs, featuring clip-path typography masking, infinite masonry galleries, and IntersectionObserver scroll animations.
01 Research & Journey Mapping
02 Interactive Booking Prototypes
03 Conversion-Optimised High-Fidelity UI
Organized code and empathy as an engineering collaborator—eliminating messy handoffs with real DOM constraints & 1-to-1 token parity.
Currently open for full-time or contract roles bridging UX/UI design and high-performance frontend web engineering. Hire-ready with a 2-week notice period.
Input your target metrics to calibrate our briefing.
Confirmed on May 28 at 2:00 PM. Invitation dispatched. Persistent node connection active.
Engineering and product leads spend hours every day manually gathering standup updates, tracking issue boards, and resolving bottlenecks. Existing management tools are reactive—managers often only realize a team member is overloaded or a sprint is off-track after deadlines are missed.
PulseHQ solves this by embedding proactive AI directly into operational workflow cards instead of using isolated chatbots. The system continuously synthesizes team commits, PRs, and capacity metrics to deliver actionable manager summaries, automated standup briefs, and instant workload rebalancing.
Structured layout explorations designed to optimize mobile touch ergonomics and rapid triage navigation.
Atomic UI components, bottom navigation bars, and operational task review cards built on an 8pt spatial grid.
Brand Identity Icon
Bottom Navigation
AI Action Component
Task Review Card
Final production UI showing splash onboarding, executive dashboard home, and team analytics reports.
Through proactive AI card integration and 300ms micro-interactions, manager triage overhead dropped by 40% while team sprint velocity increased by +14% across initial deployment cohorts.
High checkout abandonment (74%) occurs frequently at the payment gateway billing form. User observations indicated that lack of visual confirmation feedback, form formatting challenges (lack of automatic credit card spacing), and late form validation errors were key drivers of abandonment.
Our engineered checkout overlay provides high-performance interactive solutions:
By focusing heavily on micro-interaction physics and immediate client validation signals, e-commerce checkout completion rate improved by 18%, and user input validation failures decreased by 60%. This case study demonstrates how focused interaction tuning translates directly into measurable product success.
An e-commerce checkout flow focuses heavily on minimizing form friction and field drop-offs, whereas an art gallery high-fidelity prototype requires metrics that measure immersion, visual engagement, and the transition from appreciation to acquisition. By providing interactive generative art previews and a wall scale visualizer directly, we bridge the gap between creative visual designs and high-performance, responsive codebases.
A curated selection of high-impact digital paintings created by the artist, combining classical sculpture motifs, high-chroma pop art, and Japanese folklore aesthetics.
By optimizing visual engagement rather than strictly speeding standard checkout logistics, inquiry rates for target paintings increased by 28%. This case study reveals that in luxury aesthetic markets, visual immersion and scale contexts drive commercial acquisition models.
Traditional subscription models treat daily deliveries like generic e-commerce checkout flows, neglecting the unique everyday nuances of milk consumption: varying household quantities throughout the week, temporary vacation pauses, billing transparency, and the need for a respectful, transparent cancellation flow that retains users through trust rather than dark patterns.
Doodh is optimized as a daily control center. Key design choices include:
App Home Screen
Pause Range Selector
Paused State Home
Pause Confirmation
Doodh features a curated organic color palette tailored to promote freshness, health, and clean layout navigation. White and soft green elements compose the primary visual surface area, while Pista Green serves as the main brand identifier.
Through structured user testing and high-fidelity prototype flows, subscription lifecycle retention increased by 30%. Offering clear date-range pause adjustments and avoiding exit-guilt patterns builds trust, converting standard customers into lifetime subscribers.
Bio Grid is a clinical-grade, real-time medical monitoring dashboard designed to aggregate biometric telemetry, simulate physiology adjustments, and visualize 3D anatomical scans. In critical care environments, a delay of seconds or a misread metric can impact clinical outcomes.
Objective: Redesign the Bio Grid dashboard to eliminate sidebar layout clipping, fix vertical element misalignments, resolve low-contrast legibility issues on medical displays, and establish a slideable, unified Key Performance Indicator (KPI) container system.
Outcome: A fully responsive, high-fidelity dark medical console featuring dynamic grid layouts, high-contrast typography, a strict 8px spatial grid, and a slideable horizontal biometrics strip that complies with WCAG AA accessibility standards. Cognitive scanning speed improved significantly by establishing predictable reading paths and removing low-size typography.
The architecture must handle high-throughput, low-latency streaming data while rendering complex 3D assets without dropping frames below 60 FPS.
The core dashboard redesign transforms abstract data points into highly recognizable, pre-attentive visual elements.
| Biometric KPI | Technical Visual Implementation | Normal Range |
|---|---|---|
| Heart Rate | Double-stroke glowing ECG path sweep; pulsing heartbeat ring driven by pulse frequency. | 50 - 100 bpm |
| SpO2 | Wave plethysmograph with high-contrast vertical alignment grid ticks. Baseline shifts dynamically. | 95% - 100% |
| Temperature | Multi-segmented bar mapping Hypothermia (blue), Normothermia (green), and Pyrexia (red) using clipping paths. | 36.0°C - 37.5°C |
| Stress Index | 12-segment bar visualizer in high-intensity neon-blue; active glows reflect ANS variations. | < 70 idx |
| Glucose Level | Highlighted target range zone with high-contrast reading dot and directional trend arrows. | 70 - 140 mg/dL |
| Toxic Load | Glowing green indicator showing clearance levels, using reverse log-scale to highlight critical saturation. | < 35 load |
A. Non-Overlapping App Shell (CSS Grid)
The legacy layout relied on absolute positioning offsets (`fixed left-64`), which caused severe viewport clipping. We refactored it to a strict two-column CSS Grid layout:
.app-shell {
display: grid;
height: 100vh;
grid-template-columns: var(--sidebar-width) 1fr;
transition: grid-template-columns 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.app-shell[data-sidebar-collapsed="true"] { --sidebar-width: 64px; }
.app-shell[data-sidebar-collapsed="false"] { --sidebar-width: 260px; }
B. Dynamic Slideable KPI Carousel
C. Centered Symmetrical Card Grid
Each card enforces absolute vertical symmetry to prevent visual zigzagging during rapid scanning:
.kpi-card-grid {
display: grid;
grid-template-rows: 24px 120px 36px 20px; /* Label, Vis, Value, Metadata Footer */
row-gap: 8px;
justify-items: center;
text-align: center;
padding: 16px;
}
D. Safe-Area Obstruction Zone
Outer viewport wrappers feature a strict bottom padding rule of `pb-28` ($112\text{ px}$). This guarantees that all telemetry elements remain completely within the active viewing field and clear any persistent OS or browser-level notifications.
The medical console operates on a high-contrast dark color palette designed for high ambient glare settings (clinical care rooms) to guarantee clear legibility.
Visual Chunking: By converting asymmetric telemetry modules into a uniform 4-row card architecture, the clinician’s visual search pattern is standardized: label -> shape/waveform -> large metric value.
WCAG AA Compliance: Low-contrast text colors were replaced with design tokens yielding contrast ratios of 11.2:1 and 5.4:1 against the deep background, exceeding the 4.5:1 WCAG AA baseline.
Minimum Font Floor: All sizes below 12px were eliminated from telemetry text readouts. Interactive touch targets maintain a minimum width and height of 44px on mobile/tablet screens.
The APEX MOTORS interactive 3D exhibit is a museum-grade, single-page digital showroom designed to showcase two legendary racing machines — the Mercedes-AMG GT4 (M178 V8 Twin-Turbocharged) and the Mercedes-AMG GT3 EVO (M159 V8 Naturally Aspirated).
The purpose of this application is to transcend standard web galleries by delivering a highly persuasive, scroll-linked cinematic journey. Every viewport increment dynamically orchestrates 3D camera matrices, procedural shader uniforms, spatial audio synthesis thresholds, and chiselled typographic layouts to tell a cohesive narrative of luxury, engineering precision, and raw performance.
Outcome: The project is built entirely on modern, vanilla web standards, achieving extreme performance (60+ FPS) and zero external build tool dependencies.
A. 3D Scene Manager (js/scene.js)
Manages a transparent WebGL canvas overlaid on fixed wavy silk CSS backgrounds (golden for GT4, red for GT3 EVO). Dynamic lighting rig featuring a directional sun, ambient fills, and a moving coloured underglow PointLight that updates based on active vehicle theme. Separate 7-keyframe camera paths per model, focusing on vehicle-specific components (centre-lock wheels, swan-neck wings on GT3 EVO; Biturbo turbochargers and ABS modules on GT4).
B. Volumetric Exhaust Flame Shaders (js/shaders.js)
Procedural WebGL vertex and fragment shaders generating volumetric exhaust flames behind tailpipes. Operates on a 3D Simplex noise algorithm warped by time and throttle value uniforms. Features dynamic backfire ignition cuts, generating intense, high-scale flame bursts and camera shakes when shifting gears at high RPMs.
C. UI & Scroll Controller (js/uiController.js)
Captures wheel and touch events, translating them into a damped virtual scroll progress variable (0.0 to 1.0). Swaps narrative text storyboards and CSS classes (.theme-evo) dynamically. Reorganises HUD layouts — Left Sidebar houses vehicle system details; Right Sidebar houses the Performance Profile, Vehicle Gallery switcher, and Thrust Interactive ignition/throttle controls.
// GSAP Camera Scroll Timeline — Phase 3 Wheel Fly-Around
gsap.to(camera.position, {
x: keyframe[3].x, y: keyframe[3].y, z: keyframe[3].z,
duration: 1.4, ease: 'power2.inOut',
onUpdate: () => camera.lookAt(vehicleCenter)
});
Silvatide Cottage is a contemporary wooden retreat set between forest and water, designed for guests who want stillness, comfort, and immersive nature without giving up modern luxury. The challenge was translating a stunning Figma design into a live, pixel-perfect, and highly interactive web experience.
100%
Design Fidelity
+22%
Booking Conversion
8px
Spatial Grid
60fps
Scroll Animations
Situation
A high-fidelity Figma design existed for a premium lakeside retreat called "Silvatide Cottage" — and needed a faithful, performant translation into a live, animated web experience with no build-tool overhead.
Task
Develop frontend architecture from scratch — pixel-perfect structural matching, complex typography layering, responsive design, and premium scroll animations all under a strict 8px spacing system.
Action
Result
Delivered a lightning-fast, visually stunning landing page that 100% mirrors the original design vision. The final product feels premium, interactive, and completely responsive across all devices.
Fintech Dashboard // KPI Preview
Reduced task time by 40%
UX Designer & Aspiring UX Engineer
📍 Delhi, India // Remote ok
📧 kaustobh1920@gmail.com // 📞 +91-7703957947
UX Designer and aspiring UX Engineer with experience in user-centered design, interface design, usability testing, wireframing, prototyping, Full Stack Web Development, responsive High-Fidelity Prototypes, and game UI/UX. Background in computer science, network administration, and AI-assisted workflow tools. Strong portfolio with case studies in dashboard redesign, checkout optimization, subscription flows, clinical telemetry, and 3D WebGL experiences.
• UX/UI Design & Research
User Experience, User Interface, UX Research, Usability Testing, Wireframing, Prototyping, Figma, Interaction Design, Information Architecture, User Flows, Journey Mapping, Design Thinking, Human-Computer Interaction, Accessibility, Design Systems, Responsive Design
• Front-End & Web Tech
React, JavaScript (JS), Node.js, Three.js, Responsive Design, Full Stack Prototyping
• Game UI/UX & Workflows
Game UI, Game UX, Unreal Engine UI, AI-Assisted Workflows, Prompt Engineering
Fintech Dashboard
Case Study // Deployable
E-Comm Checkout
Case Study // Interaction
Graphic Art Gallery
Case Study // Deployable
Doodh Subscription
Case Study // Interaction
Bio Grid Telemetry
Case Study // Med Tech
Apex Motorsport
Case Study // 3D & WebGL
Engineered visual updates for key e-commerce checkout platforms (boosting conversion by 18%) and designed responsive analytical fintech interfaces (reducing cognitive load by 40%).
Optimized B2B luxury product fulfillment operations for high-end e-commerce clients. Leveraged data analytics and AI tools to streamline logistics, ensure precise order handling, and enhance supply chain efficiency.
Built single-page interactive portfolios, customized low-resource HTML5 canvas animation systems, and consulted clients on conversion rate optimization (CRO) strategies.
Designed and implemented Wi-Fi, storage, and secure server network infrastructures. Supported software/hardware updates and threat mitigation protocols while maintaining reliable system uptime.
B.Sc. Computer Science
Bachelor of Computer Applications (BCA) // CGPA: 8.00/10.00 (First Division)
Relevant coursework: Human-Computer Interaction, Programming in C, Data Structures, Software Engineering, Python Programming, Cloud Computing, Cyber Security, Artificial Intelligence.
CBSE Class XII
• Google UX Design Professional Certificate
• Foundations of UX Design // Start the UX Design Process
• Wireframes & Low-Fi Prototypes // UX Research & Testing
• High-Fidelity Figma Designs // Build Dynamic Web UIs
• Specialized Game & AI Design
• User Experience in Game Design // User Interface in Game Design
• IBM Enterprise Design Thinking Practitioner
• IBM Team Essentials for Designing AI Solutions
• Prompt Engineering for AI Models // Microsoft 365 Training
Context notes...
Issuer • Verified