Case Study: E-commerce

Kraft

A premium cookware brand of India, a Shopify-ready e-commerce site that pairs craftsmanship with a seamless buying experience.

Role

UX / UI Design

Timeline

~1.5 months

Scope

16–17 pages · Responsive

01 Overview

A modern home for a craftsmanship brand.

Kraft is an e-commerce brand specialising in premium kitchenware such as cast iron and stainless steel cookware.

The goal was to design a modern, intuitive website that highlighted the brand’s craftsmanship while making the buying experience seamless and visually consistent.

I was responsible for the UX/UI design, ensuring a strong foundation built on both usability and aesthetic precision.

02 Research

Storytelling was the gap in the market.

Before starting the design, I ran a brief competitive analysis of leading cookware and home-living brands. It revealed that while most sites focused on showcasing products, they lacked brand storytelling and emotional connection.

To differentiate Kraft, we created a narrative-driven e-commerce experience, one that blended clean, functional layouts with visual warmth, inviting users to explore rather than just shop.

03 Define Phase

Architecture and a scalable system.

Two foundations shaped this phase: Information Architecture and the Design System. We mapped clear navigation flows from homepage to checkout, balancing storytelling and usability so sections like “Set Up Your Kitchen” and “What Sets Us Apart” felt natural to reach.

The design system defined:

  • Typography: Instrument Serif for headers (elegant, timeless) and Poppins for body (readable, modern).

  • Colour palette: green, brown and off-white, inspired by earthy materials and natural craftsmanship.

  • UI components: buttons, icons, hover states and spacing tokens standardised for consistency across every page.

04 Ideation

Calm minimalism with artisanal warmth.

The visual theme echoed Kraft’s handcrafted products, and we structured the key homepage sections around storytelling:

  • Hero: introducing Kraft’s essence and mission.

  • Categories & Bestsellers: encouraging quick discovery.

  • What Sets Us Apart: highlighting brand differentiators.

  • Krafted for Gifting: establishing an emotional connection.

05 Design Iteration

Refining first impressions.

Two sections had the biggest impact on first impressions and conversions, the Hero and the Bestsellers, so they took the most iteration.

Hero section, finding the right visual voice

The first version paired a cookware image with “Built to Cook, Krafted to Last.” We explored a colour-coded approach, brown for cookware, green for serveware, but once storage joined the range, three categories in one hero felt cluttered. The final version used a neutral kitchen-top background with animated transitions across all categories, and a new tagline: “Krafted for Indian Kitchens.”

Bestsellers, balancing subtlety and commerce

The initial cards showed image, rating, price, add-to-cart, wishlist and a “Shop Now” button, informative but too sales-heavy. The final version used a subtle brown background at 5–10% opacity and simplified cards (image, name, starting price, a small rating tag and a minimal wishlist icon), with “Add to Cart” appearing only on hover, calmer and more empathic.

06 Prototype

Structure, storytelling and simplicity.

  • A minimal hero banner that communicates Kraft’s identity instantly.

  • Clear category navigation and product discovery.

  • A unique “Set Up Your Kitchen” quiz to personalise recommendations.

  • Responsive layouts for desktop and mobile.

The result was a visually consistent, experience-rich design ready for Shopify development.

07 Conclusion

UX clarity meets brand storytelling.

With more time I’d run usability testing and refine micro-interactions, hover transitions and subtle motion, to make the experience more immersive. Integrating personalised recommendations or “Shop the Look” modules could further deepen engagement.

This project strengthened my ability to merge UX clarity with brand storytelling, creating a scalable design system that’s both functional and emotionally resonant.