DRAWN FROMA publishing house site with a format-aware catalog, a storefront for digital and made-to-order goods, reader libraries and a community hall.

Disciplines
brandwebcommerceprint-on-demandaccounts
Stack
Next.js · Vercel · GA4 · Search Console
Live since
Stage
In Sprint
Project at a glance · scrum
16%
Delivered
293
Tasks
24
Workstreams
984.5
Story points
4
Sprints
drawnfrom.comOpen live ↗

The running site, embedded live. If it doesn’t load, the site blocks embedding. open it in a new tab ↗.

Live results
Visitors · 28d
57
updating daily from the live site
Pageviews · 28d
173
updating daily from the live site
Search clicks · 28d
8
updating daily from the live site
82PERF
LCP
0.95s
INP
0ms
CLS
0.04
Performance from PageSpeed Insights · traffic from Google Analytics · search from Search Console. Updates automatically.
01

The project

Drawn From is an independent publishing house that retells the oldest stories, scripture and apocrypha, myth and epic, legend and folklore, as illustrated graphic novel folios. A single issue can ship as a digital folio, a print edition, a Kindle edition, an audio edition and an original score. It is the studio's own imprint, so the site carries the whole operation: publishing the catalog, selling it, delivering it, and keeping readers close between releases.

02

The challenge

  • One catalog, many formats. An issue can be a download, a pre-order, a print, a soundtrack and an art plate at once, and each format has its own release date and delivery path.
  • Physical goods without inventory. Posters, prints and objects are made to order by a print-on-demand partner, so shipping quotes, order hand-off and fulfilment status all had to run on their own.
  • Digital goods that stay owned. Buyers need a library that remembers what they bought, releases pre-orders on time, and handles refunds correctly.
  • A rare-books feel that still loads fast. Gold on black, heavy display type and full-bleed art, on a phone, on a mobile connection.
The press
Each series opens with its own hero, art and issue count.
Six publishing lines, one press. Each line is data, so a new series is content work.
03

The catalog

The catalog is a ledger of every folio, published and planned. Readers filter by series and status, see at a glance which of the five formats each issue offers, and, once signed in, see what they already own. Issue pages carry the cover, the passage the issue adapts, share buttons, breadcrumbs and an acquire panel per format. Retired work stays reachable but is stamped and unbuyable, so old links never dead-end.

Catalog and issues
The ledger: filter by series or status, with format badges on every row.
An issue page: cover, source passage, sharing and the formats on offer.
The same issue page on a phone.
04

The shop

Everything purchasable lives on one storefront, filtered by format and by line: folios, music, art and prints. Prints and objects are fulfilled through Printful. The site fetches a live shipping quote, places the order after payment and follows it through fulfilment webhooks. A server-backed cart sends prints and digital folios through a single Stripe Checkout, and prints can be bought as a guest. Product pages have a zoomable gallery that follows the chosen size, and coming back from a product returns visitors to the same tab and the same place in the rack.

Storefront
One storefront for folios, music, art and prints, filtered by format and line.
05

Accounts and the library

A reader's account holds their library: folios, albums with a play-all queue and full-album download, and liner notes rendered as PDFs on the server. Pre-orders publish themselves when their release time arrives, and a refund revokes access. Account settings cover order history, email verification, password and email changes, and self-service deletion. Behind it all is an admin for issues, editions, media, bundles, gifting and sales, with live and test orders kept apart so preview deployments never touch production numbers.

06

The community

The community hall shows the issue on the press, follower counts gathered from each channel, the next subscriber checkpoint, and giveaways with official rules, a fair draw and an automatic close. The Dispatch, the house newsletter, keeps every issue in an indexed archive and is written in an admin composer with a live SEO panel.

Community and navigation
The Dispatch archive, newest first.
On a phone, the shop menu breaks out every format.
07

Results

The site is live at drawnfrom.com, selling digital and made-to-order goods. In an October performance pass, Lighthouse runs against production scored between 94 and 100 on desktop across the home, issue, community and shop pages. On a same-machine before and after build, the home page mobile performance score rose from 59 to 77, and layout shift on issue pages fell from 0.20 to zero. The site also ships Product and Breadcrumb structured data, GA4 ecommerce events, error monitoring and baseline security headers.

Next case
ALL WORK
Start a project