Hemanth Creations
Digital Design Studio & 3D Interactive Web Platform
A high-performance digital design studio web application featuring a 3D perspective swiper carousel, sticky stacking service cards (/01 UI/UX Design, /02 Corporate websites, /03 eCommerce), kinetic marquee banners, and interactive project hover reveals.
Empirically validated through usability testing & heuristic auditing.
Launch Live ProjectThe UX Problem & User Persona Framing
Identifying friction points during discovery & defining user archetypes.
Traditional agency portfolios fail to convey immersive 3D spatial branding and interactive web motion without suffering from severe mobile page load lag, layout jumps (h-screen bug), and fragmented navigation flows.
Nielsen Usability Heuristics Audit Scorecard
Evaluated directly on the live rendered UI artifacts (Nielsen's 10 Usability Principles).
| # | HEURISTIC | LIVE UI FINDING | SEVERITY | RESOLUTION / FIX |
|---|---|---|---|---|
| 01 | Visibility of system status | Real-time preloader percentage and continuous live frequency indicator. | PASS | Implemented smooth preloader animation and live status pulse dot. |
| 02 | Match between system and real world | Stacking physical card metaphor for agency service offerings (/01, /02, /03). | PASS | Utilized sticky stacking scroll physics matching physical card decks. |
| 03 | User control and freedom | Full-screen drawer navigation overlay easily closed via ESC key or X toggle. | PASS | Added keyboard listeners and backdrop click handlers. |
| 04 | Consistency and standards | Standardized Lucide SVG icon stroke widths (1.5) across all interactive triggers. | PASS | Enforced global icon stroke width tokens. |
| 05 | Error prevention | Single-submission idempotency protection on contact drawer and newsletter inputs. | PASS | Disabled submit buttons during request flight with inline spinners. |
| 06 | Recognition over recall | Self-evident CTA triggers with hover cues and cursor text hints ('View Project'). | PASS | Provided explicit hover state affordances. |
| 07 | Flexibility and efficiency of use | Kinetic marquee scroll hijacking allowing fast scan-through of client roster. | PASS | Added hardware-accelerated CSS marquee loops. |
| 08 | Aesthetic and minimalist design | Liquid glass backdrop panels reducing visual noise while keeping core content high-contrast. | PASS | Applied backdrop-blur-md with 1px border refraction. |
| 09 | Help users recognize, diagnose, and recover from errors | Plain-language error tooltips on contact form input validation. | PASS | Replaced raw error codes with human-readable guidance. |
| 010 | Help and documentation | Task-oriented inline helper notes and interactive control sliders. | PASS | Integrated context-aware tooltips. |
Wireframe & Interface Evolution
Progressive visual refinement from low-fidelity wireframes to liquid glass design token architectures.
Mapped out the 3D perspective transform parameters (rotateX: 35deg, rotateY: 15deg, rotateZ: -28deg) to ensure smooth touch scrubbing on mobile viewports.
Usability Metrics & Quantitative Impact
Empirical testing results gathered after shipping design token updates.