A small shop for handmade pet toys

One maker, no shop of their own

My client sews and knits toys for pets at home, from cotton, wool and linen. They sold through friends and social media, which meant answering every question by message and losing track of orders.

They wanted a simple shop under their own name: show the toys, explain what they are made of, and let people buy without writing first. Most of their visitors arrive from social media on a phone, but many order later on a computer, so the shop had to work on both.

Who makes the toys, and who buys them

I framed the problem around two people: Defne, a maker who sells what they sew and wants buyers to see the care in it, and Batuhan, a buyer who wants durable, safe toys and reads every detail before paying. A journey map followed Batuhan from noticing the need to coming back after the purchase.

The personas came from three sources: conversations with my client about how they make, price and ship their toys; short interviews with pet owners about how they choose toys and what makes them trust a small seller; and a review of how craft shops and large pet stores present their products.

From paper to wireframes

I sketched the main screens on paper, then built low-fidelity wireframes for mobile and desktop. The structure stayed small on purpose: one maker doesn't need a marketplace, just two categories, a story and a cart.

Filling the wireframes with photos, materials and prices

The high-fidelity screens follow the wireframes block by block. What changed is what fills them: photos, materials, prices and a clear green action on every screen.

Auditing the starter kit, then building on it

The project started from a small style kit with colors, type and buttons. Before designing more screens, I audited it.

The same shop on a wide screen

On desktop the header holds the logo, the category links, search, account and the bag. Pages sit inside 80px margins and the cat and dog pages use a four-column grid. Components, colors and type are the same as on mobile. Scroll inside a window to see the full page.

Shopping with one hand on a phone

On mobile the categories move into the menu and the product grid drops to two columns. The product page and the bag stack into one column, with Add to cart and the total always in reach.

Try it yourself

The mobile shop runs in the browser, built with the same tokens as the Figma file.

A shop the maker can grow into

Research, a sitemap, wireframes for mobile and desktop, a documented design system in Figma, high-fidelity screens for both, including the product page and the bag, and a working mobile prototype.

What testing changed

I walked pet owners through the clickable prototype with three tasks: find a toy for their pet, find out what it is made of, and add it to the cart. Three things came out of it:

Materials first. People looked for what a toy is made of before the price, so every card got a one-line material description under the name and price.

"Is that all?" On a category page with few toys, people weren't sure the list had loaded. A product count now sits under the title.

Trust before checkout. Several people scrolled looking for returns and shipping before buying, so the four promises moved up, right after the reviews, and a delivery box now sits on the product page and in the bag.

Next steps

Checkout and order confirmation, order history in the account, and a second round of testing on the desktop site.

What I learned

One maker doesn't need a marketplace's depth. Two clear paths and a short list of toys were enough. Auditing the starter kit first paid off too: the contrast issue in the brand color would otherwise have repeated on every button.

Building each component for mobile and desktop at the same time kept the two versions from drifting apart.