Supramax

Mobility, made younger.

Product Design

Joint supplements, Supramax articulații
Romania · Zdrovit portfolio
Product site, desktop and mobile

One brand, six formats

Supramax articulații is a Zdrovit range for joints, built around hydrolysed collagen. It comes as sachets in three versions, as vials you drink, as a gel and as a spray.

Each one is taken or used in its own way, and each has its own list of ingredients. One site has to explain all six without burying any of them.

Before any of the boxes, it has to explain the word printed on most of them: colagen.

Orange on white, and people moving

The page runs in the box's orange on white. It opens with “Întinerește-ți mobilitatea!” over a woman stretching on a wooden deck, explains collagen beside a man holding his knee, then lines up the products, each with its own column of ticks and an orange “Cumpără acum” button. A couple out Nordic walking leads into how collagen works, in three steps. Joint problems and the questions close the page.

6 products on one page: three kinds of sachets, the DIRECT vials, the mobil gel and the ACUT spray Drop for more

Onepage

The menu runs SUPRAMAX, Comandă, Probleme articulare, Întrebări, Blog, Contact. The hero sets a white-haired woman stretching beside the peach-flavour box under “Întinerește-ți mobilitatea!”. Collagen comes next, in two paragraphs and an orange box, then a line on what Supramax articulații contains, with an orange arrow between two circles of bone tissue. After the products, an orange panel lists what the site says Supramax does for cartilage, beside a couple Nordic walking, and three numbered steps follow: Absorbția, Distribuția, Stimularea. The joint problems and six questions in orange tiles end the page.

Product site
UX/UI design
Desktop and mobile
FAQ

Theproduct site

The supramax.ro page on a phone, scrolling

supramax.ro from the first screen to the footer, on desktop and phone.

Section bysection

SUPRAMAX articulații conține hidrolizat de colagen: the line in large type, an orange arrow between two circles of bone tissue, and two paragraphs below

An orange panel with three ticked lines about cartilage beside a photo of an older couple Nordic walking in a park, and Hidrolizatul de colagen acționează în 3 etape below: Absorbția, Distribuția, Stimularea

Collagen, explained before the boxes, and the three steps

Therange

The products, the way the site lines them up. Under “Doză mare de colagen” three sachet boxes stand side by side, plain, peach and osteo, each over its own column: an orange disc for “10 g colagen hidrolizat per plic”, ticks and letters for what else is inside, and “30 plicuri”. A grey band says what Supramax does not contain and how to take it. Then the DIRECT vials, the mobil gel and the ACUT spray, each with its own paragraph, its own column of ticks, its directions in a grey box and an orange button.

Product range
Ingredient columns
Usage

Doză mare de colagen: three Supramax articulații boxes, plain, peach and osteo, each above a column of orange discs and ticks, with Cumpără acum buttons and a grey band of what the product does not contain — Three sachet boxes, three columns

SUPRAMAX articulații mobil gel: the tube on an orange swoosh, a column of ticks from extract de tătăneasă to 100 ml, the directions in a grey box and a Cumpără acum button — The mobil gel, with its own column and directions

On aphone

On a phone the page keeps its order in one column. The hero shrinks to a band at the top and the collagen paragraphs follow, the orange box still under them. The three sachet boxes stack one above another, each with its column and button, and the orange benefits panel moves under the Nordic walking photo.