Principle 1
Truth over polish
Product facts come only from brand data. With no measurements available, the size guide shows real sizes and model fit, not an invented chart.
Projects Jogger Sports
Jogger Sports
A premium activewear brand, with a home online to match.
- Role
- Product Designer
- Timeline
- 2022
- Team
- Solo
- Client
- www.joggersports.com
- Platform
- Responsive web, 360px to 1440px
- Responsibilities
- Catalogue review, UX architecture, brand application, design system and the full shopping journey
00 At a glance
- The challenge
- Give a premium Indian activewear label, with 339 products in its catalogue, a digital home as considered as the product.
- What I did
- Studied the full catalogue, shaped its structure, set one type-led identity, and designed the path from first visit to checkout.
- What shipped
- A responsive storefront with 22 collections and 296 product pages, live on joggersports.com. The look has changed since, but it still uses components I designed.
01 Challenge
Online, nobody can feel the fabric. The design has to.
Jogger Sports is a premium Indian activewear label that stands for discipline and self-belief.
A premium product earns its price in the hand. On a screen, type, pace and restraint have to do that work. The range is also large, so the experience had to stay calm at scale and still get people to the right piece quickly.
One rule held throughout: nothing invented. Every price, fabric, size and policy comes from the brand’s own data.
The design brief, distilledMake a customer feel something before they buy anything, using only what is true.
Where it standsI did this work in 2022 and it went live on joggersports.com. The site’s design has changed since, but it still uses components I worked on. The screens here show the design as I made it.
02 Research
The brief was hiding in the catalogue.
No user interviews were available, so the brand’s own data became the evidence.
I reviewed all 339 products, their size-level stock, 25 brand pages and every policy, then went through the image library by eye. I also looked at how brands like Lululemon, Alo Yoga, Vuori, Rhone and On present product, for design quality only.
296 products. Only 94 garments.
LimitNo customer research was done before the redesign, so these findings describe the catalogue, not how customers behave. Results from site analytics are in the Outcome chapter.
03 Key insights
Six findings shaped every decision.
One garment, many pages
Each colour was listed as its own product, so the range looked far bigger than it is.
Sold-out pieces needed a rule
87 of 296 products were sold out, so lists had to put what can be bought first.
Stock lived at size level
Real availability was per size, so a single “in stock” label would mislead people.
Photos were strong but scarce
Studio shots were good. Usable lifestyle images numbered about four.
Policies needed one voice
Free shipping rules, support numbers and hours differed from page to page.
Premium means quiet
Loud badges and urgency work directly against a premium position, so they had no place here.
04 Product strategy
Earn belief first, then make buying effortless.
Principle 2
Story before shelf
The philosophy and category entry points come before the product grid, because a premium label should give people a reason to care first.
Principle 3
One garment, many colours
Colours are grouped into swatches, repeats are removed, and picking a colour updates the page. This answers the 296-to-94 finding directly.
Principle 4
Quiet commerce
There are no percentage badges or sale banners. Where a price is reduced, a small strikethrough says so, and the product still leads.
05 Information architecture
I replaced a flat store with three ways in.
People shop by who they are, what they do, or which line they like, so the structure offers all three.
Filters only show options the current products can match, so nobody reaches a dead end. Sold-out pieces stay findable but sink below what can be bought.
By person
Men, Women
By purpose
Gym, Running, Training
By line
Air Cool, Essentials, Compression, Oversized, 2 In 1 Shorts
- Home
- Collection
- Product
- Bag
- Checkout
06 Design exploration
Type became the identity, and the first font choices lost.
With few lifestyle photos, type had to carry the brand.
The core idea is rising type: headlines grow line by line, so “We start small. We dream big. We rise together.” is shown as well as said. The philosophy images climb in height the same way.
Type went through three rounds. An editorial serif felt too soft and was removed. Regular-width Archivo for body text felt plain. Manrope won because it stays clean beside the wide, heavy headlines. The logo also moved from an image to live type in the headline font.
I also dropped a story hero showing an office scene, because it had nothing to do with sport, and replaced it with two runners.
07 Design system
One token file keeps every page in the same voice.
A calm stone palette lets the photos and the type do the talking.
Archivo expanded carries headlines, logo, buttons and labels. Manrope carries everything people read. Every colour pair I tested reaches at least 5:1 contrast.
- InkText, dark sections
#171717 - PaperPage background
#F7F6F2 - Stone 100Tinted sections
#E9E8E3 - Stone 600Secondary text
#64615A
08 Final experience
Three journeys, one calm path to purchase.
Journey 1 — Discover
From first impression to the right shelf
The site has to sell the belief and still get people to products fast.
Key moves
- Search handles “tshirt” and “t-shirt” alike, and “men” no longer returns women’s products
- One filter drawer works on desktop and phone, and only offers options that can match
- Size filters count only sizes actually in stock
Journey 2 — Decide
Everything needed to choose, nothing invented
A product page earns the purchase with honest detail.
Key moves
- Colour swatches switch product and imagery, with repeats removed
- Sold-out sizes are visible but cannot be chosen
- On phones a sticky button stays in reach and scrolls a missing size into view
Journey 3 — Buy
A checkout that stays out of the way
Seven clear steps, no site navigation, nothing in the way.
Key moves
- The bag survives a refresh, and quantity and removal work in place
- Errors are tied to their fields and checked per step
09 Outcome
A complete store that went live, and outlasted its own look.
The work went live on joggersports.com as a full shopping experience.
It covered 22 collections and 296 product pages, with search, filters, wishlist, bag, checkout, accounts and every policy page.
The site’s look has changed since 2022, but it still uses components I worked on. A good system should survive a redesign, and this one did.
- 296product pages
- 22collections
- 94garments, grouped by colour
- +25%User engagementMore interaction with collections and product pages
- +20%Conversion rateA smoother journey from discovery to checkout
- −30%Navigation frictionFaster and more intuitive product navigation
- +45%Product discoveryImproved product exploration through better categorisation and filters
Source: site analytics, compared with before the redesign.
10 Reflection
The constraints gave the brand its idea.
What worked
- Treating catalogue data as research. Grouping colours alone reshaped the catalogue.
- Refusing to invent facts kept every page defensible.
What I learned
- Few photos pushed type to the front, and that became the identity.
- Components last longer than looks. Build the system to survive a redesign.
What I’d improve
- Run user testing earlier, before the design settled.
- Shoot a campaign and add measurement charts.