Square website refresh / world model
Square website refresh and world model
Square's design team wanted a marketing site that builds its own pages for each visitor. i built the world model that holds what Square says about its products, then built the new page components in Square's production code.
squareup.com is thousands of pages, each edited by hand in a CMS for every product, region, and language. the design team wanted a few dozen components that fill in their own content for each visitor.
i built the world model myself, with an advisor: an LLM pipeline and a dashboard that turn every page and email into facts with sources. then i built the new page components in Svelte from the designers' prototype.
Square Growth Design uses the model to fill their prototypes with real content instead of copying it in by hand. the new components are merged and waiting on launch.
the designers wanted to stop editing hundreds of pages by hand for every launch, and spend that time designing.what the team asked for
i built a pipeline that goes from the sitemap to facts any agent can look up.
the graph view
every product, feature, price, call to action, and testimonial on the site, and the pages each one shows up on.
Growth Design tested the model by filling their prototypes with it, and told me where it was wrong.
| the feedback | the fix | |
|---|---|---|
| pricing | prices and rates came out wrong | pricing and legal disclaimers now come from their own source. the model holds variables that get filled from it, so those never depend on extraction. |
| other countries | weak on non-US, non-English pages | i tried different versions of GPT and Claude, alone and combined. combining them worked best: GPT caught more content and Claude tagged it correctly. |
| accuracy | they needed to know it was right | every fact keeps up to five quotes from its source, audits check them, and i wrote a plan for keeping it accurate. |
the overview
this shows where the model fits: it feeds generated content, an adaptive layer picks content for each visitor, and a chat assistant sits on top.
coverage
empty cells get an outline, so a missing Spanish page is as easy to spot as a finished one. my notes mark where extraction still needed work.
the visual direction
the designers set the look: simple tiles for checkout, invoices, and QR pay inside bold product sections.
the features page prototype
i rebuilt it section by section as content-managed Svelte components in Square's web renderer.
- 01foundations: the shared base styles every section uses
- 02sections: pricing, hardware showcase, feature catalog, feature showcase
- 03personalization: a business lookup that picks the heading and features
- 04routing between product pages
the personalized features page
after someone searches for their business, the heading and cards change to match it. this one is for a restaurant. the default version is at the top of the page.
this was my first time designing a system instead of screens.
most of it was new to me: scraping this much data, deciding where to host it, early prototypes with the data baked in, and later ones on Postgres that updated live. accuracy mattered most. i kept a last known good build, ran regression checks, cited every fact so it could be traced back, checked facts against their sources, and started trying Langfuse for tracing. i did most of it myself with advisors, and i really enjoyed it.
sitemapper ↗ is a personal project that uses the same approach: crawl a site, extract entities, and build a model you can query.