ZetUI Design System

How I reduced Figma file load times from 5 minutes to 10 seconds by rethinking component architecture

Role: Design System Lead — owned the architecture, built and maintained components, established governance, and drove adoption across the team. Evolved the system over 5 years at Zetwerk.

Our Figma files were painfully slow. Loading a single page took 2-5 minutes. Prototypes would hang. Designers were frustrated, and productivity was tanking.

We were migrating from Sketch and needed to rebuild our component library in Figma — but doing it the "right way" meant understanding why things were breaking in the first place.

• Boolean-based component architecture reducing variant count by 80%+
• 20+ production components — atoms, molecules, organisms & page layouts
• Governance process with contribution guidelines, review workflows, and version control
• Token-based styling enabling theme-switching and white-labeling
• Developer-aligned naming conventions and comprehensive documentation

Design systems aren't just about consistency — they're about performance, collaboration, and sustainable scale. The best system is one that works for designers AND developers.

ZHIP — Shipment Tracking

Designing a shipment tracking system for complex multi-leg, multi-load international logistics

Role: Lead Designer (90% ownership) — designed the shipment tracking system end-to-end, from information architecture to final UI.

Zetwerk's NAB business unit manufactures solar beams and piles for US customers. That means international shipping: products move from Indian factories to Indian ports, across the ocean to US ports, and finally to customer locations.

Before ZHIP, this was all tracked in Excel. Unknown delays were costing the business ~₹3 Cr annually in demurrage charges — fees charged when containers sit at ports longer than expected.

• Four shipment creation flows depending on context (with contract, without contract, from packing list, manual)
• Template-based status updates with standardized stages (Gate Out Empty, Gate In Full, Load, Departed, Arrival)
• Multi-mode tracking — GPS + Fastag for Indian land transport, manual fallback for international legs
• Customer Portal sync — updates auto-reflected for US customers without extra work
• Complete audit history of all updates, attachments, and status changes

Complex logistics problems need clear information hierarchies. The challenge isn't showing more data — it's organizing data so users can act on it quickly.

ProcureZ — Procurement Platform

Leading end-to-end research to unify a fragmented procurement process across 5 business units

Role: Sole Designer & Research Lead — owned this project end-to-end: conducted all user research, created PRDs, designed user flows and wireframes, proposed feature roadmaps, and navigated 3 PM changes over the project's lifecycle.

Zetwerk's procurement process was fragmented. Different teams used different tools — Excel sheets, WhatsApp, emails, PDFs, and an expensive external tool called Procol for reverse auctions. Nothing talked to each other.

I spend 50-60% of my time converting quantity metrics and getting agreed upon terms and conditions. I end up helping other BUs which takes up my time as well.

ProcureZ would be a single platform connecting all three user groups:

• PR Creation — Site managers submit purchase requisitions with standardized templates
• RFQ Management — Procurement team sends RFQs, tracks quotes, runs comparisons
• Reverse Auction — Built-in auction system replacing Procol
• NFA & Approvals — Streamlined sign-off workflow with full audit trail
• Complete research documentation, PRDs, user flows, wireframes, and feature prioritization matrix

The project went through 3 PM changes over 12+ months. Each transition meant re-alignment, re-scoping, and sometimes re-doing work. I became the thread of continuity.

Not every project has a perfect ending. But every project teaches you how to navigate ambiguity, adapt to constraints, and keep pushing forward.

ZPS — Factory Operating System

Designing a factory floor operating system for Siemens Gamesa's wind turbine manufacturing

Role: UX Foundation Lead + Production & QC Design Owner — established UX principles, device strategy, and accessibility guidelines. Owned the complete production lifecycle plus QC inspection flow on handheld devices.

Siemens Gamesa — one of the world's largest wind turbine manufacturers — was setting up a new manufacturing plant and needed a complete tech stack for tracking inventory, production, quality inspections, and dispatch.

3 months. That's all we had — including PM alignment, business sign-off, design, and development.

• Production Order system — full lifecycle from Draft → Created → Released → In Production → Completely Produced → Closed
• BoM validation with detailed error system showing what's wrong, why, and how to fix it
• Picklist swap system — replace individual items or entire Sets with quantity validation and preview
• BoM Reversal flow — reason capture, inventory status decisions, location assignment, full audit trail
• QC Inspection for 5 different inspection types on Zebra TC21 handhelds
• Printable Pick List with checkboxes, comments column, and contact info for warehouse pickers

The best production systems aren't just about the happy path. They're about what happens when items are missing, when serial numbers don't match, when products need to be reversed. That's where thoughtful design makes the difference.

Riffit

Create GST-compliant invoices, track payments, and send reminders — all from WhatsApp.

India has over 15 million freelancers — designers, developers, writers, consultants — and most run their entire business through WhatsApp. Yet invoicing still means spreadsheets, generic apps built for larger businesses, or screenshots and mental math.

Freelancers lose an estimated 10–15% of their revenue to late or forgotten payments, spend hours on admin work, and avoid awkward payment reminders — all because no tool meets them where they already work.

Stack: Next.js, TypeScript, Tailwind CSS v4, Next.js API Routes (Vercel Serverless), Supabase (PostgreSQL + RLS), Meta Cloud API, Razorpay Subscriptions, Brevo (transactional + marketing), @react-pdf/renderer, RiffUI (custom neobrutalism), Sentry

A solo founder built a complete WhatsApp-native SaaS from zero — not just a chatbot, but a full financial platform with web dashboard, PDF engine, subscription billing, email automation, and a custom design system. The product thinking — recognizing that onboarding friction, not features, was the biggest launch risk — is what separates this from a side project.

Sabeel

A PWA using traditional Waqf-based learning with millisecond-accurate audio synchronization — built from scratch including custom data and tooling that didn't exist before.

Existing Quran learning apps don't support Waqf-based segmented learning — the traditional method where verses are broken at natural pause points for easier memorization. A family member needed this tool. Nothing on the market offered it.

Learners were forced to memorize entire verses at once, which is overwhelming for beginners and inconsistent with how Quran is traditionally taught through oral recitation.

Worse — the Waqf-segmented data didn't exist anywhere online. The product couldn't be built without first creating the data from scratch.

Stack: Vanilla JavaScript, CSS, HTML, PWA (Service Workers, offline caching), Quran.com API, AlQuran.cloud API, Web Audio API, Media Session API, Custom Node.js Segment Editor, GitHub Pages, Custom JSON (Waqf segments + word timestamps)

A UX designer with no formal coding background shipped a production-grade PWA by identifying a real cultural gap, discovering the core data didn't exist, building custom tooling to create it, and writing every line of code. The range — from audio engineering to cross-platform debugging — is the point.

Snap to Jira

A Chrome extension that captures, annotates, and sends screenshots to Jira without leaving your tab.

Bug reporting takes 5+ minutes per bug — screenshot, save, open Jira, create ticket, upload, paste context. Focus is broken, context is lost. By the time you've switched tabs three times, you've forgotten the exact state you were trying to report.

Stack: JavaScript, Chrome MV3, Canvas API, Web Crypto, Vercel Serverless, Node.js, Jira REST, Gmail OAuth 2.0, GA4 Measurement Protocol, AES-256-GCM, Content Security Policy, Discord webhooks, UptimeRobot, Gmail API, HTML templates, Google Analytics 4

I didn't just build a Chrome extension — I built the entire ecosystem around it as a solo non-engineer. Encrypted storage, real-time API validation, canvas annotation, email automation, health monitoring, analytics-driven funnel optimization. From "it works on my machine" to a fully maintained production product with real users.

I built a Chrome extension using AI to simplify my product testing process

Published in UX Planet, May 2025

The full journey of Snap to Jira: problem, AI tools, decisions, and the shipped product.

I noticed a pattern in page scroll animation on websites…

Published in UX Planet, May 2024

8 scrolling animations deconstructed — content-over-content, 3D depth, card stacking, and more. Includes recreations.

Invest in yourself: The power of one hour of daily learning

Published in Bootcamp, Nov 2023

How I built a habit of daily personal growth over a year, with a structured learning process anyone can follow.

How To Secure Your Adobe XD Design Files To Figma In Just Two Clicks

Published in UX Planet, 2023

A quick guide on migrating design files from Adobe XD to Figma seamlessly.

5 Key Things to Keep in Mind While Doing Your Next UX Project in 2023

Published in Bootcamp, 2023

Practical UX project advice distilled from real experience.

Building Video Conferencing for Indian Users

Published in Bootcamp, Feb 2023

Designing an omnichannel video calling platform (mobile, desktop, tablet, feature phones) for the Digital India Innovation Challenge.

Fleetlier: My first Design Sprint Experience

Published in UX Planet, Feb 2023

How our team went from "I can't think of a crazy idea" to low-fidelity sketches in 2 days during a design sprint masterclass.

Cintel — AI Competitive Intelligence Plugin

An AI-powered competitive intelligence system built as a Claude plugin. Monitors competitors across blogs, newsletters, Reddit, and social media — classifies threats and generates structured Excel reports with visual HTML dashboards. Configurable for any industry.

Snap to Jira — Chrome Extension

Capture, annotate, and send screenshots to Jira without leaving your tab. Canvas-based annotation, AES-256-GCM encrypted storage, one-click submission with real-time validation. Free and actively maintained.

Sabeel — Quran Memorization PWA

A progressive web app with word-by-word audio synchronization for Quran memorization using traditional Waqf-based segmented learning. Offline-capable, zero dependencies. Audio segments are functional but manual accuracy review is still in progress.

Designing for Diversity & Inclusivity

Comprehensive strategies, practical guidelines, and real-world case studies for designing digital products with inclusivity at their core. Covers how to create digital experiences that are accessible, engaging, and respectful of all users' needs.

Ethical Design Principles

A 77-page overview guide to incorporating ethical principles into product design. Covers privacy, accessibility, and sustainability with examples and reference links.

Design Artifact

A collective list of design artifacts to measure competency — organized across 6 phases: Research & Analysis, Ideation & Conceptualisation, Design & Prototyping, Testing & Validation, Documentation & Communication, and Post-Launch & Maintenance. Includes a rating system and quick guide.

MoSCoW Prioritisation

Interactive prioritisation template using Figma variables and auto-layout. Drag-and-drop cards into Must Have / Should Have / Could Have / Won't Have sections — colors change automatically.

Grocery App UI Kit & Design

Full UI kit and design for a grocery checklist purchase application — components, screens, and design system elements.