01
Pages from JSON
Each form page — its fields, labels, validation, and order — is defined in JSON rather than hard-coded. The Angular app reads the schema and renders the flow, so the form can change without touching component logic.
COCHLEAR
ORDER MICRO-SITE
An Angular micro-site that turns a complex, multi-step order into a calm, JSON-driven form — hardened with Recaptcha and end-to-end tested in Cypress.
MICRO-SITE
— 01 / OVERVIEW
Cochlear makes hearing implants — the kind of product where ordering the right part for the right recipient leaves no room for error. Working through Storify Agency, Odd Pixel built a standalone Angular micro-site that walks users through a long, conditional order request as a series of calm, single-purpose pages — driven entirely by JSON, guarded by Recaptcha, and backed by an end-to-end Cypress test suite.
— 02 / THE BRIEF
A long, exacting order - made to feel
like one step at a time.
An order request for a medical device carries a lot of fields: recipient details, device and part selection, delivery logistics, and confirmations that all have to be right. Put on a single screen, it's overwhelming and error-prone — exactly the wrong feeling for a clinical audience that needs to trust what they're submitting.
The brief was a focused micro-site, separate from the main estate, that could be stood up and maintained without re-engineering. It needed to be secure against spam and abuse, verifiably correct under test, and easy to reshape as the form's questions changed — without a developer rewriting components every time.
— 03 / APPROACH
Four decisions
behind the form.
02
One question at a time
A multi-page wizard breaks a daunting order into single-purpose steps with clear progress. Angular Material keeps inputs consistent, accessible, and familiar so the focus stays on the answer, not the interface.
03
Hardened with Recaptcha
A public-facing order form is a target. reCAPTCHA guards submissions against bots and abuse without adding friction for the real people the form is meant to serve.
04
Proven in Cypress
End-to-end Cypress tests drive the whole flow the way a user would — filling pages, validating, submitting — so regressions are caught before release. On a clinical order form, 'it probably works' isn't good enough.
FIG. A — Color Selector 
FIG. B — Side Selector 
FIG. C — Order Details — 04 / WHAT WE BUILT
Six parts,
one order form.
FEAT.01
Angular micro-site
A focused, standalone Angular app — separate from the main estate, fast to stand up, and simple to maintain in isolation from everything else Cochlear runs.
FEAT.02
JSON-driven pages
Form pages are generated from JSON sources, so fields, ordering, and validation can change without re-engineering Angular components.
FEAT.03
Multi-page wizard
A long order is split into single-purpose steps with clear progress, turning an intimidating form into something a user can move through with confidence.
FEAT.04
Angular Material
Material components give the form accessible, consistent inputs out of the box — the right baseline for a clinical audience that needs clarity.
FEAT.05
reCAPTCHA security
Submissions are protected against bots and abuse, keeping a public order endpoint clean without burdening genuine users.
FEAT.06
Cypress E2E tests
End-to-end tests exercise the real flow before every release, so the form behaves predictably and regressions never reach a recipient.
— 05 / STACK
01 Angular
02 TypeScript
03 Angular Material
04 RxJS
05 Cypress
06 reCAPTCHA
07 JSON Schema
08 SCSS
— 06 / OUTCOMES
What the engineering
made possible.
1form
A multi-step order request rendered entirely from JSON
E2E
Cypress tests drive the full flow before every release
0spam
reCAPTCHA keeps the public order endpoint clean
100%
Form changes ship by editing schema, not components
A complex medical order, rebuilt as a JSON-driven flow you can trust — secured, tested, and simple to maintain.
Storify Agency
DESIGN & STRATEGY PARTNER