Critique of the five homepage concepts

Independent review of concepts/01-postcards through concepts/05-game-night against pac-redesign-brief.md (sections 3, 9, 10, 13), concepts/shared/BRIEF.md, concepts/THESES.md and the analytics baseline. Every concept's NOTES.md, index.html and four screenshots (mobile-fold at 375x812, mobile full page, desktop-fold at 1440x900, desktop full page) were read. Pixel positions below are CSS pixels at 375 wide unless stated; the mobile screenshots are 2x, so device pixels were halved. Page heights at 375: 01 is 11538px, 02 is 9824px, 03 is 11167px, 04 is 9609px, 05 is 10958px.

Scores are integers 1 to 5. A clear hard-constraint violation caps adherence at 2; none of the five has one, so the adherence column separates on soft violations and on claims in NOTES.md that the screenshots do not support.

Scoring table

Concept Brand elevation Originality Adherence Mobile at 375 Conversion Total
01 Postcards 3 4 5 4 4 20
02 The line sheet 4 3 4 3 3 17
03 One thread 5 4 4 3 3 19
04 The deal 3 5 4 4 4 20
05 Game night, 7 pm 4 4 5 3 3 19

Shared facts that held for all five, checked by grep: exactly one <h1>; zero text-transform; zero carousel, marquee, autoplay or setInterval; seven distinct real variant= ids; zero whole-word "hat"; one fetchpriority="high"; six data-placeholder="review"; two Google Fonts families each; edition rows at 72 to 76 percent width with a peek and no arrows; Beach first.

01 Postcards

Scores and evidence

Brand elevation 3. Fredoka at display size plus rotated paper, blush washi tape and pins reads as a craft blog or an Etsy shop header, not a design-led lifestyle brand. It is unmistakably not The Mahjong Line, but the register is cute rather than premium. The hero decorates the product: .stamp{top:18px;right:16px;width:60px} and .postmark{top:6px;right:46px;width:150px} sit on the sweater's collar and shoulder in both mobile-fold.png and desktop-fold.png, so the first product a visitor sees is partly covered by a cancellation mark.

Originality 4. The travelogue is carried through every section, not just the hero: postcard backs for the ladder, postmarked review cards whose ring text is drawn from the quote, the email form as an address side with the roundel in the stamp box. A jury would remember "the postcards". It loses a point because pinned, tilted paper with tape is a familiar Pinterest trope and the tilt is applied to everything, including the seven colorway tiles, where it works against the product.

Adherence 5. No violation found. Accent --sky appears only on .btn, .tlink, .skip and :focus-visible. Ladder is a snap row that lands on Complete Set with a three-cell price strip above it, so all three prices are visible at once. Text never sits over images. The two keyframes (land, ink) compose one 800ms hero moment. Image budget at full scroll is about 1.6MB against the 1.2MB guidance, and Lighthouse was not run.

Mobile 4. Best fold in the set: the primary button sits at about 305 to 349px with the text link beside it, and the sweater postcard follows immediately. Snap ladder with the price strip is the most usable ladder of the five. It loses a point for length (11538px, the longest page, about 14 viewports) driven by a single-column review section with six postcard backs and three photo postcards, and because the hero composition's second postcard overlaps the first postcard's caption.

Conversion 4. Sweater first, button early, seven one-tap deep links with the actual flats, Complete Set landing by default, Beach first. Held back by the hero product being small (a postcard about 300px wide with a stamp over the collar) and by travelogue captions on the wall ("Gelato stop in Italy") that entertain but do not help a buyer choose between seven colours faster than the names alone.

Weakest section

Hero. The product is the brand's revenue and the postmark and stamp are printed over its collar. The composition also stacks two rotated postcards so the beach card's tape and corner collide with the sweater caption at 375 (mobile-00 slice, around y=1000 to 1200).

The one change

Straighten the page: set --tilt:0 and remove the washi tape on every postcard except the two in the hero. Let the paper margin, the address-side rules and the postmarks carry the postcard idea. The wall's seven flats and the five edition trays then read as products, and the page moves from scrapbook to editorial in one CSS pass.

Secondary fixes

Cross-concept note

Shares the h1 "Mahjong, made portable." with 03. Portability is 01's whole thesis, so 01 keeps it and 03 should change. Its hero sweater is the same Green/Blush flat 03 and 05 also lead with.

02 The line sheet

Scores and evidence

Brand elevation 4. Syne 800 index numerals in the left margin, hairlines, tabular numerals and real <table> markup produce a confident, adult page; the desktop hero and the ruled colorway list are the most professional spreads in the set. It stops short of 5 because the flats are shot on pure white and framed with hairlines on a #FCFAF6 page, so the hero and wall read as catalogue product-on-white boxes rather than lifestyle, and because the numbered-row spec sheet is a well-worn editorial format.

Originality 3. The thesis is carried through completely (01 to 09, indices on every tile and review), but "numbered rows with hairlines" is what many portfolio and Aesop-adjacent stores already look like, and with the logo removed the category row and ladder are structurally the same as 03's. The jury would call it well made before they called it memorable.

Adherence 4. Two soft violations, both admitted in NOTES.md. The accent is two shades of one hue: .btn uses --accent #E13086 while .btn-sm and .link use --accent-deep #C4187A. White on #E13086 is 4.23:1, under the shared brief's "4.5:1 for all text" line; the builder relies on the 19px bold large-text threshold. The colorway anchors carry real deep links but a plain tap is intercepted to swap the image, so reaching the PDP with the colour preselected is two taps; this follows C2 in the concepts doc, so it is noted rather than counted.

Mobile 3. The primary button starts at about 786px and ends at about 835px, so at 375x812 it is cut in half by the fold and on a 667px phone it is a full screen down; NOTES.md reports the image bottom at 627px but not the button. Row 03's seven chips are 44px anchors with a 32px visible chip and gap:4px, so seven adjacent hit areas touch across 332px. The ladder puts three full-width accent buttons in a stack ("Build the set", "Start with a deck", "Send the gift"), which dilutes the default. Shortest page in the set at 9824px, and the three-column table is legible at 375.

Conversion 3. The sweater is first and the wall is a real table of seven colorways, but on mobile the colorways are CSS squares with no garment visible until tapped, and the PDP is two taps away. Complete Set is highlighted in the table and listed first, but every tier gets an accent button. Beach leads. Lighthouse mobile 100 was measured, the best in the set, which helps.

Weakest section

The sweater colorway wall. The brief says this is where the page spends its boldness; row 03 is a PDP gallery with hex chips, exactly the "hex square, not a knit crop" the concepts doc warned against, and the only place the thesis turns from restraint into thinness.

The one change

Rebuild row 03 at 375 as a ruled 2-up grid of the seven flats, each <a> a one-tap deep link with name and "From $95" beneath in the tabular style, and keep the large image plus ruled list, with the crossfade as the motion moment, for 1024px and up. Product imagery per colorway and one tap to the PDP on the device that carries 78 percent of sessions.

Secondary fixes

Cross-concept note

Shares the h1 "Dress for the table." with 04 and 05; 05 has the strongest claim (it is the 6:30 event name), so 02 should change, for example to a spec-sheet line such as "Mahjong, in twelve ounces." Shares the ruled editorial language and margin index numerals with 03; 02 keeps the numerals because they are its thesis, 03 should drop them.

03 One thread

Scores and evidence

Brand elevation 5. Fraunces at 400 with the soft axis, warm ink on warm white, hairlines, and the flats multiplied into the page so there is no white box: this is the only concept that looks like a premium editorial brand on both screens without qualification. The desaturated roundel (.brand img{filter:url(#ink);mix-blend-mode:multiply}) is a real brand decision the client did not ask for; it suits the thesis but removes the brand's most recognisable colour asset from the header.

Originality 4. The 4px thread that starts at the collar, weaves at every section boundary and ends as a loop beside the email field is the single most original device in the set, and it is tied to commerce because it takes the colour of the last colorway tapped. Everything around it is a very good editorial template, and Fraunces plus hairlines is now common in DTC. Without the thread it would be confused with 02.

Adherence 4. Soft issues: when Navy/White is selected the thread becomes the accent hex, which the builder acknowledges. In desktop.png the review grid renders two empty hairline frames where the boat and floral photos should be (roughly y=5600 to 6600); the same files render in mobile.png, so it may be a lazy-load capture artefact, but it is what was submitted and the deliverable rule is "never ship a broken image". The colorway anchors intercept a plain tap, as in 02.

Mobile 3. The primary button sits at about 740 to 792px, inside an 812 fold by 20px and off a 667 fold entirely; the h1, lede, full-width flat, caption and a grey "Pick your colorway" link all come first. Seven 44px chips in one row with gap:2px. The ladder is stacked and takes about 1.6 viewports; Complete Set is the only boxed tier and the only button, which is the right steer. The review section is single column with three large 3:4 photos, so the page runs to 11167px.

Conversion 3. Sweater first, colour name updates the CTA label and href, and the ladder steers cleanly to Complete Set. But the wall is seven plain discs, the PDP is two taps away, the button is at the fold edge, and the page is long. The hero and wall show the same Green/Blush file at nearly the same size 1.5 viewports apart.

Weakest section

The sweater colorway wall. The boldness went into the thread and the wall itself is quieter than the hero: one flat and seven 44px dots. For the product that is 66 percent of revenue the section shows less than the PDP does.

The one change

Replace the disc chips with the seven flats as 4:5 tiles (2-up at 375, one row at 1440). A tap on an unselected tile swaps the figure and recolours the thread (the motion moment stays); a tap on the already selected tile, marked aria-current, follows its deep link. The wall becomes the bold element the brief asked for and one-tap purchase intent is preserved.

Secondary fixes

Cross-concept note

Shares "Mahjong, made portable." with 01, whose thesis owns the line; 03 should change (its own wall h2 "The only color is the one you choose." or "Game night, anywhere." both fit). Shares the hero composition (h1 above a full-width flat on white with a caption and CTA beneath) with 02 and 05, and the exact hero file with 05.

04 The deal

Scores and evidence

Brand elevation 3. The card system is beautifully derived from the product (real 1029:1600 proportion, real dotted-star ring, rotated indices) and the navy colorway band is a striking spread. But applying a coloured star ring to every category tile, tier, edition, review, learn card and the email form produces a busy, toy-like page that sits closer to the maximal game-brand end of the spectrum than any other concept, and Unbounded 700 at h1 size is loud. The Summit ring #F0A030 and Modern ring #3A8FD9 are outside the sweater palette (admitted in NOTES.md). This reads as a very good game brand, not a lifestyle brand.

Originality 5. "Everything is a card" is carried through more completely than any other thesis: the aggregate rating is a card, the ladder tiers are hands of increasing size, the email form is a card with an "Oct 1 drop day" index. With the logo removed it could not be confused with the other four. The hero deal-in is the most product-native motion moment in the set.

Adherence 4. One soft palette violation (Summit orange, Modern blue). "Rounded cards with drop shadows on everything" is banned; 04 has rounded cards on everything without shadows, which honours the letter and tests the spirit. Hero back-card strips are about 46px, just over the 44px minimum. First paint loads all seven -800 flats (about 610KB by the builder's count) and Lighthouse was not run, so the 90 target is unproven.

Mobile 4. Primary button at about 592 to 640px, inside the fold with the whole hand above it. Shortest page (9609px). Seven one-tap wall cards 2-up with the garment large. The hero fan clips its own labels: at 375 the back cards read "Nav Whit", "Lig Blu Whit", "Wh Blue", "nk", "der" (mobile-fold.png, y=330 to 380), and the same clipping appears at 1440, so the first viewport shows six broken words. Review cards 2-up leave a text measure of about 150px, three to four words per line. Tier cards are each about 1.2 viewports tall with a 66px "hand" floating in white.

Conversion 4. Sweater first with the button early; the wall is seven one-tap deep links with the garment visible on each card, the best wall for purchase intent in the set. Held back by a ladder that gives all three tiers an equal accent button ("Start with Beach", "Build my Complete Set", "Give the Table Set"), so Complete Set is highlighted by ring and pill but not by call to action, and by tier imagery too small to sell racks or the gift. The heavy first paint is a mobile LCP risk.

Weakest section

Complete your table. The three "hands" are 66px cards at 375 (a single card render, a rack photo the size of a stamp, a bag), the tier cards are mostly empty white, and the equal-weight buttons do not pull the deck buyer to the middle tier, which is the section's one job.

The one change

Fix the hero hand so no label is clipped: set the back-card index to the first colour word only ("Navy", "Light Blue", "White", "Pink", "Hot Pink", "Lavender"), widen the exposed strip to about 70px by lowering transform-origin on .hc and reducing the rotation step, and let the front card carry the full name. The most-seen viewport stops reading as broken on both screens.

Secondary fixes

Cross-concept note

Shares "Dress for the table." with 02 and 05; 04 should change, and its lede already contains a better line: "Pick your hand." Shares the booth photo for the Sweaters tile with 05's review section; 04 keeps it (it is the only place the Sweaters tile shows two colorways), 05 can use the storefront shot instead.

05 Game night, 7 pm

Scores and evidence

Brand elevation 4. Big Shoulders Display timestamps, Work Sans, a continuous 2px navy rail and photographs that actually depict game nights (floral tablecloth, cocktails, navy table, kitchen-table host, green cloth) make this the only concept whose imagery matches the brief's positioning of "the table: real people, real play". Purple #6B4FBB is a well-judged accent. It loses a point for the decorative empty checkboxes on the category tiles and in-the-box lists, which read as unfinished form controls, and for the white flats-on-white boxes it shares with 02.

Originality 4. The run of show is fresh for ecommerce and consistent (every timed section, "Next Tuesday" for email, the rail unbroken to the footer). But strip the timestamps and rail and each section is a conventional, if clean, layout; the thesis sits beside the content rather than reshaping it, unlike 04 or 01.

Adherence 5. No violation found. Accent used only on .btn; all secondary buttons are .btn--ghost in navy. One motion moment (closet). Heading outline h1 to h4 with no skipped level. Lighthouse mobile 94 measured. Note that the five "Add to cart" buttons on the edition row log a cart add for a bare deck, which the shared brief permits on the homepage but which contradicts the redesign brief's section 5 rule that the bundle is the default purchase path.

Mobile 3. The primary button starts at about 815px, just under the 812 fold and a full screen down on a 667 phone; NOTES.md states both CTAs are inside the first viewport at 375x812 and mobile-fold.png shows otherwise, ending at the lede. The cause is --time:clamp(64px,19vw,96px) plus a two-line h1 at up to 56px before the image. The rail at x=18 with content from about x=37 leaves a 300px text column, so the lede and every paragraph wrap tighter than in the other concepts. Review masonry at 2-up gives a measure of about 150px. Ladder is stacked with a boxed Complete Set and the only filled button, which is correct. Editions 72vw with peek.

Conversion 3. The wall is strong: seven one-tap deep links, the garment large on each tile, a two-tone stripe under each, Green/Blush full width first. The ladder steers to Complete Set better than any concept except 03. Against that: the hero button is under the fold on the device that matters, and the edition row invites a $62.95 bare-deck add to cart on the homepage, which works against the $85 free-shipping line and the items-per-order target of 1.16 to 1.4.

Weakest section

Hero. The largest type on the page is a fictional time, not the brand statement, and it costs the fold: at 375x812 the visitor sees "6:30 pm", the h1, the flat, the caption and the lede, and no button.

The one change

At 375, shrink the timestamp to a 24px inline label beside the rail dot and place the button pair directly under the h1, above the image. Keep the 104px times on desktop where the 360px left column has room. The sweater and the primary button both land in the first viewport and the schedule idea survives intact.

Secondary fixes

Cross-concept note

Shares "Dress for the table." with 02 and 04; 05 keeps it because it doubles as the 6:30 event, so 02 and 04 change. Shares the exact hero image and composition with 03 and the stacked-ladder-with-one-button pattern with 03. Shares the booth photo with 04's Sweaters tile; 05 could use the storefront shot in reviews instead.

Across the set

Where the concepts converge and how to pull them apart

Headlines. Three of five heroes open with the identical sentence "Dress for the table." (02, 04, 05) and the other two share "Mahjong, made portable." (01, 03). With the logo removed, the first words on screen do not distinguish the concepts. Assign them: 01 keeps "Mahjong, made portable." (portability is its thesis), 05 keeps "Dress for the table." (it is the 6:30 event), 04 takes "Pick your hand.", 03 takes "Game night, anywhere." or promotes its own wall line, 02 writes a spec line in its own voice.

Hero composition. 02, 03 and 05 all use the same shape: h1 above a full-width sweater flat on white, a caption line, then the buttons. 03 and 05 use the identical Green/Blush file, and 01's hero is also the Green/Blush flat. All three then repeat their hero file as the default image of the colorway wall one to two viewports later. Vary the lead colorway per concept (02 navy already, 03 pink or navy, 05 green, 01 green in a postcard, 04 green as the front card) and do not show the hero file again in the wall.

Category row. All five use the storefront on-model shot or the booth for Sweaters, a travel fan for Cards, the kraft box for Bundles and the racks-with-bag for Accessories, in the same order. This is the asset pool talking, but it means the second section of every concept is the same four photos. Two concepts should swap in the pink-sweater-on-tile shot or the racks-in-play photo.

Editorial twins. 02 and 03 share hairline rules, margin index numerals and a ruled ladder; side by side their category rows and ladders are structurally the same. 02 keeps the numerals, 03 drops them and lets the thread sequence the page. 03 and 05 share the stacked ladder with a 2px box and a single filled button; this is the right ladder, so both may keep it, but 05 should not also stack five add-to-cart buttons under it.

Mobile fold. Three of five (02, 03, 05) push the primary button to or below the 812 fold on the phone that carries 78 to 80 percent of sessions and converts at half the desktop rate. 01 (about 305px) and 04 (about 592px) show it can be done inside the same section order.

Strongest candidate for the Shopify build

05 Game night, 7 pm, with the one change above applied and the edition add-to-cart removed. Reasons: it is the only concept whose photography answers the brief's positioning ("real people, real play"), it already has the best-steered ladder together with 03, its wall is one-tap with the garment visible on every tile, it passed Lighthouse mobile at 94, it has no adherence violations, and every flaw found is a one-pass fix (fold, rail width, checkboxes, footer label). The timestamp and rail map cleanly onto Shopify sections as a time label setting plus heading, so the device costs nothing in Liquid.

The alternatives and why not: 03 is the most elevated page and its thread is the best single idea in the set, but its wall is the weakest of the five for the product that is 66 percent of revenue, its fold is marginal, its page is long, and the desaturated logo is a decision the client should make, not inherit. 04 is the most original and has the best wall, but its density pulls toward the maximal game-brand look the brief asks the brand to avoid, and its ladder does not steer. 01 has the best raw conversion mechanics (earliest button, snap ladder with a price strip, one-tap wall) but its typography and tilt-and-tape system are structural, not fixable in a pass. 02 is the safest and least memorable.

Borrow across: take 01's price strip above the mobile ladder into 05; take 03's mix-blend-mode: multiply on the white-background flats into whichever concept ships so the white boxes disappear; take 04's one-tap wall tile with the garment visible as the standard for the wall.

The photography every concept is starved of

Every builder said the same thing in NOTES.md and the screenshots confirm it. The hero the brief specifies, the sweater worn at a mahjong table with cards in play, does not exist, so five heroes fell back to a flat on white and three of them chose the same green file. The specific gaps, in order of revenue impact:

  1. On-model at a table, one frame per colorway (seven changes in one session, same table, same light). This unlocks the hero, the wall tiles and the Sweaters category tile for every concept at once.
  2. Flats reshot on the warm-white or linen surface, or cut out with transparency, so they sit on the page without a white box. 02, 04 and 05 all show the box; 03 hides it with a blend mode.
  3. A Complete Set and a Table Set overhead on the same linen with every component in frame, including the bag, First Lines and gift wrap. Every ladder is currently text, a stamp-sized rack photo or a caption apologising for what is not pictured.
  4. A knit texture macro per colorway. 02 and 03 had to draw chips in CSS because no texture exists.
  5. Customer photos. Every review section reuses the brand's own travel-fan series and the kitchen-table portrait, captioned honestly but recognisably the same three files in all five concepts.
  6. Summit Edition in any lifestyle setting, and a Summit roundel; 04 had to draw a seal.
  7. Hands with a rack, a gift-wrapped Table Set, and a First Lines card in a real hand, to give the accessories and gift tiers a human in frame as the brief requires.

Sequence this shoot before the Shopify build starts. Photography, not code, is the critical path for all five concepts.