Case study · Yardley London Men (MENA) - bilingual responsive website
Which gentleman are you?
We designed and built Yardley's men's website for the Middle East: a dark, product-first, bilingual (English and Arabic) home for the Gentleman range, its five scents and five formats, from eau de parfum to the deodorant stick.
yardleymen.me
YARDLEY
The Gentleman’s Choice
Long lasting modern fragrances
created for the Gentlemen of today.
SHOP NOW
created for the Gentlemen of today.
A Gentleman deserves the best
Avail 30% OFF across select Yardley Men Products at Amazon.ae
Use code YARDLEY30
Explore rangeInspired by the current trend of fusing classic ingredients with contemporary elements, Yardley has developed a line of fragrances that are truly English at its core.
{01} - THE CHALLENGE
Same heritage, different man.
Yardley's men's range needed a website of its own: one that speaks to men in the Middle East in two languages, makes a dense range simple, and sends buyers to Amazon and the shops.
01A men's line, not an afterthoughtYardley is known for florals. The Gentleman range needed its own home with a darker, more masculine voice, without losing the 1770 London heritage.
02Five scents across five formatsClassic, Suave, Elite, Urbane and Legacy, each as eau de parfum, body spray, roll-on and deodorant stick, plus talc. That makes a grid that is easy to get lost in.
03Two languages, two directionsThe MENA audience shops in English and Arabic, so every page had to work left-to-right and right-to-left with the same polish.
04Discovery here, purchase elsewhereSales happen on Amazon.ae and in hypermarkets. The site had to excite, explain the benefits, then send people to the right place to buy.
{02} - OUR ROLE
Concept to code, in two languages.
We designed and developed the whole site: structure, interaction, visual design for every breakpoint, the English and Arabic builds, and a CMS the team uses for campaigns and new products.
- 01Information architecture
- 02UX for discovery & "which gentleman are you?"
- 03Visual design (desktop, tablet, mobile)
- 04Product & category templates
- 05Bilingual English / Arabic (RTL) build
- 06Custom WordPress theme & mega menu
- 07Motion: video hero, scroll reveals
- 08Retail hand-off & promo banners
{03} - PROCESS
MATRIX → PERSONAS → LOOK → TEMPLATES → BUILD
What we looked into, and why.
01Map scents × formatsLaid out every product as a matrix of five scents and five formats, then chose formats as the main menu with scents as the range layer.WHYMost shoppers know what they need (a deodorant stick) before they know which scent.
02Find a personality per scentWrote a one-line character for each Gentleman (class, elegance, dynamism) and made it the hook of the "Which gentleman are you?" wheel.WHYA fragrance is hard to describe online, but a personality is easy to pick.
03Design dark, product-firstBlack-and-white lifestyle imagery, big pack shots on soft colour backgrounds, and a quiet Roboto UI so the bottles do the talking.WHYIt reads instantly as "for men" and lets five similar packs stand apart by colour.
04Templates for every levelA home, a format page (benefits plus a range grid), a product page (gallery, story, pack size, buy button) and a range page, all mirrored for Arabic.WHYFour templates cover the whole catalogue in two languages.
05Build and localiseBuilt a custom WordPress theme with a mega menu, video hero, scroll reveals and a carousel, with a separate Arabic site under /ar.WHYMarketing can run campaigns (like the YARDLEY30 Amazon code) without development.
HOMEPAGE · DESKTOP
Mood first, then the range.
A black-and-white video hero, the brand line, the "Which gentleman are you?" wheel, then five format tiles. Scroll inside the frame.
yardleymen.me
{04} - DECISIONS & TRADE-OFFS
What we chose, and what it cost.
DECISION 01Formats in the menu, scents on the pageThe main menu lists Fragrance, Body Spray, Roll-On, Deodorant Stick and Talc. Each format page then shows all five Gentleman scents.TRADE-OFFScent loyalists take one extra step, but the Range page and the wheel give them a direct route.
DECISION 02A wheel instead of a filter"Which gentleman are you?" spins through Classic, Suave, Elite, Urbane and Legacy, updating the story and pack shots beside it.TRADE-OFFA custom interaction to build and maintain, but far more memorable than checkboxes.
DECISION 03Benefits up frontFormat pages open with four icon cards (e.g. alcohol & aluminium free, 48-hour protection, dermatologically tested) before the products.TRADE-OFFProducts move down the page, but most buyers’ questions are answered first.
DECISION 04One clear buy buttonEach product page has a single "Buy now on Amazon" button, plus a line saying it is also in hypermarkets across the Middle East.TRADE-OFFNo on-site checkout, which keeps the site light and retail partners happy.
DECISION 05Arabic as a first-class siteA mirrored right-to-left layout with translated menus, hero copy and product content, switchable from every page.TRADE-OFFTwo sets of content to keep in sync, handled in the CMS.
DECISION 06Monochrome with a pop of colourBlack-and-white photography everywhere, with colour reserved for each scent's label and soft product backdrops.TRADE-OFFLess colourful than the women's site, which is the point: the men's line feels different at a glance.
FORMAT · PRODUCT · RANGE
From "what do I need" to "buy now".
A format page sells the benefits and shows every scent. The product page tells the story and hands off to Amazon.
yardleymen.me/category/deodorant-stick
yardleymen.me/products/gentleman-classic-deodorant-stick
RESPONSIVE · MOBILE
One thumb, five scents.
On phones the wheel becomes a swipeable carousel, the promo banner moves up, and format tiles stack full-width. Scroll inside the phone.
DESIGN LANGUAGE · STYLE GUIDE
Tailored, not loud.
A restrained system that lets the Gentleman packaging lead: monochrome photography, one typeface and a few warm accents.
COLOURA near-monochrome base, with warmth from parchment, copper and gold, and colour coming from each scent's label.
Gentleman black#0B0B0B
hero, footer bands
hero, footer bands
Ink#212529
headings, UI
headings, UI
Stone grey#999999
body copy
body copy
Mist#F2F2F2
section backgrounds
section backgrounds
Parchment#E5DFC4
story panels
story panels
Copper#C9735A
buy button
buy button
Gold#D9B44A
range buttons
range buttons
Sky#F4F9FC
product stage
product stage
TYPOGRAPHY · ROBOTOOne family, many weights: light for mood, medium for structure, and wide letter-spacing for a tailored feel.
The Gentleman's ChoiceROBOTO LIGHT · HERO
Choose your tool of confidence.ROBOTO MEDIUM · SECTION TITLES
PRODUCTS · RANGE · CONTACTROBOTO · TRACKED NAVIGATION
Modern, masculine and fresh. The woody notes of Gentleman Classic are designed for a man who enjoys the finer things in life.ROBOTO LIGHT · BODY
COMPONENTSCopper buy button, gold range links, a language switch in every header, and icon benefit cards on every format page.
BUY NOW ON AMAZON
Explore the Range
SHOP NOW
ENGLISH | العربية
Alcohol & Aluminium Free
0% alcohol and aluminium
48-hour Protection
All-day freshness
Transparent Solid
Non-sticky application
Tested by Dermatologists
Safe for all skin types
{05} - OUTCOME
LIVE AT YARDLEYMEN.ME ↗
A gentleman’s site, in two languages.
5 × 5Gentleman scents across five formats
2languages: English & Arabic (RTL)
3breakpoints: desktop, tablet, mobile
1 tapfrom any product to buying it on Amazon.ae