End-to-end UX and product build for a one-woman press-on nail studio in Mirpur, Pakistan — research, wireframes, design system, live storefront, and a Filament admin panel that Mona runs herself.
Visit nailsbymona.pk ↗
Mona is a Fine Arts graduate running a handmade press-on nail studio out of her home in Mirpur, Azad Kashmir. With ~1,000 followers, two years of word-of-mouth, and ~30 monthly orders — all handled via voice notes and back-and-forth WhatsApp photos — the business had real craft but no infrastructure. No website, no checkout, no way to be discovered outside Instagram.
But “build a website” was the wrong frame. Eight Pakistani competitors already have websites — generic Shopify storefronts that haven't moved the needle. The real challenge was to design a digital service that earns trust on the first visit, makes the artisan craft visible, and removes the friction that today only Mona-on-WhatsApp can resolve. That meant starting with users, not pages.
Before any pixel or template, I spent the first week writing the plan with Claude Code as a thinking partner. The plan was reviewed and revised three times before I drew a single wireframe — that's the work that prevents Frankensteining 60% of the way through a build. Only then did I move to UX research, then to wireframes in Claude Design, then to the Laravel build.
Started not with a Figma file but a 90-minute planning session with Claude Code as a thinking partner. Output: a 34-section CLAUDE.md project bible covering business context, fixed decisions, brand rules, scope cuts, and explicit non-goals. That document remained the source of truth across every session that followed.
Three follow-up sessions stress-tested the plan: competitor research, payment-method trade-offs, photography rules, and what to deliberately NOT build. Locked the Fixed Decisions table — Laravel + Filament, manual payments at MVP (no SafePay until Phase 6), hand-only photography, no AI image generation, no founder face anywhere.
3 personas (Sana, Hira, Ayesha), 3 journey maps, a 6-stage service blueprint, IA card-sort plan, pain-points → opportunities matrix, and a UX principles deck. All documented in /docs/ux/ (13 markdown files) before any UI was drawn. Real research, written down, reviewable.
Used Claude Design for low-fi sketchy wireframes with annotations — the kind of margin notes that get lost in Figma comments. 18 artboards on one infinite canvas, including 2 hero variants for every key page so layout decisions could be compared side-by-side.
Laravel 11 + Blade + Tailwind v4 + jQuery — server-rendered, no React. 13 public pages live-camera state machine in vanilla JS. Six transactional email templates. Lighthouse mobile ≥ 90 on every page. Bag drawer + localStorage + multi-step checkout with separate URLs for back-button safety on Pakistan-mobile 4G.
Filament v4 admin panel with 11 resources (orders, products, customers, blog, FAQs, settings, finance, expenses, etc.). 5 cornerstone blog posts seeded. Sitemap + RSS + Schema.org JSON-LD across every page. Deployed to nailsbymona.pk on DigitalOcean with Certbot SSL and a supervised queue worker.
Tools across the project: Claude Code (planning, code), Claude Design (wireframes), Figma & FigJam (research artefacts), Laravel + Filament (build), DigitalOcean + Certbot (deploy).
I audited 8 Pakistani press-on competitors across Instagram, websites, pricing, and DM reviews. Three signals jumped out — every brand says “custom” but none demonstrate it; bridal is over-promised and under-served; and not one brand owns the religious-fit angle that Mona stumbled into for personal reasons.
I synthesised three personas from competitor IG reviews, Mona's DM records, and market data on Pakistani working women. I chose the personas with the most distinct trigger moments— not the most distinct demographics — because the trigger shapes the whole journey. Per the brand's no-face discipline, the avatars are hand-and-symbol illustrations rather than portraits.
"I love acrylics but my real nails are destroyed. I want something that looks salon-finished without the 3-hour trip."
"I need three coordinated looks — Mehendi, Baraat, Valima — that I can trust completely."
"I can't wear regular polish — water can't reach my nail bed during ablution. Press-ons solve this exactly."
Hira's journey starts at engagement and ends at her Valima. In between are five distinct emotional states. I mapped the friction, the trust-broken moments, and the exact points where Mona's offering replaces what salons currently fail at.
Stage 3 is the moment most Pakistani brands lose her — and it's also where craft can break through. Naming Mirpur, naming Mona, and showing the studio (without showing the person) does more for trust than any badge or testimonial.
Every competitor uses the word "custom." None demonstrate it. The differentiator isn't being custom — it's looking custom. That's why we invested in a guided live-camera capture with SVG overlays: 2 close-up photos (fingers + thumb), a green/red alignment heuristic, and macro framing that reads each nail width directly off a coin reference.
Practicing Muslim women cannot wear traditional polish — water can't reach the nail bed during ablution. Press-ons solve this exactly: they remove cleanly. Mona started this business for that reason. Surfacing it as the 4th brand pillar opens a content moat with zero competition on the exact-match search query.
A face on the website would invite DM spam, conflate the brand with the person, and cap scaling. The discipline is hand-only photography and brand-addressed WhatsApp pre-fills ("Hello Nails by Mona…"). A small detail that compounds — every customer interaction reinforces a brand, not a phone number.
A bride 4 weeks before her mehendi is a fundamentally different user from a working professional browsing on her commute. The Bridal Trio gets its own page, distinct champagne-and-gold photography style, a 4-week lead-time rule surfaced in the hero, and a WhatsApp handoff for orders placed too close to the date.
A 3-year-old Android on patchy 4G, in landscape, in a salon waiting room. Lighthouse mobile ≥ 90 isn't a polish goal — it's a market-fit requirement. Every flow has a graceful degradation path. The live camera itself falls back to file upload, which falls back to "send via WhatsApp."
Nav locked early: Shop · Bridal · About · Journal · Help. Five links, no mega-menu, no dropdowns. Every other page is reachable within two taps from the homepage. The order flow is a separate spine (not in the main nav) entered only from the bag drawer.
Each step is its own URL with server-rendered state — back-button safe on patchy Pakistan 4G. Returning customers (matched by phone + email, normalised across +92 / 0 prefixes) skip sizing and get a 5% reorder discount surfaced immediately.
I mapped three end-to-end flows to validate the IA before any UI was built. Each one has at least one graceful-degradation branch — Pakistan-mobile-first means assuming things will fail.
I used Claude Design to wireframe the entire product on one infinite canvas. The mid-fi sketchy style kept the focus on layout, hierarchy, and annotated decisions — the kind of margin notes that get lost in Figma comments. Two hero variants for every key page so layout calls could be compared side-by-side before the build began. The board below became the brief for the Laravel + Blade port that followed.
The discipline that holds the brand together is restraint. The page is bone-coloured; cards are paper; alt sections are shell. Lavender (the logo colour, #BFA4CE) appears in eight specific spots only — CTAs, focus rings, prices, active nav, step indicators, accent rules under H2s, selected payment tiles, and eyebrow labels. Nowhere else. Saturation is what makes accents work.
Built in Laravel + Blade + Tailwind v4 + jQuery. No JS framework on the public storefront — Pakistan-mobile means smaller JS bundles, faster TTI, fewer hydration costs. Every page is server-rendered with Schema.org JSON-LD (Organization, Product, Article, FAQPage, BreadcrumbList). Lighthouse mobile targets ≥ 90 across the board.
Gel base, colour layers, and topcoat applied by hand. Custom measurements read from coin-scale photos. A free first refit guarantee backs every order. The photography brief: hands only, never faces — disciplined brand identity disguised as aesthetic choice.
Eight competitors say “custom.” None show how. So I designed and built a guided live-camera capture: two close-up photos (fingers row + thumb) inside a single permission session, with per-state SVG overlays and a green/red alignment heuristic. Sizing is the most common DM question Mona gets — turning it into a 90-second guided flow turns the most error-prone moment into the most differentiated one.
The state machine lives at a single URL — camera permission is requested oncefor the whole flow. Brightness sampling runs every 500ms; a Sobel-style edge-contrast heuristic paints the overlay green when something looks right, red when it doesn't. The thumb state uses halved thresholds (fewer edges by definition). Desktop users hit a QR-handoff state with a wa.me deep-link instead — laptop webcams face the user, not the nails.
Built on Filament v4 — a Laravel admin framework. Every resource was scoped to Mona's actual workflow: morning glance at orders needing attention, one-tap WhatsApp prefills, a payment-age SLA badge that turns red after 24 hours, bulk-confirm for the overnight stack. No training documentation needed.
The site launched recently. These are the 12-month targets — not Dribbble likes or Lighthouse scores, but the business metrics the design decisions were built to move.
It's the discipline of what we deliberately did not build. No “Order Now” buttons, no AI chatbot, no founder face, no payment gateway at launch. Each “no” was a decision, not an oversight. Premature features are the enemy of a one-woman studio that needs to ship and survive.
What I'm least certain about is live-camera adoption. The whole sizing differentiation rests on it. If only 20% of customers grant permission and the rest fall back to upload, we still ship a working product — but the wedge gets smaller. That's why sizing_capture_method is tracked in the schema from day one, and the first round of usability testing is scoped for the week the first 20 organic orders land.
