Fiar Design
An online store for a body kit brand, with kits for Toyota, Mitsubishi, Isuzu and BYD, and the back office and ads behind it.
Chanut
Wannasarnmetha
Applied AI Engineer
What I do
Good design starts with knowing the business.
Business sense
How it makes money, who buys and why. I start there.
Web design
Any style the brand needs, built to sell, down to the last pixel.
AI
workflowsI find the work a team repeats, then hand it to AI.
Selected work
Websites and the systems behind them
bareskin
A bilingual site for a laser hair removal studio, with online reservations and a content studio of its own.
My skills and my playground
SEO, AEO
Found on Google
I get sites onto the first page of Google, and named in the answers its AI gives.
Meta Ads
Ads that bring in customers
I set up and run ads on Facebook and Instagram that turn into sales.
chanut.dev
What steers the doves
The doves over my name are a few rules on a grid of tiles, and here you can see them. The x-ray shows the grid each bird is set on, solid where it covers 42% of a tile, which is why it hides the name. Behind each bird is the path it flew, ahead the turn it is making, and around your pointer or finger the push that turns them away, in tiles lit by its strength. Hold the sky, or tap Show how.
Fiar Design
A contact bar that knows when to open
A bar that stays open covers what people came to read. This one opens for three seconds when it appears, folds to three circles, and opens again near the end of the page, where people decide. The LINE button is black on white, since white on LINE green reads at only 2.3:1. Scroll past it.
Experiment
Seats you paint
Booking for a group usually means a careful tap on every seat. I let you paint them instead. Each seat fills as your finger crosses it, a drag that starts on one you picked wipes them away, and the price counts as you go. Drag across the seats.
Experiment
The studio’s light, by the hour
A dark mode reads better with a reason. Clay Room’s busiest night is glaze night, so I tie its page to the studio’s hours, not to a switch. Through the day the page stays paper and the photos take the sun. At dusk the dark comes in tile by tile from the far side, the last light holds by the window, and the evening’s class takes the page. Drag the sun.
Experiment
A label that picks its own ink
A brand can be any colour, so I don’t fix the button’s text to white. Each letter measures white and black against the colour right behind it and rolls over to whichever reads better, so the word stays readable even halfway between two colours. The mark on each bar is 4.5:1, the least text should have. Drag the button, or tap a side.
AI workflow
You answer the AI
I build AI steps into how a team works, and a team only trusts what it can see. Here the AI reads each message and shows how sure it is. Over 80%, it files the message itself. Under that, it stops and asks you, and it learns from your answer: the next one like it goes in alone. When it asks, tap Booking or Question.
Experiment
A card that opens into its page
When a tap cuts to a new page, people lose their place. Here the card’s own picture grows into the page and its name rises into the title, so you see where you came from, and closing puts it all back in the card. It moves on a spring, so it can turn round halfway. Tap a class.
Experiment
A total you can open
People drop a cart over a cost they only meet at the end. So the total opens into its parts. Each amount comes out of the number to its own line, and the total settles under them as their sum. Change the mugs and every figure rolls, and shipping shows how far it is from free. Tap the total.
Experiment
What visitors see before they scroll
Many people decide on a business from its first screen alone, so the order of a homepage is a business choice. Put a big photo first and the reviews that win trust wait below the fold. I let the phone restack as you drag, and a line says in plain words what visitors see before they scroll. Drag a section above the line.
chanut.dev
When each tile turns
The dissolve into the work is not one fade. Each tile has its own moment in the scroll, early at the bottom and late at the top, with some chance in it so the edge stays ragged. The x-ray paints every tile in the colour of its moment and lights the ones turning now, so you watch the scroll move through them. Your pointer or finger is a brush that holds the tiles near it back, less toward its edge. Hold the page or tap Show how, then scroll.
Experiment
A discount you can count
People take in “3 classes free” faster than “฿3,600 off”. So I made each class in the pass a tile, in rows of four, and the free ones turn over one at a time, slowly enough to count. The price stays, smaller, for anyone who wants the sum. Pick 12 classes.
Experiment
Hold to delete, no dialog
People click “Are you sure?” away without reading it, so I ask for a second of intent instead. Let go early and nothing happens, and Undo catches the rest. Hold the button.
Experiment
A button that breaks into the times still open
A calendar makes people hunt for a free slot. I let Book a class break into its tiles and come back as one button for each time still open, so the number of buttons is the room left. A full time comes back hollow. Pick a time and the tiles gather into your booking, in the same spot. Tap Book a class.
Experiment
Waiting, in the brand’s own tiles
The progress bar is built from the site’s tiles, so even waiting looks designed. Its glyphs keep moving while it fills, which says it is working, not stuck, and a wave runs through it when it is done. On a wider screen the menu itself builds beside it, row by row, as the file goes up.