Case study 02 — Ophthalmology brand systemFive screens

EYELEAHD

Strength that endures

An ophthalmology brand system for a therapy that treats four retinal conditions. The page architecture gives every indication the same skeleton — announcement, sticky navigation, one hero, a module of numbers, then the safety information in full — so what changes between pages is the evidence, never the reading experience.

Read the five screens

Indications

Wet AMDVision data at week 48 DMEAnatomical outcomes MEfRVODosing after 3 or 5 monthly doses

Client

EYELEA HD (aflibercept) Injection 8 mg

Discipline

Ophthalmology brand system

Scope

Landing, indication pages, dosing, mechanism of action

Presented

2026

01 — The brief

One skeleton, four indications.

EYELEA HD treats wet AMD, DME, MEfRVO and diabetic retinopathy, and the site has to explain each one without ever letting a claim outrun its evidence. The answer was not a different page per indication, but one structure every page inherits.

Cora Designs — page architecture and component system

Five screens carry the whole argument: the landing, an indication page built around vision data, the navigation that sits across all of them, a dosing module that answers four conditions in one grid, and a mechanism-of-action page where the model does the explaining.

Every screen ends the same way. The safety information is set in full on the page, not behind a link, with green rules and generous leading so it reads as content rather than legal noise — which is what keeps a regulated page legible enough to work.

Screens in the system: 05
Retinal indications: 04
Safety block, repeated: 01

02 — The system

Green does the signalling.

A single family of greens carries every action and every heading; the typography stays one grotesque, so hierarchy comes from weight and colour rather than from a second typeface.

Colour

#1D7154 — Announcement greenBars, section headings, primary buttons

#007A4A — Brand greenLinks, rules and active navigation

#00675B — Hero tealHero wash and the top of every card gradient

#165848 — Card depthBottom of the dosing card gradient

#F2F2F2 — Utility greyFooter band and ISI surfaces

Typography

Strength
that endures

One grotesque, two weights. Headlines are set heavy and uppercase; body copy holds at 14 to 16 pixels with wide leading, which is what makes the safety block readable at length.

Components

Announcement bar with a single arrow
Two-level sticky navigation, with dropdowns
Indication hero with CTA cards
Four-up dosing cards on a shared gradient
Mechanism of action diagram with callouts
Safety information block, repeated on every page
References and a corporate footer

03 — The screens

Five pages, in the order they are read.

Each screen is shown whole — navigation through to the safety block — with the decisions that made it worth looking at beside it. Open any one at full size to read the small print.

01Landing

Full page · 2732 × 5952 px

eyeleahd.com — Landing

EYELEA HD landing page: sticky two-level navigation, green announcement bar, dark teal hero with a metallic Atlas sculpture holding an eye, the headline Strength That Endures, three CTA cards, footnotes and the safety information block

The entry point. One hero, three ways in, and the safety information already open beneath it.

Open full size

A deep green announcement bar carries the newest approval and a single arrow — the only marketing line above the fold.
The hero holds one image: the Atlas sculpture with the eye. The claim sits in type beside it, not in a headline product shot.
Three CTA cards stack on the right, each closing with a circular green arrow, so the next step is unambiguous at any size.

02Wet AMD — data hero

Full page · 2732 × 5644 px

eyeleahd.com — Wet AMD — data hero

EYELEA HD Wet AMD page: dark teal hero with the Atlas sculpture, the headline Strength That Endures, study footnotes, and three result cards for vision data, anatomical outcomes and durability, followed by the safety block

The indication page, where the evidence becomes the reason to keep scrolling.

Open full size

The same headline as the landing, with the trial and comparator named directly underneath in small print.
The three cards now lead to evidence: discover the vision data, explore anatomy results, see durability results.
Below the hero the page flows straight into the safety block — no gap, no second click to reach it.

03Navigation detail

Hero and nav · 2732 × 1736 px

eyeleahd.com — Navigation detail

Close view of the EYELEA HD sticky navigation with two rows of links and dropdowns, the green announcement bar above it, and the hero with indication buttons and study footnote

The two-level navigation in its scrolled state, with the announcement bar still pinned above it.

Open full size

Row one carries the utilities: safety information, prescribing information, connect with us, the sister brand and patient resources.
Row two is the page's own menu — about, clinical trial data, dosing, coverage, patient support, resources — with dropdowns on all but one.
The active tab is underlined in green; the bar stays pinned so safety links are reachable at every scroll depth.

04Dosing

Full page · 2732 × 5670 px

eyeleahd.com — Dosing

EYELEA HD dosing page: four green gradient cards for Wet AMD, DME, MEfRVO and DR showing loading doses and maintenance intervals, then the recommended dosing in prose and the full safety information block

One module answers four indications without repeating the layout.

Open full size

Every card runs the same order: indication, loading dose, maintenance range, extension rule. Only the numbers change.
A single green gradient runs top to bottom in each card, so the eye reads differences as data rather than as design.
The dosing is stated twice — as cards for comparison, then as full sentences for anyone who needs the exact wording.

05Mechanism of action

Full page · 2742 × 7192 px

eyeleahd.com — Mechanism of action

EYELEA HD mechanism of action page: two columns of copy on aflibercept and its fully human construct, a 3D protein model with three labelled callouts, then the safety block, references and corporate footer

The science page: short copy on the left, the protein model carrying the weight on the right.

Open full size

Two columns, kept deliberately short: how the trap binds VEGF-A and PlGF, then why a fully human construct matters.
Three callout nodes pin labels to the model — the two receptor domains and the Fc portion — so the diagram can be read without a caption.
The page closes with the safety block, numbered references and the corporate footer, unchanged from every other page.

04 — Mobile

Twelve screens, held in one hand.

The phone build, page by page: one column, thumb-height targets, and the safety information collapsed to a single expandable line so the evidence stays reachable. Pick a chapter below, or swipe along the row on a phone.

12 screens — four chapters

Landing

Conditions

Results

Dosing & science

Each page scrolls inside the frame — or open it at full size.

01 / 12 — Landing — above the fold

Open full size

Hero

The opening frame on a phone: brand lockup, announcement bar, the claim and three indication buttons, with the Atlas eye carrying the lower half of the screen.

The lockup sets EYELEA above the claim, so the brand is read before the promise is.
The sculpture moves below the type rather than beside it — the same image, cropped to one hand.
Three rounded buttons stack under the copy, each closing with a circular green arrow, the full indication set inside a thumb.

Scroll inside the frame, or open it at full size.

05 — Desktop

Then the same system, at full width.

Five pages from the desktop build: the two-level navigation carrying every utility, the hero opening into a single reading column, and the evidence given room to sit in columns. Pick a page below — each frame scrolls inside itself, or open it at full size.

Landing

Conditions

Results

Home

The campaign home at full width: the photograph runs edge to edge, the claim sits in the right third, and two condition buttons close the hero.

The header splits in two: white utilities above, a solid forest-green navigation bar below with five page links.
The hero gives the image two thirds and the claim one — a single reading column, never a centred block.
Two white condition buttons sit on the dark image, each outlined in green with a chevron, and the third indication is footnoted beneath.

Scroll inside the frame — or open the page at full size.

06 — Detail aid

And a tray that travels with the rep.

Eight slides from the detail aid used in the room: the cover, the close, two evidence charts, the study schedule, dosing, the syringe and the molecule. Every slide keeps the safety tray pinned beneath it, and the same eight links along the bottom.

Opening

Evidence

Study & dosing

Molecule

Cover

The first slide of the detail aid: Atlas holding the eye, the claim, and the one piece of news that opens the conversation.

A radial gradient holds the sculpture in the centre, so the metal reads as light rather than as a photograph.
The approval panel sits top-right in translucent teal — the only new information before the first indication is chosen.
Three indication buttons close the right column, each with a circular arrow, above the safety tray that never leaves the screen.

Scroll inside the slide — or open it at full size.