Project 05 · E-commerce

A denim brand should look like a denim brand from the first click.

Jack & Jones is denim first, and the brief was to make the storefront say so before a product page does. The client also asked for glassmorphism, which is easy to overuse and easy to get wrong, so the second half of the job was deciding where it earns its place and where it doesn't.

Client

Jack & Jones

Role

UI, Prototype

Timeline

2026

Platform

Desktop, responsive & app

Denim was the identity, not a category.

What I worked on

On most fashion sites denim is one entry in a list, sitting between chinos and knitwear. For this brand it's the reason people arrive. It had to lead the navigation, lead the home page, and be findable the way denim is actually shopped, which is by fit rather than by garment type.
Home and the mega menu, across desktop, responsive and the app, plus the glassmorphism system and where it applies.
UIPrototypeResponsiveAppFigma

The client ask

Glass, but only where it's doing work

An effect needs a reason, or it's decoration.

Glassmorphism has one honest use: a control that has to sit on top of an image without hiding it. So it went in two places and nowhere else. The Spring/Summer 26 hero CTA is a frosted bar across the campaign photograph, legible over a busy image without cropping it or dropping a solid block on it. The app's floating tab bar uses the same treatment, so the shot behind it stays visible while the navigation stays readable.

Everywhere else, buttons are solid. The effect reads as intentional because it's rare, and it never lands on text that has to be read at length.

UIMotion & depthLegibility
App home with a frosted View All bar over the campaign hero
Responsive home with a floating translucent tab bar over the hero

Home

Denim fits, then everything else

After the campaign hero, the first module is Denim Fits as a swipeable rail, so the brand's core proposition is the first thing a scroll meets. Latest Collections and Shop by Category follow, then a campaign film, then a Jeans Fit Guide that compares silhouettes side by side.

The page closes on brand copy rather than a link farm, which gives a returning customer something to read and a new one a reason to trust the label beyond price.

Jack & Jones desktop home page
Responsive home scrolling through denim fits, categories and the fit guide

Navigation

Shop jeans by fit, not by aisle

The menu opens on denim and stays there.

Denim Essentials takes the first column of the mega menu, ahead of Clothing, Accessories, Footwear and Occasion. Under it, jeans are broken out by fit, Anti, Bootcut, Regular, Skinny, Slim, Loose, because a customer who wants jeans knows their fit long before they know a product name.

Denim Clothing sits underneath as its own group, so jackets and shirts stay attached to the denim story instead of disappearing into general clothing. On the app the same hierarchy survives a much narrower screen: Denim leads the Mens list, and each level opens onto imagery rather than another wall of text.

IAUICross-platform
Desktop mega menu leading with denim essentials and jeans by fit
Desktop New In menu as a row of category photographs
App menu, Mens tab, denim first
App menu drilled into footwear with category imagery
App menu, New In tab with collection banners