Work
Four projects from my time at Zetwerk — India's largest manufacturing platform. Each one taught me something different about designing for complexity, adoption, and real-world constraints.
ZetUI Design System
How I reduced Figma file load times from 2-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.
Builds
Things I designed AND built — end to end. Riffit, Sabeel and Snap to Jira solo: no handoffs, no separate dev team, just problem → design → code → ship. Tovak as part of a small team, where I lead product and design. I build with Claude as a thinking partner, not a magic wand.
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.
RiffitTovak
Orders, production, dispatch, GST invoices and payments for small Indian manufacturers, run from the WhatsApp their team already uses, with a web app for the office and an export for Tally.
Indian factories doing ₹5–50 crore a year run on WhatsApp groups, paper registers and Tally. Orders arrive as chats and voice notes, production status takes a phone call, and the same order is entered three times: on WhatsApp, in a register or Excel, then in Tally. Tally keeps the books but never sees the floor, and a full ERP asks a floor team that lives on WhatsApp to learn a desktop app.
Three groups decide whether software sticks. The owner wants to know what's late and who owes him. His chartered accountant can veto any tool and asks one question: does it export clean data to Tally? And the supervisors and storekeepers will never open a web app at all.
The records already exist. The storekeeper writes everything down. What breaks is the re-entry, and the month-end gap between the register, the stock and the books.
Stack: React 19, Vite, TanStack Router + Query, Tailwind CSS v4, NestJS modular monolith, Drizzle ORM, Zod, PostgreSQL on Neon, Meta WhatsApp Cloud API (direct, no BSP), WhatsApp Flows, GPT-5 mini behind a swappable provider interface, @tovak-os tokens, UI (shadcn/Radix), brand assets, Storybook, PDFKit, pdfcpu, Tally XML export, Next.js static export, GSAP ScrollTrigger, Web Worker frame decoding, Render, Resend (email), Sentry, PostHog
Tovak is a team build, and the part I owned was deciding what each person sees: the owner gets the state of the factory, the accountant gets a Tally export, and the floor gets its jobs and nothing else. I carried that through the specs, the design system and most of the web front end. The habit I'm keeping is auditing the product as it is, from the code, before deciding what it should become.
TovakSabeel
A Qur'an memorisation app built around traditional Waqf-based learning, with word-by-word audio sync — built from scratch, including the 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 (v1), React, TypeScript, Capacitor (Android), 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), cpfair/quran-align alignments
A UX designer with no formal coding background shipped a live PWA, then a native rebuild, 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.
SabeelSnap to Jira
A Chrome extension that captures a screenshot or a screen recording, annotates it, and files it to Jira, ClickUp or Linear with the bug's context attached, 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.
Snap to JiraWriting
I write about the intersection of design, AI, and building things. Sometimes it's a process breakdown, sometimes it's a thought piece, sometimes it's "here's exactly how I built this thing."
Published in Bootcamp, May 2026
For every designer who's been told they need a developer to ship a real product: how I shipped one, start to finish.
Published in Bootcamp, May 2026
A step-by-step walkthrough of the full two-way design-to-code pipeline, with every gotcha and wrong turn on the way.
Published in UX Planet, May 2025
The full journey of Snap to Jira: problem, AI tools, decisions, and the shipped product.
Published in UX Planet, May 2024
8 scrolling animations deconstructed — content-over-content, 3D depth, card stacking, and more. Includes recreations.
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.
Published in UX Planet, Jan 2023
A quick guide on migrating design files from Adobe XD to Figma seamlessly.
Published in Bootcamp, Jan 2023
Practical UX project advice distilled from real experience.
Published in Bootcamp, Jun 2020
Designing an omnichannel video calling platform (mobile, desktop, tablet, feature phones) for the Digital India Innovation Challenge.
Published in UX Planet, Mar 2020
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.
Resources
Free tools, templates, and knowledge I've put out into the world. Some are design resources, some are products I built, some are things I wrote because I couldn't find them anywhere else.
Tools & Products
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.
Capture a screenshot or a screen recording, annotate it, and file it to Jira, ClickUp or Linear without leaving your tab, with the bug's context attached. Now Snap to Jira, ClickUp & More. Free and actively maintained.
A progressive web app with word-by-word audio synchronization for Quran memorization using traditional Waqf-based segmented learning. Zero dependencies. Audio segments are functional but manual accuracy review is still in progress; a native Android app is in testing.
E-books
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.
A 77-page overview guide to incorporating ethical principles into product design. Covers privacy, accessibility, and sustainability with examples and reference links.
Figma Templates
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.
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.
Full UI kit and design for a grocery checklist purchase application — components, screens, and design system elements.