Client
Type
My Role
Duration
I redesigned the complete ecommerce website for a heritage Indian food brand looking to scale from a template-based site to a premium, custom experience. The challenge: make 300+ products discoverable and shoppable while maintaining brand consistency across 20+ unique pages and competing visually with established players. I delivered a brand-synced, fully responsive design system (desktop + mobile) with reusable components, smart filtering/sorting, email templates, and a clear hierarchy that prioritizes both new product launches and everyday discovery.
Problem Definition
The brand had a live ecommerce site, but it was built on a generic template—it looked like every other food site and didn't communicate premium positioning.They wanted to scale aggressively (new product launches, larger SKU catalog) but knew the current site wasn't equipped for that vision.
The starting point
Existing website: template-based, outdated aesthetic, low brand differentiation.
New ambition: Position as a top-tier player (competing with Haldiram, Lovely Sweets in visual + UX perception).
Scope: 300+ SKUs across multiple categories (Sweets, Namkeens, Bakery, Masalas, Tin Range, Gifts).
New products launching (Gold Class and Tin Range) needing dedicated visibility and storytelling.
The market reality
Premium food ecommerce is visual-first; users judge quality by site design.
300+ products without smart filtering = overwhelmed users, high bounce.
Competitors had cohesive brand experiences; this brand didn't.
The core problem
How might I transform a template site into a custom, brand-led ecommerce experience that scales 300+ SKUs while competing with category leaders?
Success criteria
Consistent brand recognition across all 20+ pages (color, typography, storytelling).
Smart IA for 300+ products (filtering by category, price, sugar-free, festive occasions, size).
Premium visual treatment (product imagery, storytelling sections, checkout clarity).
Responsive across desktop + mobile without compromising UX.
Reusable component system for dev efficiency and future scalability.
About the project
This was a complete redesign, not just a facelift. I took their brand positioning (premium, heritage, quality) & translated it into a scalable ecommerce system that makes shopping feel effortless & trustworthy.
What I delivered (20+ unique pages)
Homepage (with hero, trending categories, featured products, new launches, testimonials, storytelling)
Product listing pages (all categories + single-category views with filters/sort)
Product detail pages (image zoom, ingredients, reviews, add to cart, wishlist)
Shopping cart + checkout (address, delivery date, payment, promo codes)
Account dashboard (order tracking, saved items, address management)
Wishlist page
Offers/discounts page
Login/signup/forgot password flows
Festive gifting page (seasonal bundles, bulk gifting)
Store locator (Google Maps integration)
Blog/content hub (nutritional info, regional traditions, brand stories)
Contact us page
Email notification templates (order confirmation, dispatch, delivery, offers)
Payment confirmation page
Privacy/returns/terms pages
Plus responsive mobile views for all
Scope of work
Competitive audit (internal reference): analyzed Haldiram, Lovely Sweets, other premium players to identify positioning gaps.
Brand system: defined color palette, typography hierarchy, spacing rules, component patterns.
UX/UI design: all 20+ unique pages in Figma with auto-layouts and reusable components for dev scalability.
Responsive design: desktop + mobile at same hierarchy (scaled structure, not separate flows).
Email template design: order confirmation, dispatch, delivery, promotional alerts.
Brand system documentation (colors, typography, spacing, usage patterns)
Process
Week 1: Discovery, competitive audit, homepage design (responsive). Client loved the concept and direction.
Weeks 2–4: Designed remaining 19 pages, building on homepage system and approved components.
Weeks 5–8: Feedback loops, refinement, two full-team meetings for final alignment and approval.
Product management
300+ SKUs across 6+ categories
Multi-dimensional filtering (Sort, Category, Size, Price, Sugar, Festive)
New product highlight sections (Gold Class, Tin Range)
Accessibility Considerations
All pages designed with:
Sufficient color contrast for readability
Touch-friendly buttons (min 44px) on mobile
Clear form labels and error states (checkout especially)
Fast-loading product imagery (optimized formats)
Storytelling was the UX Layer.
Challanges, Solutions & Approach
Core challenge was to build a system that felt premium, scaled to 300+ products & repositioned the brand competitively.
Challenge #1: Brand Sync Across 20+ Unique Pages
Traditional approach: Each page designed in isolation → brand inconsistency, template-like feel.
What I did: Defined a single color palette, typography system, and spacing grid upfront. Then applied it rigorously across all 20 pages.
Proof: Every page—homepage to checkout to blog—reinforces the same brand identity.
Challenge #2: Making 300+ SKUs Discoverable (Not Overwhelming)
Problem: 300+ products without smart IA = confusion and high bounce.
What I did: Designed a layered filtering system:
Sort options: New Arrivals, Popularity, Discount, Price (Low-High / High-Low)
Category filters: Sweets, Namkeens, Bakery, Masalas, Tin Range, Gifts
Attribute filters: Size, Price Range, Sugar (With/Without), Festive occasion (Diwali, Friendship, Family, Corporate, Marriage)
Result: Users go from "300 products" to "5–10 relevant items" in 2–3 taps.
Challenge #3: Highlighting New Launches Without Cluttering
Gold Class and Tin Range are strategic launches needing visibility but not aggressive marketing feel.
What I did: Created a "New Arrivals" section on homepage (curated, premium treatment), plus dedicated category pages for each range.
Benefit: New products are discoverable but feel like natural extensions, not sales spam.
Challenge #4: Competitive Visual Positioning
Haldiram and Lovely Sweets have strong visual brands; this site needed to feel premium-comparable.
What I did:
High-quality product imagery treatment (consistent lighting, white space, zoom capability).
Storytelling sections (About, manufacturing process, brand heritage, blog) to build trust.
Premium checkout experience (clear progress, reassurance copy, delivery timeline).
Result: Users perceive the brand as premium-tier, not discount.
Challenge #5: Responsive Without Compromise
Problem: Many ecommerce sites have drastically different mobile UX (missing filters, broken flows).
What I did: Designed mobile-first but kept the same IA and hierarchy as desktop (progressive disclosure, smart stacking, touch-friendly).
Result: Seamless experience across screens.
KEY DESIGN DECISIONS
Decision #1: Brand-First IA (Not Product-First)
What changed: Instead of defaulting to "browse products first," the homepage leads with brand storytelling (hero banner, brand narrative, manufacturing process) before product showcase.
Why it mattered: Premium positioning requires trust-building. Users need to know who they're buying from, not just what they're buying.
Decision #2: Layered Filtering for 300+ SKUs
What changed: Instead of one massive product grid, I created a multi-dimensional filter system (Sort → Category → Attributes).
Why it mattered: 300+ unfiltered items = user paralysis. Layered filtering = confidence + discovery.
Decision #3: Festive Occasion as a Primary Filter
What changed: Most ecommerce sites filter by product type or price. I added "Festive" as a first-class dimension (Diwali, Friendship, Family, Corporate, Marriage).
Why it mattered: This brand sells for occasions, not just snacking. Making occasion-based shopping obvious increases cart value and relevance.
Decision #4: Premium Checkout Flow
What changed: Checkout isn't cramped; it's spacious, reassuring, and shows delivery timeline upfront.
Why it mattered: Premium brands don't rush checkout. Clear address input, date picker, payment options, and promo code application feel trustworthy and high-end.
Decision #5: Reusable Component System in Figma
What changed: Every button, card, filter chip, testimonial block is built with auto-layout and component variants, not static graphics.
Why it mattered: Dev team can build faster. Future pages scale without redesign. Brand consistency maintained automatically.
Key Decisions, Outcomes & Impact
The redesign shifted the brand from "template site" to "premium player" through consistent strategic design choices applied across 20+ pages.
Deliverables shipped
20+ fully designed pages (desktop + mobile responsive)
Brand color palette + typography system applied across all pages
Reusable Figma component library with 50+ components and variants
Email notification templates (6+ designs for order, delivery, promotions)
Competitive audit findings + positioning recommendations
Figma handoff with dev-ready specs and documentation
Client feedback (from meetings + iterative loops)
Week 1 homepage approval: "Loves the concept and direction"
Feedback rounds: Mostly copy changes and new section requests (no major redesigns) = high confidence in structure
Final team meetings: Approved for development with minor polishes
Timeline achievement
Expected: 12+ weeks
Actual: 8 weeks (2 months) from discovery to final approval
Reason: Clear upfront strategy reduced iteration cycles
Competitive positioning impact
Before: Template site, visually indistinguishable from competitors
After: Cohesive brand experience, premium aesthetic, clear positioning
Result: Ready to compete with Haldiram, Lovely Sweets on UX + visual perception
Scalability
300+ SKUs now discoverable through smart filtering (not overwhelming)
New product launches (Gold Class, Tin Range) have dedicated visibility without redesign
Component library enables future pages (seasonal campaigns, limited editions, bundles) without starting from zero
Key learning
Brand-first design at scale isn't just about aesthetics—it's about building a system that makes the right decisions automatically (filters, storytelling placement, color usage) so users feel premium trust before they even shop.
Discover more
