Anonymized case study
01 / 08

Sports kit
storefront

A performance-teamwear retailer needed a storefront that read like a kit brand rather than a catalogue: one hard visual system, a catalogue structured the way buyers search, and a build the owner could keep running without a developer on call.

Region served
Pakistan — national, with export enquiries
Industry
Sports kit & teamwear retail
Scope
Visual identity, full site design, front-end build, catalogue structure, search & analytics setup, ongoing maintenance
Delivery
Hosted commerce theme, version-controlled, static host, platform checkout, enquiries to business inbox

Landing surface

Home page, above and just below the fold — rebuilt as blocks
02 / 08
Eyebrow — positioning line
Performance
teamwear
product shot / studio
GHOST WORD
Best sellers
product 01
product 02
product 03
product 04
One decision per band
Each horizontal band asks the visitor for exactly one thing: shop, read the promise, buy the proven item. Nothing competes inside a band.
Colour does the sorting
Red is navigation and action only. Warm gradients carry product. Black holds statements. A visitor never has to guess what is clickable.
Product on a clean field
Every product sits on a plain studio field so an owner-supplied photo can drop in without breaking the composition.

The visual system

Six colours, two typefaces plus a mono utility, twelve components
03 / 08
Palette
Kit red
#CE1B2C · nav, actions
Pitch black
#0A0A0A · statements
Heat
#7C240A → #E3941F
Paper
#FFFFFF · catalogue
Studio grey
#F1EEEB · shot field
Mute
#8C8880 · meta, labels
Type pairing
Condensed grotesque
Display · 700–800, italic for headlines · uppercase only
Humanist sans for everything a customer has to read closely: product copy, sizing, delivery terms, form labels.
Body · 400–600 · sentence case
Mono for counts, labels and meta
Utility · 400–500 · wide tracking
Component inventory
Sticky red nav
Promise marquee
Heat hero
Product card
Stock badge
Category banner
Filter + sort bar
Split feature
Hotspot pick
Contact panel
Search overlay
Footer + signup
Twelve components cover every page. A new collection or landing page is assembled, not designed.

Information architecture

Four top-level destinations, everything else nested under them
04 / 08
URL tree
/
├── /catalog                 all styles, filterable
│   └── /catalog/{product}   product detail
├── /collections             collection index
│   ├── /collections/football
│   ├── /collections/cricket
│   ├── /collections/training
│   └── /collections/{sport} → one per sport
├── /contact                 enquiry + team orders
├── /about
├── /pages/size-guide
├── /pages/faq
├── /policies/{policy}       terms, returns, privacy
├── /cart                    noindex
├── /account                 noindex
└── /search                  noindex
How it scales
Growth event
What has to change
New product
Added in the admin, tagged to a sport. Appears in catalogue, collection and search with no template work.
New sport
One new collection URL and one banner. The collection index and nav pick it up from the same source.
Seasonal drop
Existing hero and marquee components re-used on a dated collection page. Nothing is built from scratch.
Team & bulk orders
Handled by a separate route on the contact page rather than a parallel wholesale site.
Export enquiries
Same enquiry form, routed to a second inbox. No new template, no new checkout path.
Product pages hang off the catalogue rather than off collections, so an item can sit in several sports without a duplicate URL.

Search & integrity setup

The work that keeps the storefront findable and trustworthy
05 / 08
01
Technical SEO
A unique title and description per template, canonical tags on filtered and paginated views, descriptive alt text on product imagery.
02
Sitemap & robots
Sitemap submitted to search consoles. Cart, account and internal search results excluded from crawling so budget goes to product pages.
03
Structured data
Product, breadcrumb and organisation markup, so a listing can carry price and availability rather than a bare link.
04
Content architecture
Collections named the way buyers search — sport first, then product type — instead of mirroring internal SKU groupings.
05
Core Web Vitals
Compressed hero and product imagery, two web font families only, lazy loading below the fold, no layout shift from late-loading badges.
06
Analytics & conversion
Page views, add-to-cart, checkout start and enquiry submissions tracked as separate events, so the owner can see where a visit stops.
07
Accessibility
Visible focus on every interactive element, labels bound to inputs, contrast checked on the red-on-white and white-on-red pairings.
08
Local presence
Contact details, hours and response window stated on the site and kept consistent with the business profile listing.

Build & delivery

Hosted commerce theme, version-controlled, handed over runnable
06 / 08
01
Design in the browser
Components drafted as real markup, so what is approved is what ships.
02
Theme sections
Each component built as an editable section the owner can reorder without code.
03
Git-tracked
Theme sections and supporting static pages tracked in Git; static builds deploy to the host on push.
04
Preview review
Unpublished preview link for sign-off on desktop and phone before anything goes live.
05
Publish & hand over
Platform-native checkout and payments; enquiries land in the business inbox.
Enquiry format, as it arrives in the inbox
FROM     storefront contact form
SUBJECT  Enquiry — [name]

NAME     ████████████
EMAIL    ████████████████   (required)
PHONE    ██████████
TYPE     retail · team order · export
MESSAGE  ████████████████████████████
         ████████████████████

PAGE     /contact
SENT     ████-██-██  ██:██ PKT
Only email is required. Every other field is optional, so a half-finished enquiry still reaches the business instead of failing validation.
Handover position
Products, prices, stock and collections are all owner-editable from the admin. No developer is needed for day-to-day trading.
Checkout, payment and account flows stay on the platform's own secure surfaces — nothing custom sits between a customer and payment.
Two inboxes: general enquiries and team or bulk orders, so quoting work is separated from support.
Messaging handoff for buyers who prefer chat, and a footer email capture for drops — both feeding tools the owner already uses.
A stated reply window on the contact page sets the expectation the business can actually meet.

Further surfaces

Category, contact and phone — same components, different work
07 / 08
/
Products
Styles ██
Delivery ████
Category — black banner, counts in mono, filter bar above the grid
Talk to us
Email
Messaging
Support hours
Team & bulk
Send a message
Contact — facts on the left, one short form on the right
Performance
teamwear
Phone — full-width buttons, two-up grid, same bands
Search overlay
Predictive product results with price, so search is a shortcut to a product page.
Empty cart
A dead end is turned into one clear route back into the catalogue.
Account
Left on the platform's own authenticated surface rather than re-skinned.

What carries forward

Reusable on the next storefront of this kind
08 / 08
01
A colour with a job
Assigning one colour to navigation and action and nothing else removes most usability arguments before they start.
02
Twelve components, no more
A closed component set means new pages get assembled in an afternoon and the site cannot drift out of style.
03
Structure named after buyers
Collections that match how people search do double duty as navigation and as landing pages worth ranking.
04
Placeholders that hold up
Designing product blocks for a plain studio field means owner-supplied photography can land later without a redesign.
Delivered
Visual system: palette, type pairing, component inventory
Home, catalogue, product, collection, contact and policy templates
Responsive behaviour down to phone width
Catalogue and collection structure, with URL scheme
Search setup: metadata, sitemap and robots rules, structured data
Analytics and conversion events
Enquiry form routed to business inboxes
Version-controlled theme, published and handed over
Client name, logo, URL and photography withheld
Portfolio extract