See work Book a call
Work

Sayra

Concept

A concept Shopify theme for a made-to-order linen and silk label from New Delhi: a storefront that sells the cloth and the cut at full price, and says when each dress will ship.

Sayra is a fictional brand. We wrote this brief to show how we design a Shopify theme, from research to the buy button.

  • Concept
  • Womenswear
  • Online Store 2.0

SAYRA theme preview: the home page, starting with the video banner.

Challenge

Sayra makes linen and silk dresses and co-ord sets to order in a New Delhi atelier, at ₹8,500 to ₹32,000. The old store sold them like stock: a discount in the masthead, six carousels on the home page, and last season's markdowns in the same grid as the new one.

  • Every colour was its own product, so one dress appeared four times, with 'Pre Order' typed into the titles
  • Markdowns of up to 76% sat beside full-price new pieces, so the full price looked like the one to wait out
  • The cloth story, linen, cupro, silk and azo-free dyes, lived in a column at the bottom of the page
  • Seventeen links in the menu, no filters in the collections, and a contact form where a concierge should be

The brief was a theme that treats the cloth as the product, keeps the price whole, and tells the shopper when her dress will be cut.

How we worked

01 Discover: What a shopper needs to know before she pays full price for a dress that is cut to order

02 Define: Three proto-personas and the journey from a first look to a dress cut for her

03 Design: Wireframes first, then the storefront, section by section

04 Optimise: The product page, the made-for-you buy box and how we'd test them

01 · Discover

The brief

Goal

Sell made-to-order linen and silk at full price, and make the wait part of the promise.

Constraints

  1. No discount in the masthead; past seasons live in the Archive room, never in the new-season grid.
  2. One silhouette is one product: cloth and colour are choices on its page, not separate listings.
  3. Every product page shows the ship-by date and takes measurements before it takes money.

Proto-personas Tap a swatch to turn it over

02 · Define

From a first look to a dress cut for her

  1. 01The sale waiter

    Discover

    Where shoppers hesitateAnother sale-driven label?

    What the design doesA masthead with no discount on it: made to order in New Delhi, and the ship-by promise instead.

  2. 02The occasion buyer

    Browse

    Where shoppers hesitateWhere is the dress for my date?

    What the design doesThree edits and six silhouettes, each with its cloths as swatches under the name.

  3. 03The cloth buyer

    Choose

    Where shoppers hesitateLinen, cupro or silk, and in which colour?

    What the design doesCloth and colour are fields on one product page, with the cloth's own page one tap away.

  4. 04The occasion buyer

    Commit

    Where shoppers hesitateWhen will it ship, and will it fit?

    What the design doesThe ship-by date next to the button, and My measurements instead of a size you guess at.

  5. 05The sale waiter

    Wait

    Where shoppers hesitateDid I overpay?

    What the design doesThe price stays whole: old seasons live in the Archive room, and the atelier writes when the dress is cut.

03 · Design

Wireframe to storefront

Ten sections, from the made-to-order bar to the footer, each one the team can move, edit or switch off in the theme editor. Wireframes first, then the design.

The ten sections of the home page, in storefront order, each cut as a paper pattern piece on a table and then placed into the storefront column.

  1. Announcement bar: Made to order in New Delhi, ships in ten working days: the promise, not a discount.
  2. Header: Five links, the wordmark centred, and Concierge where a contact form used to be.
  3. Video banner: One dress, one Delhi colonnade, one line: the cut and the cloth, nothing on sale.
  4. Collection list: Three edits, occasion, holiday and everyday linen, in place of six carousels.
  5. Featured collection: Six silhouettes, each one product, with its cloths as swatches under the name.
  6. Image with text: The cloth up close, with its weight, its origin and how it washes.
  7. Multicolumn: The atelier: hands at the cutting table, and the made-for-you promise in plain words.
  8. Blog posts: Stories from the atelier, for shoppers who buy the cloth first.
  9. Newsletter: Letters from the atelier, once a month, with no code attached.
  10. Footer: Shop, the cloth, the atelier and help, with the Archive room in its own place.

04 · Optimise

The product page, decision by decision

A dress that is cut after you order asks for trust twice. Each number marks a decision on the product page and the reason for it.

  1. Cloth and colour as fields

    The name is the silhouette. Cloth and colour sit under it as choices, so one dress is one page, never four.

  2. Swatches of the real cloth

  3. Your measurements, not a guess

  4. A ship-by date, not a label

  5. The promise, before the button

  6. One filled button

The buy box of the product page beside the dress it sells: six numbered pins on the dress, one for each decision listed beside the box.

04 · Optimise

Made for you, in your cloth

The buy box from the theme: choose the cloth, give a size or your measurements, and the page says when the dress will be cut and when it ships.

Cloth

The Column in Linen

Sleeveless column dress · falls to the ankle

₹14,500

Size

Made for you in New Delhi

Exchange within 7 days, or store credit. One alteration, free.

Design tokens

SAYRA swatch book

Colour

Type

  • Linen, cut to you. Fraunces LightHeadings & wordmark
  • The edits · Made to order in New Delhi Albert SansInterface
  • The Column ₹14,500 Albert Sans MediumProducts & prices

04 · Optimise

How we'd test it

A concept has no results yet. These are the first three experiments we'd run after launch, and what each one has to prove.

  1. A crop of linen Linen · 180 gsmCareCold wash, line dry
    If
    the price stands alone, with no compare-at and no sale masthead
    Then
    more orders are placed at full price
    Because
    there is no cheaper price to wait for
    Primary metric
    Full-price share of orders
    Guardrail
    Conversion rate
  2. A crop of cupro Cupro · 120 gsmCareCold hand wash, dry flat
    If
    the ship-by date sits next to the buy button
    Then
    more checkouts are completed
    Because
    the wait is known before the card comes out
    Primary metric
    Checkout completion rate
    Guardrail
    Order cancellations
  3. A crop of silk Silk · 19 mommeCareDry clean only
    If
    colourways are swatches on one product page
    Then
    more product views end in Add to Bag
    Because
    the shopper compares colours without leaving the page
    Primary metric
    Add-to-bag rate
    Guardrail
    Exchange requests
Next case study Lisse A concept Shopify theme for a Bombay intimates and sleepwear label: a storefront that finds the size, matches the shade and completes the set before it asks for money. Read the case study

Ship it Built
for Shopify.

Book a call