# Talk to Stino — case study

> A custom, animation-led storefront for a black-and-white Lagos streetwear brand: the garments hang on a rack you can drag, and if your colour isn’t there you can **talk to Stino** on WhatsApp.

- **Client:** Talk to Stino
- **Type:** client
- **Industry:** Fashion & streetwear
- **Year:** 2026
- **Role:** Design & development — Blackstar Dev Studio
- **Platform:** Web · Next.js on headless Shopify
- **Tools:** Figma, Next.js 16, React 19, Tailwind 4, Motion, Shopify Storefront API, Vercel
- **Status:** Preview — connected to Shopify, taking payments, not launched

**AI-assisted:** The store was built with an AI coding assistant, directed from the PRD, the style guide and the Figma designs; the logo loader, the rack and the Shopify integration were specified, reviewed and tested that way.

- Case study: https://ministar-samuel.com/project/talk-to-stino
- Staging preview: https://talk-to-stino.vercel.app
- Figma file: https://www.figma.com/design/DBcCHXSSd532hmUjtCrKa8

![Talk to Stino home page: garments hanging on a black rail, with swing tags and the Stino List bar](https://ministar-samuel.com/case-studies/talk-to-stino/home-desktop.webp)

## Overview

Talk to Stino is a premium streetwear brand with a bold black-and-white look and a mascot — a cartoon face with braids and piercings, “TALK TO STINO” written across the lips. It sells in Nigeria, priced in naira.

The store is a custom Next.js front end on **headless Shopify**: Shopify runs the products, stock, cart, checkout, payments and customer list; the code is everything the shopper sees and touches.

- **5** Products
- **18** Colourways
- **9** Figma pages
- **172** Unit tests passing

## The brief & feasibility

> Clean black-and-white visual language … Fixed bottom email registration bar … Mobile-first responsive layout
>
> — Project brief (PDF), core requirements

The brief set the bar at “Litgang / YL Collectives quality”. The product requirements turned it into a sharper aim: an animation-led store that borrows the hanging-rail idea of the Snug Wrld concept store, kept monochrome and made highly interactive.

Feasibility was answered on day one: the build itself was doable that week. The two real blockers sat outside the code — approval from a payment provider, and photography of the garments for the rack.

The primary shopper is “the drop chaser”: 18–30, in Lagos, Abuja or Port Harcourt, arriving from an Instagram story on a phone. So the critical journey is short and mobile-first:

**J1 · Instagram link to paid order** (flowchart):

1. Instagram link — The main audience arrives from an Instagram story, on a phone, often on mobile data (PRD §4.1).
2. Product focus view
3. Colour tag + size
4. Add to bag — The bag drawer opens straight away.
5. Shopify checkout — Contact, delivery and payment happen on Shopify’s own checkout.
6. Confirmation

*Goal G1: from an Instagram link to a paid order in under 90 seconds.*

## Goals & anti-goals

*goals*

**G1** Sell in naira — an Instagram link to a paid order in under 90 seconds.

**G2** Be memorable — “clearly more engaging than Litgang”.

**G3** The brand runs it alone — a change in Shopify shows on the site in about a minute.

**G4** Grow the Stino List. **G5** Turn WhatsApp colour requests into demand data. **G6** Stay fast on a mid-range Android over 4G.

![Figma cover for the Talk to Stino website design](https://ministar-samuel.com/case-studies/talk-to-stino/figma/00-cover.webp)
*Figma file cover*

*anti-goals, word for word from the PRD*

- ✗ Animation that gets in the way of buying.
- ✗ A desktop showpiece that is clumsy on phones.
- ✗ Needing a developer to change a price or mark something sold out.
- ✗ Color creeping into the interface.
- ✗ Copying the reference.
- ✗ Touching card data.

## References

*snug wrld — primary*

### Take the rail. Fix the two weak spots.

From the Snug Wrld concept store: the hanging rail, garments that grow on hover, a blurred focus view, and colour swing tags that wipe from bottom to top.

Its two weak points became requirements: buying happened on a separate, standard Shopify theme, and on phones the rack shrank to thumbnails. Here, the rack *is* the shop on every screen size.

![The built rack on the Talk to Stino home page](https://ministar-samuel.com/case-studies/talk-to-stino/home-desktop.webp)

*yl collectives*

### Start from the logo.

YL Collectives contributed one idea: a loader that starts from the logo and animates it while the page loads, then reveals the store. Their live site showed no loader, so this one was designed from that description — in Figma first, frame by frame.

![Loader storyboard in Figma: the mascot drawn, filled, waking and handing over to the page](https://ministar-samuel.com/case-studies/talk-to-stino/figma/03-loader-storyboard.webp)

*litgang — secondary*

### Keep what works locally.

From Litgang (a Dawn-theme store): naira-first pricing, delivery times on product pages, WhatsApp as a human channel, bundle offers and a mascot loader. What to beat: a washed-out, low-contrast hero and a generic theme layout.

![Talk to Stino product page with naira price and swing-tag colour selector](https://ministar-samuel.com/case-studies/talk-to-stino/product-desktop.webp)

## Information architecture

The sitemap stays small on purpose. A product opened from the rack is an overlay over the blurred rack, with its own URL; the same URL opened directly is a full page. The header, ticker, bag drawer, email bar and footer are on every page.

**Sitemap (PRD §7.1)** (flowchart):

1. Home · the rack
2. Shop grid
3. Feed — Posts are Shopify blog articles the owner writes in the admin.
4. Biography — /about redirects here.
5. Contact
6. Product — An overlay from the rack (client-side URL), a full page on direct visits.
7. Feed post
8. Bag drawer
9. Shopify checkout — Hosted by Shopify on checkout.<domain>.

*home, top to bottom*

Rack → Ticker → Statement → The Drop → Lookbook → Meet Stino → From the Feed → Newsletter teaser → Footer. The rack comes first because the rack is the product.

Wireframes: Home — section order (phone).

## Visual system

> The interface is black, white and grey. Color appears only in product photography.
>
> — Visual style guide — rule zero

- **Ink** #0A0A0A — Text, buttons, the rail, ticker, loader wipe
- **Paper** #F2F1EE — The studio wall — warm, so white garments read
- **White** #FFFFFF — Cards, sheets, inputs, checkout
- **Asphalt** #151514 — Street sections, with texture
- **Grey 200** #DCDCD7 — Hairlines
- **Grey 600** #5A5A54 — Muted text

- **Archivo Black** — Display and product names
- **Archivo** — Interface and body, variable 100–900
- **Space Mono** — Swing tags, tag prices, the loader counter
- **Permanent Marker** — Hand-written accents only

*the mascot, in layers*

### One logo, five layers.

The mascot was cut from the brand’s artwork into stacked transparent layers — line art, fills, face, lips and eyelids — so the loader can draw it, fill it and wake it up, and so it can wink when you join the Stino List.

There is no red or green anywhere: status is shown with an icon, a word and weight. Contrast is 17.5:1 for ink on paper.

(Interactive demo on the page: Live: the real layers, assembling in order. Hover to blink..)

![Figma foundations board: logo, colour, type, spacing, shape, motion and imagery](https://ministar-samuel.com/case-studies/talk-to-stino/figma/01-foundations.webp)
*Figma · 01 Foundations — “Monochrome stage, colorful product.”*

## Design in Figma

The whole store was designed before it was built: nine pages from the cover to the biography, desktop at 1440 and phones at 390, each page with notes on behaviour and on what was still waiting for the brand (prices, rack order, photography).

[Talk to Stino — Website Design](https://www.figma.com/design/DBcCHXSSd532hmUjtCrKa8) — the full file, view only

**1. 1 · Draw**

The loader starts from nothing but a 000 counter. The mascot’s line art draws in over the first 600 ms.

![Loader frame: mascot line art drawing in](https://ministar-samuel.com/case-studies/talk-to-stino/figma/03-loader-02-draw.webp)

**2. 2 · Fill**

Between 500 and 850 ms the fills arrive, and the face reads as the logo.

![Loader frame: mascot filled](https://ministar-samuel.com/case-studies/talk-to-stino/figma/03-loader-03-fill.webp)

**3. 3 · Wake**

Stino blinks and the lips write on. If the store is still loading, the mascot breathes and waits.

![Loader frame: mascot awake](https://ministar-samuel.com/case-studies/talk-to-stino/figma/03-loader-05-awake.webp)

**4. 4 · Hand over**

An ink wipe rises while the mascot flies up to become the header logo, and the rack settles in. The whole thing takes 0.9–2.2 s, any tap skips it, and reduced-motion visitors get a 300 ms fade.

![Loader frame: the page revealed behind the ink wipe](https://ministar-samuel.com/case-studies/talk-to-stino/figma/03-loader-09-reveal.webp)

![Figma components board: buttons, swing tags, size pills, garment states, chrome, bag and cards](https://ministar-samuel.com/case-studies/talk-to-stino/figma/02-components.webp)
*Figma · 02 Components — “The parts.” Garments have idle, hover, sold-out and empty-hanger states.*

![Product focus view over the blurred rack](https://ministar-samuel.com/case-studies/talk-to-stino/figma/05-product-focus-desktop.webp)
*Focus view*

![Bag drawer open over the store](https://ministar-samuel.com/case-studies/talk-to-stino/figma/06-bag-drawer-desktop.webp)
*Bag drawer*

![Shopify checkout designed with the brand’s logo, colours and square corners](https://ministar-samuel.com/case-studies/talk-to-stino/figma/06-checkout-desktop.webp)
*Checkout, as Shopify can brand it*

## Key interactions

*the rack*

### A rail you can throw.

On desktop the rack is one long rail you drag sideways, with inertia. Garments hang on springs, sway a little at rest and grow from the hook on hover; the last hanger is always empty, with a hand-written note. On phones it becomes a swipe rail, not a grid of thumbnails.

Try the miniature: drag it, or focus it and use the arrow keys.

(Interactive demo on the page: Live: the seven Daily Blanks colourways, using the brand’s cut-outs..)

![Talk to Stino home page](https://ministar-samuel.com/case-studies/talk-to-stino/home-desktop.webp)

1. **Swing tags** — Each tag carries the product and its naira price in Space Mono — the care-label voice.
2. **Drag the rack** — A plain instruction where the rail ends; the rail itself is the scroll.
3. **Don’t see your color?** — The hand-written prompt that opens the colour request.
4. **Ticker** — Paper and ink versions; it speeds up as you scroll.
5. **The Stino List** — The fixed email bar from the brief. Joining creates a Shopify customer, tagged source:stino-list.

**1. Swing tags are the colour picker**

On the product, each colour is a swing tag. The dashed “?” tag is for colours that aren’t on the rack.

![Product page on a phone with swing-tag colours](https://ministar-samuel.com/case-studies/talk-to-stino/figma/05-product-mobile.webp)

**2. Ask for a colour**

A sheet opens with the product already filled in. Pick the colour (required), a size, and optionally “email me if this color drops” — which tags the customer in Shopify as wanting that product in that colour.

![Colour request sheet on a phone](https://ministar-samuel.com/case-studies/talk-to-stino/figma/05-color-request-mobile.webp)

**3. Talk to Stino**

“Continue on WhatsApp” opens a chat with the message already written: “Hi Stino 👋 I can’t find my color…”. A sale that starts there closes as a Shopify draft order with an invoice link.

![WhatsApp with the colour request message prefilled](https://ministar-samuel.com/case-studies/talk-to-stino/figma/05-whatsapp-mobile.webp)

**4. Or straight to the bag**

If the colour is there, it goes in the bag — a bottom sheet on phones, a drawer on desktop — kept on Shopify’s Cart API. “Shipping calculated at checkout.”

![Bag sheet on a phone](https://ministar-samuel.com/case-studies/talk-to-stino/figma/06-bag-sheet-mobile.webp)

**J3 · Colour request** (flowchart):

1. Rack or product
2. Colour on the rack?
3. Add to bag
4. Colour request sheet — Product prefilled; colour required; size; quick chips. “Just open WhatsApp” skips the form.
5. WhatsApp, message written
6. Draft order + invoice — The brand turns the chat into a Shopify draft order with an invoice link.
7. Email me if it drops — Opt-in: the customer is tagged wants:<product>:<color> — demand data (goal G5).

## Build

> Shopify is the engine, our code is the body.
>
> — PRD §1

**How the pieces talk** (flowchart):

1. Shopper’s browser
2. Shopify admin — The brand edits products, stock, posts and the biography here — no developer needed (goal G3).
3. 5 webhooks — Sent to /api/revalidate, which refreshes the cached pages.
4. Next.js 16 on Vercel — App Router; catalogue and content cached, the cart never cached.
5. Storefront API — Products, the rack collection, cart, the Feed blog and the Biography metaobject.
6. Admin API — Scoped to customers only: the Stino List.
7. Shopify checkout — Paystack first, then bank deposit.

Pages read through one commerce layer that can switch between real Shopify and sample data — which is how the whole storefront was built and reviewed before the store had a single product in it.

Catalogue and content are cached and invalidated by Shopify webhooks; in testing, a stock change showed on the live site within 3 seconds, and again within 8. Payments stay inside Shopify: Paystack’s official Shopify app is connected in live mode, with bank deposit as the fallback. The site never touches card data.

```graphql
products(first: 100) { nodes {
  handle title description productType
  options { name optionValues { name } }
  priceRange { minVariantPrice { amount } }
  variants(first: 100) { nodes {
    id availableForSale quantityAvailable
    selectedOptions { name value }
    swatch: metafield(namespace: "tts", key: "swatch") { value }
    cutoutFront: metafield(namespace: "tts", key: "cutout_front") {
      reference { ... on MediaImage { image { url } } }
    }
  } }
} }
rack: collection(handle: "the-rack") {
  products(first: 100, sortKey: COLLECTION_DEFAULT) { nodes { handle } }
}
```
*Part of the catalogue query: each variant carries its swatch and garment cut-out as Shopify metafields (excerpt; no keys).*

*motion, built as small reusable pieces*

- Swing — garments and tags on spring physics (stiffness 120, damping 8)
- Fly-to-bag — the garment travels to the bag icon
- Page curtain, image reveals, line draws, hand-writing
- Magnetic buttons, tilt, parallax, pop-in chips
- Mascot follow and wink
- Reading progress

## Shipping

The work happened in five sessions, logged as it went. The major phases each ended with an independent code review, and its findings were fixed before moving on.

- **2026-10-26** — Brief to working storefront: Feasibility and direction, the PRD, the Figma designs and loader prototype, then the whole store built on sample data, browser-checked, reviewed (1 critical, 9 important findings fixed) and merged.
- **2026-10-27** — Motion everywhere: Animations and micro-interactions across every page, an animation review, and the loader set to replay on every reload. A cursor glow was removed at the owner’s request.
- **2026-11-01** — Connected to the real store: Store review, the Shopify provider, catalogue/feed/biography imported (all 53 variants), a Vercel preview, five webhooks, WhatsApp, and an independent review (0 critical).
- **2026-11-02** — Contact details: Contact page and social links.
- **2026-11-03** — Payments live: Paystack connected through Shopify in live mode; checkout offers Paystack first, then bank deposit.

![Shop grid on the staging site](https://ministar-samuel.com/case-studies/talk-to-stino/shop-desktop.webp)
*Shop*

![Feed page on the staging site](https://ministar-samuel.com/case-studies/talk-to-stino/feed-desktop.webp)
*Feed*

![Biography page on the staging site](https://ministar-samuel.com/case-studies/talk-to-stino/biography-desktop.webp)
*Biography (draft copy)*

## Outcome & next

The store is a working preview: connected to Shopify, taking payments, **not launched**. Copy on the biography and feed is still draft for the brand to approve, and only garments with a photographed cut-out hang on the rack (13, plus the empty hanger).

- **53** Variants imported
- **5** Shopify webhooks
- **3–8 s** Stock change to live site (measured)

*open before launch*

- ☐ Domain and the Vercel Pro upgrade
- ☐ Shipping rates and store policies
- ☐ Copy approval (biography, feed)
- ☐ Photography for the remaining colourways
- ☐ Paystack compliance and VAT handling
- ☐ Analytics (not built yet)

![Talk to Stino home on a phone: the swipe rail](https://ministar-samuel.com/case-studies/talk-to-stino/home-mobile.webp)
*Staging, on a phone*

---
By Samuel Ministar · https://ministar-samuel.com/project/talk-to-stino