[Read this page on the website](https://sthomaspaul.com/project/metabolic-website-design/)

[Metabolic](https://sthomaspaul.com/project/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.](https://sthomaspaul.com/assets/work/metabolic-website-cover.webp)

Metabolic website redesign, with desktop and mobile homepage designs.

Client

Metabolic

Year

2026

My contribution

Website experience, responsive UI and digital art direction

[A clearer way into care](https://sthomaspaul.com/project/metabolic-website-design/#section-1)[One system, many routes](https://sthomaspaul.com/project/metabolic-website-design/#section-2)[Designed around the phone](https://sthomaspaul.com/project/metabolic-website-design/#section-3)[A library the team can build on](https://sthomaspaul.com/project/metabolic-website-design/#section-4)

## 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

Collaboration

Prerana Chavan

## 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.](https://sthomaspaul.com/assets/work/metabolic-website-conditions.webp)](https://sthomaspaul.com/assets/work/metabolic-website-conditions.webp)

A shared website system across condition and service pages.

[![Metabolic website page library across care, services and clinical information.](https://sthomaspaul.com/assets/work/metabolic-website-library.webp)](https://sthomaspaul.com/assets/work/metabolic-website-library.webp)

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.](https://sthomaspaul.com/assets/work/metabolic-website-mobile.webp)](https://sthomaspaul.com/assets/work/metabolic-website-mobile.webp)

Responsive desktop and mobile designs for the Metabolic website.

[![Metabolic mobile page designs for care information and patient enquiries.](https://sthomaspaul.com/assets/work/metabolic-website-thumb-first.webp)](https://sthomaspaul.com/assets/work/metabolic-website-thumb-first.webp)

Metabolic mobile page designs for care information and patient enquiries.

Keep exploring

[Brand guidelines ](https://sthomaspaul.com/project/metabolic-brand-guidelines/)[Back to all work](https://sthomaspaul.com/work/)