# Life In A Dollhouse — Design Audit

**Site:** https://lifeinadollhouseshop.com
**Audited:** 6 September 2026
**Method:** Live measurement in headless Chrome at 1440×900 and 390×844. Values come from the DOM, the Resource Timing API, `PerformanceObserver`, and computed styles — not from inspection by eye.

**Surfaces covered:** Home · Product (`/products/buttercup-miniature-dollhouse-rug-in-mist-1-12-scale`) · Shop (`/collections/all`, 249 products) · About · Featured In · Custom Inquiries

---

## Summary

The photography is the strongest asset this store has, and almost every problem below is a case of the site failing to spend it. Three findings account for most of the damage: a **2.95 MB heading font** that is 64% of the page weight, a **primary button colour that fails contrast at 41% of the required ratio**, and a **custom-work page with no inquiry form** on a business whose headline product is listed at ₱174,900.

Nothing here requires a redesign. Six of the eight critical and serious items are theme-setting or content changes.

| | Count |
|---|---|
| Critical | 5 |
| Serious | 10 |
| Polish | 9 |

### What is already working

Worth stating plainly, because it means the foundation is sound:

- **CLS is 0.0001** — effectively zero layout shift. Most Shopify storefronts do not manage this.
- **FCP 0.35 s, LCP 1.3 s** on a fast connection.
- The theme ships **30 `:focus` rules** and **3 `prefers-reduced-motion` blocks** — keyboard and motion accessibility were considered.
- **Product JSON-LD** is present and valid on the PDP.
- The homepage meta description is specific and well-targeted.
- **No horizontal overflow at 390px** — `documentElement.scrollWidth === 390`.
- Collection filtering, sorting and pagination all exist and work.

---

## Critical

### C1 — The heading typeface ships 2.95 MB, 64% of the page

`shipporimincho_n4.woff2` transfers at **2,951 KB decoded**. Total uncached page weight is 4.6 MB across 194 requests, so this one file is nearly two-thirds of everything the browser downloads.

Shippori Mincho is a Japanese Mincho typeface carrying the full JIS kanji set. The store renders roughly 100 Latin glyphs. The other ~7,000 glyphs are paid for on every first visit.

Five `@font-face` rules declare it (4× weight 400, 1× weight 700). **None declares `font-display`**, so the browser defaults to `auto` — a flash of invisible text while a 2.95 MB file downloads. On a 4G connection that is several seconds of blank or fallback headings.

**Fix.** Switch to a Latin-subset face in the theme's typography settings, or self-host a subset of Shippori Mincho built with `pyftsubset` (Latin + punctuation + the ₱ sign). Add `font-display: swap`. Expected result: **2,951 KB → 20–30 KB**, a ~99% reduction and the single largest performance win available.

---

### C2 — Every primary button fails WCAG AA at 1.84:1

White text on `#B0C0DE` measures **1.84:1**. WCAG AA requires 4.5:1 for text at these sizes, so the buttons sit at 41% of the requirement. This affects:

| Element | Foreground | Background | Ratio | Required |
|---|---|---|---|---|
| `SHOP` — the only homepage CTA | `#FFFFFF` | `#B0C0DE` | **1.84:1** | 4.5:1 |
| `Add to cart` | `#FFFFFF` | `#B0C0DE` | **1.84:1** | 4.5:1 |
| `View Cart` | `#FFFFFF` | `#B0C0DE` | **1.84:1** | 4.5:1 |
| `Sale` badge | `#FFFFFF` | `#B0C0DE` | **1.84:1** | 4.5:1 |
| `View all` link | `#B0C0DE` | `#FFFFFF` | **1.84:1** | 4.5:1 |
| Sale price, 24px | `#E2BBC4` | `#FFFFFF` | **1.73:1** | 4.5:1 |

The sale price is the worst of these. On a product discounted from ₱31,800 to ₱19,100, the discounted figure is rendered in pale pink at 1.73:1 — the single number most likely to close the sale is the least legible thing on the card.

**Fix.** Two options that both keep the brand feeling intact:

- Darken the button fill to approximately `#4A6491` and keep white text (≈4.6:1), or
- Keep the periwinkle fill and set the label to the ink colour `#16202E` (≈9.6:1).

For the sale price, use a saturated red or the body ink, and keep the compare-at price as a struck-through grey.

---

### C3 — The custom-work page has no inquiry form

`/pages/custom-inquiries` contains **0 `<form>` elements and 0 email inputs**. The only conversion path on the page is a `mailto:` link rendered as body text:

> Email: lifeinadollhouse.shop@gmail.com

This is the store's highest-value offer. The homepage currently lists a one-of-a-kind dollhouse at **₱174,900** and the navigation carries "Kitchens | Custom" as a top-level collection. The page runs 5,720 px and 168 words to arrive at a Gmail address typed into a paragraph.

A `mailto:` link does nothing for anyone using webmail without a configured default client — which is most people on a phone. There is no qualifying information captured, no stated response time, and no button.

**Fix.** A real inquiry form with five or six qualifying fields — project type (full house / kitchen / room / restoration), whether an existing dollhouse is involved, budget band, target date, and a description field with image upload — plus an autoresponder that sets an expected reply window. This is the highest-revenue item on the list.

---

### C4 — The mobile hero is a 168px unreadable strip with no alt text

The hero is a single flattened PNG — `New_Website_Main_Photo_collage_3_1296x.png`, natural size 1238×533 — showing three interiors side by side, placed inside a slideshow that holds one slide. At 390px it renders **390×168**, and the three interiors become illegible thumbnails. Its `alt` attribute is empty.

The section contains exactly **four characters of text**: "SHOP". There is no headline, no statement of what the store sells, no reason to stay.

Above it, the header measures **446 px tall on desktop** — half a 900px viewport before any content — and includes a 38px empty announcement bar (see S9). On mobile a visitor scrolls roughly 370 px of chrome before the first product appears.

**Fix.** Replace the flattened collage with real markup: a headline, one line of copy, and a CTA over a single responsive image. Art-direct the mobile crop separately rather than scaling the desktop composition down. Give the image descriptive alt text. Trim the header — the logo does not need 230 px on a phone.

---

### C5 — There is no email capture anywhere on the site

`document.querySelectorAll('input[type=email]').length` returns **0** on the homepage, About, Featured In and Custom Inquiries. No newsletter, no back-in-stock notification, no waitlist.

The homepage currently features a **sold-out** product (Scalloped Pendant Light Fixture, ₱1,600) with no way to be told when it returns. For a maker-led store where stock is limited by hand-production, every sold-out listing is a captured-demand signal being discarded.

**Fix.** Add back-in-stock notification on sold-out variants — this converts existing demand and needs no new traffic. Add a footer email capture with a concrete offer ("new pieces and restocks, roughly monthly") rather than a generic "subscribe".

---

## Serious

### S1 — 3,441 px of the homepage is a gallery with no text and no links

Section `#shopify-section-1581385581139` measures **3,441 px tall on mobile** with `textLength: 0`, `links: 0`, and 9 images. Total mobile page height is 9,678 px, so this is **36% of the entire homepage** — roughly four phone screens of photography that cannot be clicked, captioned or bought from.

On desktop the same nine images sit in an uncontrolled grid. Measured left edges by row: 63 / 328 / 533 · 62 / 328 / 604 · 63 / 306 / 543. Nothing aligns to anything, and the widths differ within each row, so it reads as broken rather than as deliberate masonry.

**Fix.** Every image links to its product or project page. Add a heading and short captions naming what each build is. Then either align to a real grid with a fixed aspect ratio, or commit to a proper masonry layout with consistent gutters — the current state is neither.

---

### S2 — The press wall is a single flat PNG

The "Featured In" block on the homepage is one raster image: `featured_in-01_360x.png`, `alt="Life In A Dollhouse Featured In graphic"`. Section stats: 1 image, **0 characters of text, 0 links**.

It carries eight genuine trust signals — The Wall Street Journal, House Beautiful, Better Homes & Gardens, CNBC Make It, Apartment Therapy, Star Tribune, Localish, Vale Magazine — and not one of them is text, and not one links to the piece. They are invisible to search engines, invisible to screen readers, and unverifiable to a buyer deciding whether to send ₱174,900 to a small shop.

The logos are also optically unbalanced inside the raster: WSJ and Star Tribune dominate the composition while Apartment Therapy nearly disappears.

**Fix.** One `<img>` per publication with the publication's name in the `alt`, each wrapped in a link to the article, normalised to equal optical weight rather than equal pixel width. The `/pages/new-featured-in` page already carries 14 external links — the homepage block should inherit them.

---

### S3 — The watermark sits on top of the product

A large opaque "LIFE IN A DOLLHOUSE" house badge covers roughly a quarter of every catalogue image, placed over the merchandise rather than beside it.

On the rug range this is actively destructive. `/collections/all` opens on nine near-identical *Anne Miniature Dollhouse Rug* colourways at ₱700 each — Blue, Chai, Charcoal, Light Gray, Natural, Vintage Rose and more. The pattern and colour **are** the product, and they are what the badge covers. The same badge repeats through the PDP gallery and the "You may also like" row, so four different rugs in the related-products strip read as four copies of the same image.

**Fix.** Move the mark to a corner at 30–40% opacity and shrink it to no more than 8% of the frame, or remove it from catalogue images entirely and keep it only on lifestyle shots intended for Pinterest and Instagram.

---

### S4 — There is no type scale

Every visible character on the site is Shippori Mincho. Measured across the homepage:

| Size | Line-height | Count | What uses it |
|---|---|---|---|
| **18 px** | 1.4 | **106** | body copy, nav, buttons, product titles, prices, footer links |
| 25.2 px | 1.4 | 42 | H1, H2 **and** H5 |
| 23.4 px | 1.0 | 8 | — |
| 32.4 px | 1.4 | 3 | largest heading on the page |

The largest heading is **1.8× body**; most headings are **1.4× body**. H1, H2 and H5 all render at the same 25.2 px. Nothing in the typography tells the eye what matters, which is why the page reads as an undifferentiated column.

Body line-height is 1.4 — tight for any text, and serif body copy wants more room than sans, not less.

**Fix.** Set a real scale — something like 15 / 17 / 21 / 28 / 40 / 56 — and hold to it. Add one weight step for emphasis. Take body line-height to 1.6 minimum. This costs nothing but theme settings and changes how considered the whole store feels.

---

### S5 — Heading order is inverted and the H1 is wrong

Document order on the homepage:

```
H2  Hi, I'm Ella!
H1  Ella's Top Picks        ← the only H1 on the page
H2  Follow me on Instagram:
H5  Your Order
```

The single H1 on the store's most important page is a collection title. The brand statement above it is an H2. There is no heading at all on the hero.

`/collections/all` — the main Shop destination, 249 products — has `H1: "Products"`, no collection description, and `<title>: "Products – Life In A Dollhouse"`.

**Fix.** One descriptive H1 per page, first in document order. Demote section titles to H2. Give `/collections/all` a real name and two or three sentences of intro copy — it is the page most likely to rank for "1:12 scale dollhouse furniture".

---

### S6 — Nine images carry filename or empty alt text

```
alt="IMG_7182.jpg"
alt="IMG_6968.JPG"
alt="IMG_1590.jpg"
alt="photo_feb_15_3_34_34_pm.JPG"
alt="IMG_6018.JPG"
alt="IMG_7561.JPG"
alt=""   ×3   (including the hero collage)
```

All twelve Instagram tiles share one identical string: `alt="Instagram life.in.a.dollhouse"`.

For a store whose product photography is its main sales argument, this discards the descriptive text most likely to bring in image search traffic.

---

### S7 — 29 tap targets fall below 44 px on mobile

| Element | Measured |
|---|---|
| Hamburger menu | **30 × 30** |
| Cart link | 92 × **24** |
| Social icons (×3) | **23 × 27** |
| Footer links (×5) | — × **27** |
| Mobile nav rows | 280 × **35** |
| `View all` | 69 × **33** |

The hamburger is the most consequential: it is the only route to navigation on mobile and it is 30 px square against a 44 px guideline.

**Fix.** Increase padding rather than font size — the touch area can grow without the visual mark changing.

---

### S8 — Add to cart does not read as the primary action

On the PDP the Add to cart button measures **148 × 30 px** in pale periwinkle with a white label at 1.84:1. It sits beside the quantity box and is visually *lighter* than the Size dropdown directly above it. The dropdown looks more important than the purchase.

On mobile it is neither full-width nor sticky, so on a 3,433 px page it scrolls out of view within one swipe.

There is no stock indicator, no shipping estimate, no returns line and no production-time note anywhere near it — on a store where "READY TO SHIP" versus custom is the central distinction, and where lead time is the buyer's main question.

**Fix.** Full-width, high-contrast, minimum 48 px tall. Sticky on mobile. Add a single line beneath it covering stock, dispatch time and returns.

---

### S9 — An empty announcement bar renders on every page

```html
<div class="notification header-announcement">

</div>
```

38 px tall, blush pink, containing only whitespace, present on the homepage, the PDP and every collection page. It reads as a broken component.

It matters more than a stray div normally would, because the Instagram feed in the footer is currently surfacing a **"pre–black friday SALE — 20% off all ready to ship, 15% off all custom"** post. Either a promotion is live and the store is not announcing it, or the feed is serving creative from last November. Both are worse than an empty bar.

**Fix.** Fill it with one live message or disable it in the theme editor. Then audit the Instagram block for stale promotional creative.

---

### S10 — Instagram tiles ship at 6× their display size

Twelve tiles render at **180 × 240 CSS px** and are sourced at **1080 × 1440** — a 6× oversample, from a third-party host (`bucket.useifsapp.com`) outside Shopify's image pipeline, so no responsive `srcset` is applied. The first tile is `loading="eager"`.

Separately, **every content image on the homepage is `loading="auto"`** — effectively eager. Twenty images are fetched before first paint, including the nine-image gallery three screens down.

The same app also throws a preload warning on every template:

```
The resource https://bucket.useifsapp.com/posts/…/3886191424753203197.jpg
was preloaded using link preload but not used within a few seconds
from the window's load event.
```

**Fix.** Add `loading="lazy"` to everything below the fold. Check whether the Instagram app offers a size setting; if not, weigh whether twelve tiles of duplicated content earn their bandwidth.

---

## Polish

### P1 — Ragged product grid
Card images render at 165×141, 165×217, 165×165 and 165×155 — no fixed aspect ratio. Rows are uneven, "Sale" and "Sold Out" badges float at different heights, and prices never align across a row. Set one aspect ratio with `object-fit: contain` on a neutral ground.

### P2 — Unbounded product titles
"READY TO SHIP! Dollhouse Kitchen with Miniature Refrigerator and Double Ovens - 1:12 scale by Life In A Dollhouse" runs seven lines on a mobile card. Nearly every title repeats `- 1:12 Scale by Life In A Dollhouse` on a single-brand store whose scale is already in the site title. Clamp to two lines and move the suffix into product metadata.

### P3 — Shop opens sorted alphabetically
`/collections/all` (249 products) defaults to *Alphabetically, A–Z*, so the first two screens are nine near-identical Anne rugs. The first impression of the catalogue is repetition. Switch to Best Selling or a curated manual order.

### P4 — Currency label disagrees with prices
The picker reads **USD** while every price renders as **₱700.00 PHP**. Shopify is geolocating correctly; the selector label is not following. Confusing at best, a checkout abandonment risk at worst.

### P5 — No breadcrumb on the product page
`[class*=breadcrumb]` returns nothing. Navigation is a "Back to: Ella's Top Picks" link plus *Previous / Next*, which occupies the prime top-right position for very little value. A breadcrumb would help both wayfinding and search.

### P6 — Product specs are run-on paragraphs
Colour, sizes and materials arrive as separate one-line paragraphs — "Color: Mist", "Available Sizes:", "Small- 5 x 8 inches", "Large- 8 x 10 inches". This is tabular data. Make it a definition list, and add real-world equivalents (a 5×8" 1:12 rug is a 5×8 ft rug at full scale) — that is the detail this audience actually buys on.

### P7 — jQuery 1.9.1 loaded from a third-party CDN
`ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js`, 32 KB, released 2013. jQuery before 3.5.0 carries known XSS issues (CVE-2020-11022, CVE-2020-11023), and it is loaded render-blocking from a domain the store does not control. Worth raising with the theme developer.

### P8 — Twitter bird share icon
Dated since the 2023 rebrand. A small signal, but it is on every product page.

### P9 — Console errors on every page load
Two errors on every load — a blocked `shop.app` frame (CSP `frame-ancestors`, Shopify-side and benign) and a resulting 403. Worth confirming with Shopify that Shop Pay's messaging component is functioning, since it is being blocked.

---

## Fix schedule

Ordered by return on effort, not by severity.

### This week — theme settings and content only

| # | Fix | Effort |
|---|---|---|
| C1 | Swap the heading font to a Latin subset; add `font-display: swap` | 30 min |
| C2 | Darken button fill and sale-price colour | 30 min |
| S9 | Fill or disable the empty announcement bar | 5 min |
| P3 | Change the default collection sort | 5 min |
| S5 | Fix heading levels; write a collection intro | 1 hr |
| S4 | Set a type scale; take body line-height to 1.6 | 1 hr |

**Result:** ~99% less font weight, WCAG AA on every CTA, and a visible typographic hierarchy — for roughly three hours of theme-editor work and no development.

### This month — content and merchandising

| # | Fix | Effort |
|---|---|---|
| C3 | Build the custom inquiry form + autoresponder | 1 day |
| C5 | Back-in-stock notifications; footer email capture | half day |
| S3 | Re-export catalogue images with a corner watermark | 1 day |
| S2 | Rebuild the press wall as linked, individual logos | half day |
| S6 | Write alt text across the homepage | 2 hrs |
| S7 | Increase mobile tap-target padding | 2 hrs |

### Next quarter — template work

| # | Fix | Effort |
|---|---|---|
| C4 | Rebuild the hero as real markup with mobile art direction | 2 days |
| S1 | Make the gallery linked, captioned and aligned | 1 day |
| S8 | Sticky, full-width Add to cart with a trust line | 1 day |
| S10 | Lazy-load below-fold images; review the Instagram app | half day |
| P1 / P2 | Fixed card aspect ratio; clamp titles | half day |
| P5 / P6 | Breadcrumbs; structured spec list | 1 day |

---

## Measured reference

**Palette in use**

| Role | Hex | Note |
|---|---|---|
| Page ground | `#FAEEF4` | blush |
| Primary button | `#B0C0DE` | periwinkle — **fails contrast with white** |
| Secondary blue | `#A6B2C9` | |
| Sale price | `#E2BBC4` | rose — **1.73:1, fails** |
| Body text | `#5C5C5F` | |
| Headings | `#222222` | |

**Typography**

| | |
|---|---|
| Families in use | Shippori Mincho (100% of text), GTStandard-M |
| `@font-face` rules | 5 — four at weight 400, one at 700 |
| `font-display` | not declared |
| Body | 18 px / 25.2 px (1.4) |
| Largest heading | 32.4 px — 1.8× body |

**Homepage, 390 × 844**

| | |
|---|---|
| Page height | 9,678 px |
| Untitled gallery section | 3,441 px (36%) |
| Header + empty bar | 446 px desktop |
| DOM nodes | 995 |

**Load, uncached, 390 px**

| | |
|---|---|
| Total | 4.6 MB · 194 requests |
| Fonts | **2,951 KB (64%)** |
| JavaScript | 1,314 KB |
| Images | 230 KB |
| CSS | 64 KB |
| TTFB / FCP / LCP | 197 ms / 352 ms / 1,300 ms |
| CLS | 0.0001 |

---

*All values measured live on 6 September 2026. Screenshots in `audit/shots/`.*