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. Since launch, redesigned and refined using real usage data.
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. After launch, the work shifted from planning to measuring and iterating.
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 for products, 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 + Blade + Tailwind v4 + jQuery: server-rendered, no React. 13 public pages and a live-camera state machine in vanilla JS. Six transactional email templates. 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.
Added GA4 funnel events (add to bag, checkout, sizing completed, purchase), Microsoft Clarity session recordings, Search Console and server-log checks. For the first time I could see who actually arrived and where they dropped off, instead of guessing from personas.
Rebuilt the home page around the data, moved Add to bag up on product pages, added site-wide search, and shipped workflow changes Mona asked for once she was running the business on it every day. Then a speed, SEO and security pass.
Tools across the project: Claude Code (planning, code), Claude Design (wireframes), Figma & FigJam (research artefacts), Laravel + Filament (build), DigitalOcean + Cloudflare (deploy), GA4, Microsoft Clarity & Search Console (measure).
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. Speed isn't a polish goal here, 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, so it's 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.
A consistency pass after launch tightened it further. Plain lavender text was only about 1.8:1 against the shell background, so every lilac word and line icon now uses one darker shade,#8A6CA5, and the logo lilac is kept for fills. Every icon was redrawn as an outline at one line weight, with one icon per meaning across the whole site.
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). The screens below are the current live site, after the post-launch redesign.
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, so a 90-second guided flow turns the most error-prone moment into the most differentiated one.
The state machine lives at a single URL, so camera permission is requested once for 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, because laptop webcams face the user, not the nails.
Customers on iPhone Chrome waited about a minute after taking their photos. Server logs showed the server handled the upload in under half a second, so the delay was on the phone. The cause: the page was still holding the camera on the review screen, and iOS slows uploads while capture is active. Releasing the camera as soon as the last photo is taken brought the upload from ~66 seconds to ~3 seconds. Errors now show inline with an “upload from my gallery instead” link, rather than a silent spinner.
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 personas assumed someone researching press-ons: reading about fit, comparing brands, taking her time. Analytics and Clarity recordings told a different story. Most visitors came from Instagram ads, browsing inside Instagram's in-app browser on a phone, and left the home page within seconds having scrolled only a fraction of it.
On a phone, the first design and its first price sat about four screens down. The average ad visitor scrolled about two, so most people saw no nails and no prices. She tapped a Reel of a design she liked; in the first five seconds she needs to know: is this the thing from the ad, how much is it, will it fit, and can I trust this shop? The old page answered those in the reverse order.
Compact hero with the photo uncovered and a starting price, then a two-column grid of designs with prices and quick Add to bag. Fit, price-vs-salon and trust each got one short block, in the order the objections come up. Half the length.
Add to bag moved directly under the price, above the description, with four short buy facts beside it. On phones, a sticky price-and-button bar appears whenever the main button scrolls away.
A search box that understands local spellings (mehndi/mehendi, walima/valima, shaadi → bridal), sort, and every category as visible pills. Hidden categories in a sideways-scrolling row weren’t being discovered.
Full-screen on phones, a dropdown on desktop. Shows matching designs with prices plus relevant guides, and offers a custom set over WhatsApp when nothing matches.
Once Mona was handling real orders every day, her feedback became the best usability test. Each change below came from something that slowed her down or confused a customer.
Mona creates a private link from the admin with the agreed sets and price. The customer sizes and pays through the normal checkout, so custom orders show up in revenue, tracking and saved sizing like any other order.
Every set is made to measure and can’t be resold, and many customers never read the balance-due email. The advance-then-balance flow was replaced with one payment before production. Older orders keep their original terms.
Each payment method has a “Show on checkout” switch. The checkout, the order rules on the server and every line of payment copy on the site follow whatever is switched on.
Per-stage WhatsApp prompts were built, then trimmed back at Mona’s request. Emails are the automatic channel; WhatsApp stays as an optional button.
One flat Rs. 10,000 Trio with real wedding photos, each night linked to its real set. A price comparison that no longer matched the shop and packaging that wasn’t ready yet were removed.
A bell and push notification when a customer uploads a payment proof, whole rows tappable on a phone, and a faster dashboard that no longer refreshes every few seconds.
In parallel: a speed pass (photos resized into phone-sized versions, self-hosted fonts, analytics loaded after the page), SEO work (unique product titles, product details, Google Merchant Center feed, old product links redirected instead of 404ing) and a site-wide consistency pass on copy, colour and icons.
Approximate figures from Lighthouse, Search Console, server logs and on-device tests, comparing the launch version with today's site.
I'm still proud of 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, and it kept a one-woman studio able to ship.
The risk I worried about most turned out fine: every order so far has used the live camera, so the sizing wedge holds. What I got wrong was the visitor. Personas built from research described a careful shopper; the data showed someone arriving from an ad with a thumb on the back button. The biggest improvements came from watching real behaviour and from listening to the person running the business, not from the original plan.
Next: real customer reviews with photos, category landing pages for the designs people search for most, and a usability test of the new home page with first-time visitors.
