Hemogenyx Pharmaceuticals · Case study
Redesigning a listed biotech website for two opposite visitors
Hemogenyx develops therapies for blood and immune system diseases. It is publicly listed, so one site has to explain the science and serve the filings.
01 — From One Audience to Two
One site, opposite intentions
An investor already knows which document they want. A reader knows nothing yet. The old navigation was built for neither.
Two arrivals
- InvestorA document
- ReaderAn explanation
The order I argued for
- Structure
- Navigation
- Visual
A new visual language applied to the old architecture would only have made the same problem better-looking.
Designed for
02 — From a Grown Site to a Mapped One
Pages, documents and other companies' websites
The site had grown rather than been designed. Three kinds of destination were linked identically, though each behaves differently once clicked.
Where a click lands
- Internal pageStays on the site
- PDF documentDownloads
- External linkLeaves for LSE, ComputerShare
The rebuilt hierarchy
- Site
- Header
- About
- Technology
- Clinical Need
- News
- Media
- Investors
- Footer
- Contact
- Join us
- Privacy policy
- Header
Investor material
- Eleven destinations
- One Investors section
04 — From a News Page to an Announcement Feed
One item, two things to do with it
A listed company publishes regulated announcements on a schedule. Each one is read by a journalist and filed by an investor, so each card carries both actions rather than making the visitor guess which link is which.
Every announcement
- ReadStays on the site
- PDFDownloads
The card
- Date
- Title
- Two actions
The archive grows by a few dozen items a year and never shrinks, so the page is filtered by year rather than paginated — a shareholder looking for last year's AGM result picks the year, not a page number.
Holds without redesign
05 — From Stock Imagery to a Subject
Imagery that argues for the science instead of decorating it
Before
- Dense regulatory content
- Generic stock photography
The system
- Visual system
- A dark ground
- Near-black at the top, brand red at the foot
- Serif and sans in one line
- Serif for the claim, sans for the fact
- Navigation as pills
- The only white shapes on the page
- One motif
- Soft-focus cell forms, hero and page headers only
- A dark ground
The stock photography came out. The motif is used sparingly enough that it reads as subject matter rather than as decoration.
The same system carries
06 — From Three Widths to Three Decisions
Deciding what breaks before it breaks
Three widths across the whole site, and three things worth deciding rather than discovering.
What had to be decided
- SidebarNo room beside the content
- Share tablesCannot be wide
- Announcement gridBecomes one column
The fixed sidebar becomes a horizontal, swipeable section switcher, so the same orientation cue survives the small screen instead of collapsing into a hamburger.
Status