# 03 UX SPECIFICATION Mobile order is given top to bottom. Desktop changes are noted per page. Mobile is the primary design target. --- ## 1. Homepage, eleven sections Cut from the brief's fourteen. Reasoning in decision D-19. 1. Header 2. Hero: one image, headline, one CTA. Not a carousel. The hero image is the LCP element and gets `fetchpriority="high"`. 3. Trust strip: three items, COD available, Pakistan-wide delivery, easy exchange 4. Featured categories: two-column tile grid, six tiles 5. Best sellers: horizontal scroll carousel, eight cards, CSS scroll-snap, no slider library 6. **Shop by size**: four chips, Single, Double, Queen, King. New, and the highest-value addition to the brief. 7. Featured collection: editorial image plus a four-card grid 8. Why choose us: four short points with icons 9. Customer reviews: three real reviews with product thumbnail and Verified Purchase mark 10. WhatsApp CTA band 11. Footer Desktop: hero splits 60/40 image to copy, categories go to three columns, carousels become four-up grids with arrows, reviews go three across, everything inside `--w-content`. --- ## 2. Category and listing page 1. Header 2. Breadcrumb 3. H1 plus a one or two line category description 4. Sticky bar: Filter button, Sort select 5. Active filter chips, each individually clearable 6. Product grid, two columns on mobile at roughly 172px per card 7. Load more button at 24 products. Not infinite scroll, the footer must stay reachable. 8. SEO body copy block 9. Subcategory links 10. Footer Desktop: filters move to a persistent 240px left rail, the sticky bar disappears, grid goes to three columns at 1024px and four at 1200px. Filters in MVP: Price, Category, Fabric, Size, Colour. Pattern and Availability are deferred, the product data will not exist at launch. Sort options: Popular, Newest, Price low to high, Price high to low. Zero-result state: a friendly message plus a Clear all button, never a blank grid. --- ## 3. Product detail page The highest-value page in the build. Most ad traffic lands here. 1. Header 2. Breadcrumb 3. Gallery, 1:1 square main image, swipe track, dot indicator 4. Title 5. Rating with review count, anchored to the reviews section 6. Price block, with the rupee amount saved when a discount is genuine 7. Colour swatches 8. Size pills 9. Live selection line: "Selected: Queen, Ivory" 10. Stock status 11. Quantity stepper 12. Add to Cart and Buy Now, side by side 13. **COD and delivery card**, directly under the buttons. This is the single highest-value block on the page for this market. 14. Short description, three bullets maximum 15. Specifications accordion: Fabric, Size, Dimensions, Pieces, Includes, Pattern, Season, Care 16. What's included 17. Returns and exchange summary, two lines, linked to the full policy 18. Reviews 19. Related products 20. Footer A sticky bottom bar appears once the main CTA scrolls out of view, showing price and Add to Cart. Desktop: gallery left at 58 percent, a sticky buy column right at 42 percent, accordions open by default in two columns, no sticky bar. Variation behaviour: selecting a colour swaps the gallery's first image and updates price, SKU and stock. It must not scroll the page or collapse the gallery. Unavailable combinations are struck through and still tappable, and tapping shows "Queen in Ivory is out of stock right now." Size pills, not a select. Hiding sizes behind a dropdown costs conversions. --- ## 4. Cart 1. Header 2. Line items: image, variation, quantity stepper, unit price, line total, remove 3. Coupon field, collapsed behind "Have a coupon code?" so it does not send people off hunting for codes 4. Free shipping progress line, only if a threshold is configured 5. Totals 6. Proceed to Checkout, full width, repeated at the top when there are three or more items 7. Continue shopping link 8. Trust strip 9. Footer Desktop: items left, sticky summary card right. Removing an item shows an undo link. --- ## 5. Checkout One page, three visually separated cards: Contact, Delivery, Payment. Not multi-step. Reasoning: multi-step wins where payment is card-first and the form is long. Here the form is nine fields and COD captures no payment, so steps only add taps and abandonment points. The order summary sits collapsed at the top on mobile behind "Order summary, Rs 4,850" and expands inline. ### Field order | # | Field | Type and behaviour | Error copy | |---|---|---|---| | 1 | Full name | `text`, `autocomplete=name`, `autocapitalize=words` | Please enter your full name. | | 2 | Mobile number | `tel`, `inputmode=numeric`, `autocomplete=tel`, `maxlength=11`, strips spaces and dashes on input, validates `^03[0-9]{9}$` | Enter an 11 digit mobile number starting with 03. | | 3 | WhatsApp same as mobile | checkbox, checked by default, reveals a second tel field when unchecked | | | 4 | Email (optional) | `email`, `inputmode=email`, validated only if non-empty | That email address does not look right. | | 5 | Province | native `select`, 7 options | Please choose your province. | | 6 | City | combo input with `list=` datalist, loaded per province after selection | Please enter your city. | | 7 | Area or sector | `text`, optional, placeholder varies by city | | | 8 | Complete address | `textarea`, 3 rows, `autocomplete=street-address`, minimum 12 characters, rejects "same" and "as above" | Please add your full address so the rider can find you. | | 9 | Landmark | `text`, optional | | | 10 | Order notes | `textarea`, collapsed | | | 11 | Payment | two radio cards, COD first and preselected | | Field 2 hint, under the input: "We will call you on this number to confirm your order." Field 8 hint: "House or flat number, street, and any nearby landmark." **Do not show a `+92` prefix chip.** Pakistani buyers type `03xxxxxxxxx`. Accept that format natively and normalise server side. ### The city problem Free text gives "lahoree", "LHR" and "Lhr cantt", which breaks courier booking. A 500-city select is a 40KB payload. Solution: a datalist-backed combo input. The province selection triggers a fetch of that province's city list, roughly 40 to 120 entries at 2 to 6KB. Free text is still accepted, and a non-matching entry sets a flag so the admin sees "City not recognised, verify on call". **Never block the order on an unrecognised city.** A fixed list loses real orders from smaller towns. Area placeholders vary by city: Karachi shows "e.g. Gulshan-e-Iqbal Block 5", Islamabad shows "e.g. F-11/3", Lahore shows "e.g. DHA Phase 5". ### Validation behaviour Validate on blur, never on keystroke, never before the first blur. Errors render inline below the field with a 16px icon, plus `aria-invalid` and `aria-describedby`. On a failed submit, scroll to and focus the first invalid field and show one summary line at the top: "Please check 2 fields below." Disable the submit button only during the request, never for invalid state. A greyed-out button with no explanation is the most common checkout dead end. Persist all field values in `sessionStorage` on blur so a back button or a payment redirect does not wipe the form. Payment radios are cards, not a dropdown. COD is first with the sub-line "Pay the rider in cash when your order arrives." If a COD fee exists it is shown inside the card, never as a surprise in the totals. --- ## 6. Thank you page 1. Header, logo only, no navigation. Post-purchase distraction costs nothing and gains nothing. 2. Confirmation heading with the order number 3. "We will call you shortly on 0321 4567890 to confirm" line, because that is the actual process 4. Order summary 5. Delivery address with an Edit link that opens WhatsApp pre-filled 6. Estimated delivery date 7. WhatsApp support button 8. Continue shopping 9. Footer Desktop is the same, centred at `--w-prose`. --- ## 7. Trust elements Honest, and where each appears: - Real phone number and WhatsApp number: header on desktop, footer everywhere, thank-you page - Physical business address in the footer. This alone separates a real brand from a drop-shipper in this market. - COD badge: product cards, product page, checkout - Delivery estimate as a date range from a configured lead time plus city tier: product page and checkout - Return and exchange policy, two lines on the product page linking to the full page - Verified Purchase label on reviews, driven by WooCommerce's own verified flag, never assigned by hand - "Delivered to 2,400+ homes" only if the number comes from a live query against delivered orders and updates itself Excluded, per the brief and by decision: - countdown timers - "12 people are viewing this" - strikethrough prices for a value the item never sold at - fake low-stock counters - spin-to-win popups - carousels of invented reviewer names Grey area, handled explicitly: "Only a few left" is honest only when wired to real stock. Gate it on `manage_stock` being enabled and quantity under 5. Never show it for stock-unmanaged products. --- ## 8. Microcopy | Context | String | |---|---| | Add to cart | Add to Cart | | After add, button | Added (1.5s, then reverts) | | After add, toast | Added to cart. Rs 2,450 | | Buy now | Buy Now | | COD badge, long | Cash on Delivery available | | COD badge, on card | COD | | Delivery estimate | Delivery in 2 to 4 working days | | Delivery estimate, city known | Get it by Thu, 12 Sep | | Out of stock | Out of stock | | Out of stock sub-line | This one is being restocked. Message us on WhatsApp and we will let you know when it is back. | | Empty cart heading | Your cart is empty | | Empty cart body | Nothing here yet. Have a look at our best sellers, they go quickly. | | Empty cart button | Shop Bed Sheets | | Cart CTA | Proceed to Checkout | | Place order, COD | Place Order, Pay Rs 4,850 on Delivery | | Place order, online | Pay Rs 4,850 Now | | Order placed heading | Thank you, your order is confirmed | | Order placed sub | Order #10482. We will call you on 0321 4567890 shortly to confirm before we dispatch. | | Name error | Please enter your full name. | | Phone error | Enter an 11 digit mobile number starting with 03. | | City error | Please enter your city. | | Address error | Please add your full address so the rider can find you. | | Email error | That email address does not look right. | | Size not chosen | Please choose a size. | | Colour not chosen | Please choose a colour. | | Submit summary error | Please check 2 fields below. | | Coupon invalid | That coupon code is not valid. | | Coupon minimum | This coupon needs a minimum order of Rs 3,000. | | Variation unavailable | Queen in Ivory is out of stock right now. | Tone: warm, direct, plainly Pakistani-English. Not cheesy, no exclamation marks, no "Hurry!".