Portfolio case study

E-commerce Design for a Kitchenware Retail Platform

OVERVIEW

PROJECT

This project involved designing an e-commerce website for a UK-based kitchenware brand, enabling users to browse products and explore cooking-related content.

ROLE

UX / UI Designer: information architecture, site map, user purchase journey, wireframes, prototyping, and stakeholder collaboration.

GOAL

The goal was to create a seamless shopping experience that allows users to easily discover products, learn through content, and complete purchases efficiently. Design an intuitive e-commerce experience that simplifies product discovery, supports informed purchase decisions, and encourages conversions.

KEY SKILLS DEMONSTRATED

E-commerce UI/UX Design

Product Categorization

Conversion-focused UX

Checkout Flow Optimization

Content & Commerce Integration

THE PROBLEM

Transactional websites often require users to complete multiple steps such as browsing products, selecting options, and confirming orders.

Users needed to:

  • Browse a wide range of kitchen products

  • Quickly find relevant items

  • Understand product details

  • Access cooking-related content

The challenge was balancing shopping flow + content exploration without overwhelming users.

DESIGN APPROACH

1 Product Categorization

Organized products into clear categories to improve discoverability and reduce browsing friction.

2 Content Integration

Integrated cooking blogs into the experience to support inspiration and product understanding.

3 User Flow Optimization

Streamlined the journey from browsing → product → purchase to reduce friction and improve conversion.

4 Visual & Layout Design

Designed clean, structured layouts to highlight product information, images, and pricing clearly.

Solution

The information architecture was structured around product categories and the blog section, with on-sale items highlighted to support efficient shopping and drive engagement.

SIte Map

kitchen square ecommerce user flow

Style Guideline & Design System

I developed a style guide to establish a consistent brand identity and designed an end-to-end purchase flow, guiding users from product discovery through checkout and post-purchase experience.

Brand colours
Ink Black
#1A1A1A
Warm Cream
#F5F0E8
Brass Gold
#C8A96E
Spice Red
#D94F2B
Forest Green
#2E5C3E
Stone Grey
#8A8680
Linen
#E8E2D9
White
#FFFFFF
Typography
H1 — 32px / 500
Premium Cookware
H2 — 22px / 500
Shop by Collection
H3 — 17px / 500
Saveur Selects Triply Set
Body — 15px / 400
Trusted by professional chefs. Stainless steel, triply and non-stick cookware crafted for every kitchen.
Caption — 12px / 400
Free UK delivery on orders over £50 · Age verification required for knives
Price — 18px / 500
£89.99 £149.99
UI Components
Buttons
Badges & Labels
50% OFF — SAV50 New arrival ★ 4.5 Excellent Age verified delivery
Product card
🍳
SAVEUR SELECTS
Triply Steel Set
£89.99 £149.99
SAV50
Spacing scale
4px
8px
12px
16px
24px
32px
48px
64px
Voice & Tone rules
Do

Confident, warm, chef-trusted language. "Crafted for every kitchen." Use promo urgency sparingly and purposefully.

Don't

Avoid jargon overload or discount-spam tone. Don't bury trust signals like age verification or delivery info.

Border radius & elevation
4px — tags
8px — buttons
12px — cards
24px — pills
Border weight
Default: 0.5px — subtle, refined
Featured card: 1.5px accent colour
No drop shadows — flat surfaces only
End-to-end user journey from discovery to post-purchase
1
Discovery
User lands on homepage via search, social, or direct. Greeted by promo banner (e.g. "50% OFF SAVEUR SELECTS — SAV50"), hero image, and featured collections.
HomepagePromo BannerSEO / Paid
2
Browse / Search
User navigates via top nav (Cookware, Knives, Bakeware, Brands) or uses filters. Category pages show product grids with price, sale badges, and brand labels.
Category PageFiltersSortBest Selling
3
Product Detail Page
Full product info: images, material specs, compatibility (induction, oven-safe), promo code reminder. Reviews and Trustpilot score build confidence. Related products shown below.
ImagesSpecsReviewsPromo Code
?
Is the product a knife?
Yes → Age verification flag added at checkout No → Standard flow continues
4
Add to Cart
User selects options (size, variant) and clicks "Add to Cart." Cart slides out or user navigates to cart page. Upsell / cross-sell suggestions may appear.
Variant SelectCart DrawerUpsell
5
Cart Review
Cart page shows items, quantities, subtotal. User can apply a promo code (e.g. SAV50, BAKE10). Free delivery threshold indicator shown. User proceeds to checkout.
Promo CodeFree DeliveryQuantity Edit
6
Checkout
Shopify-hosted checkout. User enters delivery address, selects shipping method, and pays (card, PayPal, etc.). Promo code re-confirmed. For knives: age verification is required to complete delivery.
Shopify CheckoutPaymentAge Verify (knives)Address
?
Payment authorised?
Yes → Order confirmed No → Return to checkout with error
7
Order Confirmation
Confirmation page and email sent. Order number provided. Shipping timeline communicated (especially for pre-orders or items awaiting a production run).
Confirmation EmailOrder NumberTimeline
8
Fulfilment & Delivery
Item dispatched (sometimes direct from manufacturer, e.g. Samuel Groves). Courier delivers with age verification for knives. Tracking info sent via email.
DispatchTrackingAge Verify on Delivery
9
Post-purchase
Customer support via email for care instructions, issues, or replacements. Trustpilot review request sent. Community engagement (recipes, tips) encourages return visits and loyalty.
Support EmailTrustpilot ReviewCommunityRepeat Purchase

Categories / Filter Page

The “Filter and Sort” control remains fixed at the top while scrolling, enabling users to easily adjust results and continue browsing products seamlessly.

kitchensquare.co .uk mobile all

SIde Menu and Bottom Menu in mobile version

I added side and bottom navigation to the mobile version to improve accessibility and help users quickly locate specific, categorized products.

kitchensquare.co .uk mobile menu

Interactive Product Showcase with Hotspots

We created a dedicated section called “The Essential Duo” to showcase products through an interactive photo with hotspots. When users hover over each product name, the corresponding hotspot appears on the image, helping them quickly understand the product’s look, size, and function in context. The on-sale price is also displayed alongside for easy reference.

Final Product

I incorporated a limited-time promotion section on the homepage to drive urgency and added a persistent promo code banner to boost visibility and engagement. The design was optimized with responsive layouts to ensure a seamless mobile browsing experience.

Social Media Post

I used Google Studio to come up with promotional post ideas and also created a Shopify CMS maintenance guide to help clients manage their sites after launch.

Result & Reflection

Outcome

The platform improved product discoverability and created a more seamless shopping experience by combining content and commerce in a structured way.

What I learned

This project strengthened my ability to design e-commerce experiences that balance product discovery and content. I learned how clear categorization and structured layouts can significantly improve usability and support purchase decisions.

Footer graphic

CONTACT

+1 6479282279

© 2026 Katherine Chui — Designed & built by me in WordPress

Scroll to Top