PulzAid v2
Redesigned and rebuilt both the official website and the web application — two products, one shared design system, owned end-to-end as the founding Design Engineer.
The Problem
PulzAid had two products that needed a ground-up overhaul: the official website was built from a generic Tailwind UI template that didn't reflect their evolving business model, and the existing web app had an injury request flow that left customers confused about their cases. I needed to redesign and rebuild both under one unified brand.
Official Website (pulzaid.com)
What I Built
I transformed a single-page template into a 9-page, custom-designed Next.js marketing site to communicate the new paradigm shift in occupational healthcare.
Before: Generic Tailwind MVP Template
After: Custom Design & Multi-Page IA
New Visual Language
Replaced the generic template aesthetic with a custom design system — calm, clinical, and trustworthy, built to reflect healthcare credibility.
Multi-Page Architecture
Expanded from a single landing page to a complete site with dedicated pages for services, about, and the new business paradigm.
Design Decisions
Brand refresh for the paradigm shift
The business model changed, so the website had to communicate a fundamentally different value proposition. I redesigned the visual hierarchy and content structure to tell the new story, not just reskin the old one.
SEO-first technical architecture
Built with Next.js 15 App Router. The +65% increase in time-on-site wasn't magic — it was proper semantic HTML, AVIF/WebP image optimization, and next/font with display: swap for zero layout shift.
Technical Execution
Performance & SEO Architecture
Migrated from a legacy React SPA template to a Next.js 15 App Router architecture. Achieved a highly competitive Lighthouse score through AVIF/WebP image optimization, proper metadata handling, and utilizing `next/font` with `display: swap` to completely eliminate font-loading layout shifts.
Creative Canvas Interactions
Instead of heavy video backgrounds, I built a custom HTML5 Canvas `requestAnimationFrame` wave animation for the hero. It calculates multiple offset sine waves with HSL color cycling and adaptive line density relative to viewport width—ensuring fluid 60fps animations that never block the React main thread.
Phase-Based AI Triage UI
Built the interactive AI Triage playground using a phase-based state machine. It handles OpenAI streaming responses gracefully, featuring a complex custom loading sequence (scanline sweeps, spinning rings, heartbeat pulse) that keeps users engaged during inference latency.
Next.js App Router Architecture & Analytics Stack
Web Application (pulzaid.app)
What I Built
A major overhaul of the injury request and case management experience, guided by customer feedback and enhanced with AI-driven next steps.
New Requested Flow Experience
Case Management Details
Redesigned Request Flow
Rebuilt the core injury request experience based on direct customer feedback. The new flow is clear, multi-step guided, and transparent at every stage.
AI-Guided Next Steps
Embedded AI assistance into the management experience. The system now suggests what to do next based on case context, reducing decision fatigue.
Design Decisions
Customer-feedback-driven redesign
Instead of guessing, I used real customer feedback to identify pain points. The biggest complaint: 'I don't know what's happening with my case.' Every decision mapped back to solving that lack of clarity.
Human-in-the-loop AI via Server Components
AI suggestions appear as contextual recommendations injected into the view via React Server Components before hydration. Users always have the final say, establishing trust and keeping the UX incredibly snappy.
Complex System Engineering
Authenticated API Proxy Pattern
Wrote a custom script to auto-generate a type-safe API client from the backend OpenAPI spec. To securely route requests, I configured a Next.js `/api/proxy` endpoint that validates User Kinde Sessions and seamlessly injects Google OAuth service-to-service credentials before forwarding to our internal Cloud Run services.
Persistent Multi-Step Wizards
Rebuilt the legacy monolithic injury form into a persistent multi-step wizard. Utilized `react-hook-form` coupled with component-level Zod schema validation to guarantee payload integrity. Connected form watchers directly to `localStorage` ensuring users never lose data on session drops.
Dual Auth & Embedded Document Generation
The application dynamically handles dual authentication environments (Kinde & Stytch B2B) depending on the organizational feature flags. Additionally, I implemented `pdfmake` to generate complex HIPAA-compliant incident reports entirely client-side, circumventing heavy server round-trips for document exports.
API Proxy & OAuth Integration Flow
The Thread: Shared Design System
Both products share a unified design system I created in Figma and implemented in React. Color tokens, typography scale, component library, and spacing rhythm — all consistent between the marketing site and the web app. This is what happens when one person owns both: coherence without meetings.
Color Palette
pulzaid.com Typography (Sora & Inter)
pulzaid.app Typography (Inter)
Interactive Elements
Outcome & Impact
+65% time-on-site — On the redesigned website — validating the new IA, visual language, and SEO-first technical architecture.
Clearer case management — Customers could finally understand their case status and what to do next in the web app, driving down confusion-driven support requests.
Zero design-to-dev handoff — Owning both Figma and React meant every pixel shipped exactly as designed. The shared system ensured consistency across both products immediately.