Selected workProject 3 of 4

Indigo Yard

A small textile studio moved its orders out of Instagram messages and onto its own site, designed in Figma and built with AI tools in three weeks.

Role
Designer and builder
Team
Studio owner, me
Timeline
3 weeks
Tools
  • Figma
  • Lovable
  • Claude Code
  • VS Code
Platform
Responsive web

Sample project. Replace with real work.

Indigo Yard home page on a laptop and a phone: a bold heading, an indigo-patterned hero block and a row of fabric swatches.
Home, desktop and phone. On screen: The cloth, up front; Request, not checkout; Built for the phone first.
Indigo Yard product page: a large fabric image on the left, and on the right the name, price per yard, colour options and a Request this cloth button.
Product page with yards in stock beside the price. On screen: Price and yards left, together; Pick a colour; Send a request.
The Indigo Yard site shown at three sizes: a browser window, a large phone and a small phone.
One layout system across three widths. On screen: Desktop; Phone; Small screens.

Problem

Indigo Yard is a two-person studio that hand-dyes cloth. Every sale happened in Instagram messages: a customer saw a post, asked the price, asked how much was left, asked about shipping, and the conversation often stopped there. The owner was spending her evenings answering the same four questions (sample context for this placeholder project).

Customers couldn’t find price, stock and shipping without asking, so orders stalled in conversations and the owner became the website.

Research

I went through three months of her messages with her and tagged every customer question. Then I spoke to five customers about the last time they bought cloth online (sample research).

I always ask how many yards are left before I ask the price. There’s no point loving it if there isn’t enough for a dress.

Customer, buys fabric for her own tailoring (sample quote)
  • Four questions made up most messages: price, yards left, care, and shipping time.
  • Customers arrive from Instagram, on phones, usually on mobile data.
  • The owner did not want a full shop. Each piece is different, and she likes to confirm the order personally.
A sitemap: Home at the top with five sections below it, each with a short list of pages.
Content inventory turned sitemap. The second branch, the cloth catalogue, carries most of the site. On screen: Home; The catalogue carries the site.

User flows

From an Instagram post to a confirmed orderChoose a step to see what happens there.

  1. Customers arrive from Instagram, on phones, usually on mobile data.

  2. The link opens the cloth from the post, not the home page.

  3. The questions from her messages are answered on the page. Yards left sit on the same line as the price.

  4. An order request, not a checkout. The owner confirms each piece personally.

  5. Requests arrive with cloth, length and colour filled in, so most need one reply (sample).

Key decisions

An order request, not a checkout

Accepted

Customers choose a length and send a request. The owner confirms and takes payment the way she already does.

Rejected

A full shop with cart, payments and shipping rules.

Trade-off. Orders aren't instant. But it matches how she works, avoids payment fees on small orders, and could ship in three weeks.

Yards in stock sit beside the price

Accepted

Price per yard and yards left, on the same line, on every product.

Rejected

Stock only shown at the point of ordering, which most shop templates do.

Trade-off. Low stock is visible to everyone. The owner worried this would put people off; in testing it made people decide faster (sample).

The direction I dropped was a full-screen video of the dye vats on the home page. It was beautiful and it was the owner’s favourite. But customers arrive on phones, on mobile data, from a post they already watched, so the process now lives on the About page.

The rejected direction: a full-screen dark video hero with a play button and a single line of text.
Rejected: the full-screen video hero. On screen: Video first, cloth last; A play button, not a product.

Solution

This is where the “AI-assisted” part of my title gets specific.

  • Figma. I designed the home, catalogue, product and request screens with real components and named variables, so the names could carry straight into code.
  • Lovable. In one afternoon I had a clickable version on a real URL to put in front of three customers. It was throwaway, and that was the point.
  • Claude Code. I built the production site with it, page by page, giving it the Figma frames, the tokens and a written spec for each state and breakpoint.
  • VS Code, by hand. I read every diff. I rewrote the focus states, fixed heading order, added alt text from the owner’s own descriptions of each cloth, and set explicit image sizes so nothing jumps while loading.
The Indigo Yard product page.
The product page answers the four common questions before anyone has to ask. On screen: Price and yards left, together; Pick a colour; Send a request.

Outcome

Placeholder results until real ones are supplied.

  • Orders now arrive with cloth, length and colour already filled in, so most need one reply instead of several (sample).
  • Lighthouse scores of 95 or more on a mid-range phone, e.g. Performance 97, Accessibility 100 (sample).
  • The owner updates stock in a simple file she edits herself (sample).

What I’d do next

  • A small content editor so stock can be changed from her phone rather than a laptop.
  • Real photography. The site launched with her own phone photos; a half-day shoot would lift every page.
  • Measure the request-to-sale rate to find out whether the request flow should become a real checkout.