Internal review build - Cloudflare preview - not pushed to the live theme
Week 9 - Website mockups

Sonographer In The Making

A full set of website mockups for review: a mobile-first listing redesign, a listing template for every product, two About pages, five Blog landing pages (including a Pinterest-funnel story magazine and a split-screen dual-track), four finished blog posts with working interactives, and the porting plan. Every page is built on the live dev theme's own design system.

Mobile-first Brand-faithful Cloudflare preview

Listing pages

Mobile redesign with the desktop design frozen, plus a template for every product.
Redesign A

Mobile-first: Refined

The current desktop design untouched, with a redesigned, ship-ready mobile experience: sticky buy bar, carousels, fixed layout.

Open mockup
Redesign B

Mobile-first: Reimagined

A bolder, app-like mobile product page with segmented tabs and persistent checkout. Desktop unchanged.

Open mockup
Reference

Current desktop design

The existing fe-3 listing design that both mobile redesigns preserve exactly.

View render
All products

Every product listing

A branded listing page generated for every product from its currently-live description, with the gradient pre-footer carried over.

Browse all
Docs: the mobile audit and the porting plan are in the Documents section below.

About page

Exact copy from the current About page, realigned to the dev-theme homepage. Two directions.
Variant A

Editorial

A faithful founder-story layout with alternating sections, gold rails, and the pulse divider.

Open mockup
Variant B

Immersive

A bolder gradient-forward interpretation with glass cards and a credentials strip.

Open mockup

Blog

A custom but Shopify-native blog, five landing directions, plus four finished posts. C, D and E add the storytelling funnel.
Index A

Editorial magazine

Featured flagship post, category filters, and an asymmetric card grid.

Open mockup
Index B

Featured hub

A gradient hero spotlight, a "start here" rail, and a filtered catalog grid.

Open mockup
Index C - new

Story magazine

The Pinterest funnel: narrative acoustics stories that pull a wide audience in, then hand them the science, an interactive, and a product.

Open mockup
Index D - new

Dual-track

One blog, two lanes: the student career track and the story track side by side, with how each feeds the other.

Open mockup
Index E - new

The literal split

Builds on D: a vertical wave splits the page - light career track on the left, story track deepening to navy on the right, both converging at one shared CTA.

Open mockup
Story post + interactive

The Shape of Sound

Sophie Germain and the cymatics funnel, with a working Chladni pattern visualizer and the coloring-book bridge.

Read post
Post + interactive

Ultrasound Physics

Flagship post with the Physics Panic Meter, ELI5 toggles, and a concept-check quiz.

Read post
Post + interactive

Sonographer Salary

Full salary guide with the "What's Your Number?" salary estimator.

Read post
Post + interactive

History of Ultrasound

The story of seeing with sound, with the Ultrasound Timeline Explorer.

Read post

Interactives

Standalone, self-contained widgets, also embedded in their posts.
Widget

Physics Panic Meter

A 1-10 anxiety scale that returns a personalized, encouraging response.

Try it
Widget

Salary Estimator

State, setting, and experience inputs return a realistic pay range.

Try it
Widget

Timeline Explorer

A scrollable history of ultrasound, era by era.

Try it

Documents

Audit and planning, for the build record.
Audit

Listing mobile audit

What breaks on mobile today and how each redesign fixes it.

Read
Plan

Listing port plan

Porting the listing to the dev theme liquid, all-products rollout, gradient carryover.

Read
Audit

Blog AI-tells audit

Findings on the three posts, for review. No copy was rewritten.

Read