Metabolic

Website design

A shared design system for a 40-plus-page health website, helping people find relevant care across desktop and mobile.

Website experience, responsive UI and digital art direction

Metabolic website redesign, with desktop and mobile homepage designs.
Metabolic website redesign, with desktop and mobile homepage designs.

A clearer way into care

People arrive with different concerns. Some know the condition they need help with; others are looking for a test, a specialist or a better understanding of their health. The website needed to make those routes easier to follow.

One system, many routes

I designed a shared page framework for conditions, services, research and the care journey. Reusable navigation, content patterns and visual treatments connect those pages without making every subject look the same.

Designed around the phone

The mobile experience is part of the design from the start. Key information, page hierarchy and enquiry routes are arranged for a smaller screen, with a corresponding desktop layout.

A library the team can build on

The page library brings more than forty designs into one visual family. It gives the website a consistent foundation as new services, campaigns and content are added.

Credits.

Website experience, responsive UI and digital art direction
Saju Thomas Paul

One system, every condition.

Related services use a common structure while keeping their own content and visual emphasis.

A shared website system across condition and service pages.
A shared website system across condition and service pages.
Metabolic website page library across care, services and clinical information.
Metabolic website page library across care, services and clinical information.

Built for a smaller screen.

Responsive layouts carry the same care information and enquiry routes across desktop and mobile.

Responsive desktop and mobile designs for the Metabolic website.
Responsive desktop and mobile designs for the Metabolic website.
Metabolic mobile page designs for care information and patient enquiries.
Metabolic mobile page designs for care information and patient enquiries.

Keep exploring

Brand guidelines Back to all work