Pantovigar Case Study. Product Website

GOAL

Redesign the product website for Pantovigar (Merz Pharma), a hair-loss treatment: gather everything about the product on one screen and lead the visitor from problem to purchase without extra steps.

SOLUTION

The homepage is built on a six-tile grid with white gutters: every tile is both an entry point to a section and its visual. The same grid drives the inner pages — mechanism of action, usage, leaflet, FAQ, contacts — and the mobile version. Visual language: grey tiles, white gutters, a single Merz green accent, the Geologica typeface and outline icons. Studio photography and 3D renders share one lighting scheme.

FORMAT

Desktop + mobile version

Six sections on one grid

Studio photography and 3D

HOMEPAGE

The first screen is a map of the site. Six tiles answer the key questions: what it is, how it works, how to take it, where to buy. Below — facts about hair loss, the composition with a 3D visual for every component, the course scheme and results. The visitor goes from problem to purchase without leaving the page.

ANIMATION

Tiles unfold as you scroll, numbers and visuals appear with a slight offset. The motion underlines the grid structure without distracting from reading.

INNER PAGES

Inner pages follow the same grid. “Mechanism of action” shows a follicle cross-section and the three hair-growth phases in 3D, “Usage” — the dosing scheme, “Leaflet” — composition and doses, “FAQ” — an accordion of common questions, “Contacts” — a map with the Merz Pharma address.

VISUALS

Every visual is shot and rendered in one lighting scheme: grey background, soft top light, a single green accent. Capsules, the skin cross-section, the ingredients and hair form one library from which all pages are assembled.

MOBILE VERSION

The mobile version repeats the desktop logic: the same tiles stacked in a single column. Burger menu, large numbers and the “Where to buy” button are always at hand.