Design + Art Direction

The Ordinary

DATE

KIND

ROLE

2024

Web Design & Strategy

UX/UI, IA, Strategy, Visual Design

In early 2024, BASIC® was brought on to reimagine The Ordinary's ecommerce experience. Working within their existing brand, our concepting process surfaced eight distinct directions aimed at making their shopping experience feel more bespoke and interactive. We incorporated those concepts into an overhauled web architecture that prioritized the way their customers actually browse.

Common Concerns — six skin concern tiles: Aging, Shine, Congestion, Dullness, Texture, and Eye Care with labels and arrows
The Ordinary mobile Filter By overlay — Concern checklist with Barrier Support selected and close control
The Ordinary mobile Barrier Support category page — hero, description, Filter and Sort, active filter pills, and product grid
The Ordinary desktop mockup — personalized routine shelf with AM/PM steps and product detail sidebar with replenishment, conflicts, and usage instructions
The Ordinary mobile product page — How to use and Ingredient list accordions; Behind the Science, How it works, oil droplet graphic, and ingredient description with micro-algae and squalane links
The Ordinary — Your results and skincare regimen: combination skin summary, dive deeper columns, Step 1 Prep products, and Your Regimen cart summary with Add Regimen To Cart
The Ordinary — build a personalized routine with our skin assessment; product still life, description, and Start Skin Assessment button
The Ordinary — Crafted by scientists not celebrities; team profiles, The O. Library articles, and featured dropper hero
The Ordinary mobile product grid — bestseller and new items including Niacinamide, Multi-Peptide serum, Glycolic Acid toner, and Hyaluronic Acid with ratings and CTAs
The Ordinary mobile product page — Retinal 0.2% Emulsion with gallery thumbnails, bestseller badge, concern tag, and description
The O. Library — editorial hub with category nav, featured articles Winterize Your Skincare and Back to Basics toners, and article grid
The Ordinary Ingredients Glossary — ingredient cards with macro photography for Glycolic acid, Caffeine, Pinus Pinaster bark extract, Betaine, and short functional descriptions