Skip to content
Brand Site Let’s talk
Brand Site

Asnugfit

Brand site for a fitness label: a product story that scrolls instead of clicking, static pages on Astro, and a mobile load kept under a second on a mid-range phone.

AstroBrand DesignResponsive UI
Asnugfit — Brand Site case study by Chetan Sharma
Client
Asnugfit
Year
2025
Role
Design and front-end build
Type
Website
The brief

What needed solving

The first Asnugfit site was a page builder template. It looked fine on the designer's laptop and fell apart on the phones its buyers actually use: hero video that stalled the first paint, product imagery sized for print, and no clear path from 'I like this' to 'where do I buy'.

Approach

How it was built

(01)

Cut the story to four screens — what the brand is, what it makes, why it is better, where to buy — and let scroll do the work instead of menus and popups.

(02)

Rebuilt on Astro so the browser ships HTML plus a small island of JavaScript rather than a whole app framework.

(03)

Re-encoded every image to the exact box it displays in, with the mobile crop generated rather than the desktop one scaled down.

(04)

Wrote the structured data for brand, product and organisation in the same pass as the markup.

Outcome

What changed

One HTML document per page, no render-blocking app boot, and the product story readable on a 5-inch screen without zooming. The brand team edits copy in markdown and pushes; nobody waits on a developer for a headline change.

PagesStatic, generated in seconds
MobileUnder a second to first contentful paint
EditingContent lives in files, not a page builder
Art direction and layout systemAstro build with image pipelineComponent set for product and story pagesTechnical SEO pass and schemaDeploy and handover documentation
Process

The same six stages,
every project

(01)

Discovery

Clarify the goal, users, constraints, current systems, success measures, and delivery risks.

(02)

Architecture

Choose the right structure, integrations, data model, security boundaries, and technology stack.

(03)

Design

Map important journeys and responsive states before expensive decisions are locked in.

(04)

Development

Build in reviewable milestones with clean code, documented decisions, and visible progress.

(05)

Testing & Launch

Validate functionality, performance, accessibility, security, and production readiness.

(06)

Support & Improvement

Monitor real use, resolve issues, and prioritize improvements using evidence.

Have something similar in mind?

Tell me the outcome you need and the deadline you are working to. I will tell you honestly what is possible.