Skip to content
Benjaabawebsites & SEO

Available · Casablanca

Case study · Shopify store design

CASQUETE: a premium cap store designed for cash on delivery.

CASQUETE is a Moroccan streetwear brand selling premium caps. I designed its identity and its Shopify store: five products, more than ten pages, in four weeks, for a market where people pay on delivery and shop on their phones.

  • UX/UI design
  • Shopify
  • 4 weeks
  • Morocco · cash on delivery
CASQUETE home page: the headline Définis ton style, a photo of a woman in a cap, and four trust figures
The home page: a bold headline, the bestseller with its price, and delivery promises above the fold.

The context

CASQUETE

Moroccan e-commerce plays by its own rules: payment on delivery, shopping on a phone, and a strong need for reassurance before ordering.

The store had to feel premium enough to justify the price, while answering those concerns before the visitor even asks.

What I saw

Before designing, find where it breaks.

The first week was research, before any screen.

  1. 01

    How Moroccans buy online

    The local e-commerce landscape and habits: delivery, payment, returns, contact.

  2. 02

    What competitors do

    Local cap brands, their prices and their stores, mostly white and alike.

  3. 03

    Who buys

    A persona: a Moroccan streetwear buyer aged 18 to 35, on a phone.

  4. 04

    What reassures

    The cash-on-delivery path and the trust signals that have to appear before the buy button, not after.

What I decided

Four decisions that shape the screens.

  1. 01

    Dark, on purpose

    Dark backgrounds with warm beige and a gold accent: premium, streetwear, and unlike the white stores around it.

  2. 02

    Reassurance above the fold

    Delivery in 24 to 48 hours, payment on delivery, free returns, WhatsApp: in the top bar and next to every price.

  3. 03

    Type that carries the brand

    Barlow Condensed at its heaviest for headlines, DM Sans for reading: big statements without crowding the screen.

  4. 04

    Templates, mobile first

    Wireframes at 375 pixels, then one product template, a collection page with filters and the inner pages.

The screens

Before, after, and the details.

CASQUETE product page: a beige cap, its price, four reassurance lines and colour swatches
The product page: price, reassurance and colours before the add-to-cart button.
The CASQUETE product page on a phone
Designed for the phone first, at 375 pixels wide.