Hemogenyx Pharmaceuticals · Case study
Redesigning a listed biotech website for two opposite visitors
Hemogenyx Pharmaceuticals develops therapies for blood and immune system diseases. It is publicly listed, so its website is both where the science gets explained and where shareholders go for filings.
01 — From One Audience to Two
Designing one site for opposite intentions
Two kinds of visitor arrive at the same homepage wanting opposite things, and the old navigation was built for neither.
Two arrivals
- InvestorA document
- ReaderAn explanation
An investor already knows which document they want and resents every click between them and the PDF. A scientific or general reader knows nothing yet, and needs the clinical need explained before the technology means anything at all.
Before
- One menu
- Both audiences
- Neither served
I set three goals and defended their order. A new visual language applied to the old architecture would only have made the same problem better-looking.
The order I argued for
- Structure
- Navigation
- Visual
Designed for
02 — From a Grown Site to a Mapped One
Separating pages, documents and other companies' websites
The site had grown rather than been designed: content spread across a large number of pages, some redundant, some empty, and no reliable map of what was actually there.
Three destinations that were linked identically
- Internal pageStays on the site
- PDF documentDownloads
- External linkLeaves for LSE, ComputerShare
Where a click lands changes what the visitor should expect, so the sitemap distinguishes the three rather than drawing them as one kind of thing.
The rebuilt hierarchy
- Site
- Header
- News
- Technology
- Pipeline
- Investors
- About
- Footer
- Join us
- Contacts
- Privacy policy
- Header
Investor material
- Eleven destinations
- One Investors section
Removed
04 — From Stock Imagery to a Subject
Imagery that argues for the science instead of decorating it
Before
- Dense regulatory content
- Generic stock photography
Selection
- Six directions
- One chosen
- Applied everywhere
Six directions tested different balances of scientific imagery, typographic scale and density. The chosen one is minimal and light.
The system
- Visual system
- Near-white backgrounds
- Strong sans-serif display scale
- Brand red
- Links · Dates · Tags · Primary actions
- One motif
- Soft-focus 3D blood-cell forms
- Hero and page-header washes only
The stock photography came out. The motif is used sparingly enough that it reads as subject matter rather than as decoration, and the brand red is held back so that it still means something when it appears.
The same system carries
05 — From Three Widths to Three Decisions
Deciding what breaks before it breaks
Three widths across the whole site. Three things were worth deciding rather than discovering.
What had to be decided
- SidebarNo room beside the content
- Share tablesCannot be wide
- Document listHas to stay usable on a phone
On mobile the fixed sidebar becomes a horizontal, swipeable section switcher, so the same orientation cue survives the small screen instead of collapsing into a hamburger.
Designed for
Status