Case study · Yardley London Middle East - responsive website design & development
240 years of fragrance, one scroll away.
We designed and built the Middle East website for Yardley London, the British fragrance house founded in 1770. It is a responsive, brand-led showcase for nine floral collections and the full women's and men's ranges, and it is easy to browse on any phone.
{01} - THE CHALLENGE
Heritage brand, phone-first market.
Yardley needed one regional website that feels as premium as its packaging, shows a very large range clearly, and still works for a visitor who taps through from Instagram on a phone.
01A 240-year story, a modern audienceYardley has been a British purveyor of fragrance since 1770. The site had to carry that heritage and Royal Warrant pedigree while feeling fresh to a young, mobile-first Middle East audience.
02A big, layered rangeNine floral collections, women's and men's lines, and around 40 product types across fragrance, bath & body, skin care, hair care and gifts, with new launches arriving all the time.
03No cart, still has to sellProducts are bought through retail partners and marketplaces, so the site's job was desire and discovery: make people fall for a scent, then point them to where to buy it.
04Phones first, in a regional marketMost visitors arrive on mobile from social campaigns. Long product names, rich imagery and a deep menu all had to work on a 375px screen.
{02} - OUR ROLE
Designed it. Built it.
We owned the website end to end: structure, visual design for every breakpoint, a custom WordPress theme, and a CMS the Yardley team uses to publish collections and launches.
- 01Content audit & information architecture
- 02Navigation & page templates
- 03Visual design (desktop, tablet, mobile)
- 04Brand-led UI & illustration system
- 05Custom WordPress theme development
- 06Responsive front-end (Bootstrap, Slick)
- 07CMS setup for collections & launches
- 08SEO-friendly page structure & titles
{03} - PROCESS
AUDIT → IA → LOOK → TEMPLATES → BUILD
What we looked into, and why.
01Audit the rangeListed every collection, product type and pack, and how marketing actually talks about them: by scent family (Lavender, Rose, Gentleman) and by format (EDT, body spray, talc).WHYThe menu and URLs had to match how people already shop the brand.
02Shape two ways inBuilt the IA around collections first (Floral Classics, Women's, Men's) with format-led routes alongside (Fragrances, Bath & Body, Skin Care, Hair Care, Gifts).WHYScent lovers browse by collection, while gift and repeat buyers look for a format.
03Borrow from the packagingTook the design language straight off the bottles and boxes: navy serif headings, gold hairline frames, lavender and botanical line drawings, generous white space.WHYThe site should feel like opening a Yardley gift box, not a generic shop.
04Design reusable templatesOne homepage, one category grid, one collection page (family shot, story, product grid with NEW badges) and one brand story page, each designed for desktop, tablet and mobile.WHYA few strong templates let marketing launch a range without new design or code.
05Build, then hand overDeveloped a custom WordPress theme on Bootstrap with Slick sliders, so the team can manage collections, products, banners and launches themselves.WHYThe brand keeps shipping launches without waiting on us.
HOMEPAGE · DESKTOP
Story first, then the scents.
Hero slider, the heritage intro, featured scents with their notes, then Discover tiles to the marketplace store, the blog and the personality match. Scroll inside the frame.
yardleylondon.me
{04} - DECISIONS & TRADE-OFFS
What we chose, and what it cost.
DECISION 01A logo-centred split menuEight top-level categories, four on each side of the crest, with the full range in dropdowns. On mobile it collapses into one clean menu.TRADE-OFFTop level is capped at eight items, so newer lines live one level down.
DECISION 02Collections lead, formats followFloral Classics, Women's and Men's open as collection grids; each collection page then lists every format in that scent.TRADE-OFFSome products are reachable two ways, which we kept consistent with one URL per product.
DECISION 03Packaging-led lookLibre Baskerville headings in Yardley navy, Raleway body text, gold hairlines and botanical illustrations, so the site matches the shelf.TRADE-OFFDecorative assets add weight, so we kept them as light line art and optimised photography.
DECISION 04One collection templateHero family shot, the collection story, then a three-up product grid with clear names, formats and NEW badges.TRADE-OFFLess bespoke per range, but every launch looks consistent and ships fast.
DECISION 05Story before productThe homepage leads with a hero slider, then heritage ("240 years") and featured scents with tasting notes, before the grids.TRADE-OFFProducts sit lower on the homepage. The menu and Discover tiles give direct routes.
DECISION 06Point to where to buyDiscover tiles hand off to the marketplace store, the Yardley Stories blog and a fragrance personality match, in place of a cart.TRADE-OFFNo direct sales data on the site itself; partner links can be tracked instead.
PAGE TEMPLATES
A few templates, the whole range.
Category grids for each line and one collection template, reused for every scent family and launch.
yardleylondon.me/products/floral-fragrance-perfume
yardleylondon.me/products/men-fragrance-collection
yardleylondon.me/products/english-lavender-collection
yardleylondon.me/about-yardley
RESPONSIVE · MOBILE
Made for thumbs.
One column, a collapsible menu, larger body text and full-width tiles. Scroll inside each phone to see the full page.
DESIGN LANGUAGE · STYLE GUIDE
Straight off the bottle.
The UI borrows its palette, type and ornament from Yardley's own packaging, so the website, the shelf and the gift box all feel like one brand.
COLOURA calm navy and gold base for the brand, with each collection bringing its own colour from its packaging.
Yardley navy#4A5588
headings, nav
headings, nav
Heritage gold#AA8443
frames, buttons
frames, buttons
Lavender#6D49A6
English Lavender
English Lavender
Lavender mist#CBBEE1
tints
tints
Gentleman black#0F0B07
men's lines
men's lines
Poise plum#65204A
women's lines
women's lines
Body text#333333
copy
copy
Footer grey#F5F5F5
utility
utility
TYPOGRAPHYA classic serif for the heritage voice, and a light, modern sans for everything you read.
ENGLISH LAVENDERLIBRE BASKERVILLE · HEADINGS
Experience the finest LavenderLIBRE BASKERVILLE ITALIC · TAGLINES & BUTTONS
FLORAL CLASSICS · WOMEN'S · MEN'S · GIFTSRALEWAY MEDIUM · NAVIGATION
A timeless classic, Yardley English Rose is a true testament to a woman's inspiring beauty with fresh top notes of rose.RALEWAY · BODY
COMPONENTSGhost buttons in gold, a "NEW" seal for launches, and a gold hairline divider under every heading.
Discover
Read More
NEW
{05} - OUTCOME
LIVE AT YARDLEYLONDON.ME ↗
A heritage brand, in your pocket.
9floral collections + women's & men's lines
40+product types organised in 8 categories
3breakpoints: desktop, tablet, mobile
100%of pages editable by the marketing team in WordPress