Client story

Nottasin

From a cluttered Shopify store to a storefront built to convert.

E-commerceShopifyUI/UX and development
Platform
Shopify
Engagement
Storefront rebuild
Surfaces
Home, product cards, PDP, cart, reviews
Sequence
Brand, then design, then build

The situation

Nottasin was already selling through Shopify. The catalog and the backend were in place. The storefront had grown section by section, without a shared structure, so spacing, color, and type shifted from page to page. The presentation sat below the quality of the products.

What was getting in the way

  1. 01

    No color, type, or card system

    Pages used different shades and typefaces. Product cards varied in size, so the catalog felt unfinished.

  2. 02

    Product pages that did not help someone decide

    Specifications, descriptions, and the facts a shopper needs were missing or hard to find.

  3. 03

    No clear next step and no reviews

    Key pages had no obvious Add to Cart or Shop Now, and the journey showed no reviews or trust marks.

  4. 04

    Cart friction, including a fake countdown timer

    The cart drawer showed a 3m 30s urgency timer, coupons were hard to apply, and checkout asked for more steps than the purchase needed.

What we shipped

The work a shopper can see, grouped the way it landed in the store.

Brand system, locked before screens

  • Primary, secondary, and accent colors agreed before any mockups
  • Heading and body type set as one pairing
  • Every later screen designed against that reference

Product cards

  • Equal-size frames across the catalog
  • One action on every card: Add to Cart
  • Discount badge fixed to the top-right corner
  • Bestseller and New Arrival pills on the image
  • Card backgrounds in each product’s theme color
  • Star rating, numeric rating, and review count

Product pages

  • A clearer title, with a tagline under the name
  • USPs in a 2×2 grid, with text separated from the image
  • Under Add to Cart: free shipping above ₹499, 5% extra on prepaid orders, and a replacement and cancellation policy
  • Product Details with a one-line description, serve size, shelf life, and net quantity
  • Nutrition facts in an expandable table
  • An FAQ section shoppers can open
  • Verified reviews, with sort by newest and by rating

Homepage

  • A moving announcement bar across pages
  • The NOTTA SIN label above Best Sellers
  • View all products aligned with the heading, plus carousel arrows
  • Five review cards with photo, name, role, and quote
  • Blog cards that show a real excerpt

Cart

  • Applicable coupons visible and usable in the drawer
  • The fake countdown removed
  • The extra note icon removed

Reels

  • One reel plays at a time, so the rest of the row stays quiet

Before and after

  • Section structure
    BeforeInconsistent and unorganized
    AfterClean, purpose-built sections
  • Color and typography
    BeforeNo defined system
    AfterA finalized theme, palette, and fonts
  • Calls to action
    BeforeMissing on key pages
    AfterClear next steps through the journey
  • Social proof
    BeforeNone visible
    AfterReviews and trust signals in the design
  • Layout
    BeforeCluttered, with no hierarchy
    AfterA clear visual hierarchy
  • Checkout
    BeforeExtra steps and friction
    AfterA simpler path to purchase
  • Product pages
    BeforeUnclear info and missing details
    AfterComplete product information
  • Theme
    BeforeAn unoptimized Shopify theme
    AfterA production-ready theme the team can edit

How the work ran

  1. Phase 1

    Discovery and brand foundation

    Color palette, theme, and typography agreed before any screens.

  2. Phase 2

    Detailed UI design

    Homepage, collections, product pages, and cart designed and approved before development.

  3. Phase 3

    Shopify development

    The approved UI built as a live store the client’s team can update.

  4. Phase 4

    Theme optimization and handover

    Scripts, images, and slow sections reviewed so the store loads cleanly.

Where the store stands

The store now carries one visual system from the first section to the last. Shoppers see a next step, reviews they can check, and product pages that state what is being sold. The cart offers real coupons, and the countdown timer is gone.

Planning a store rebuild?

Tell us about the store. We start with the brand, then the pages a shopper actually uses.

Book a consultation

Service used: Web Development Services