Gryph Studio
Start a project開始合作

All work所有作品

Loquat Hair

A website for a small three-chair hair studio. Customers can see every price, choose the stylist who suits what they want and book a time, and their confirmation, reminder and thank-you texts go out on their own. 為一間只有三張椅子的小髮廊製作的網站。客人可以看到所有價格、挑選適合的設計師並預約時間,確認、提醒和感謝簡訊也會自動寄出。

Type類型
Concept (not a real salon)概念作品(並非真實店家)
What I did我負責
Design, writing, photography direction, build and an automation example設計、文案、影像規劃、製作與自動化示範
Languages語言
English and Traditional Chinese英文與繁體中文
Year年份
2026

Visit the site瀏覽網站 (opens in a new tab)(在新分頁開啟)

Loquat Hair home page: the headline Three chairs under the loquat tree beside a photo of the studio, with old barber chairs, green tiles and a loquat tree in the window

The brief需求

Loquat Hair isn't a real salon. I wrote myself the kind of brief a small neighbourhood hair studio might bring me, then built the site as if it were going live. 枇杷髮室並不是真實的店家。我替自己寫了一份社區小髮廊可能會提出的需求,然後當作真的要上線一樣把網站做出來。

The problem: with three chairs and three stylists, every phone call interrupts a haircut. Most calls are the same questions: how much is it, who's good at colour, are you free this week. People who come once don't always come back, and a small studio rarely remembers to ask happy customers for a review. 要解決的問題:只有三張椅子、三位設計師,每通電話都會打斷剪髮。大部分電話問的都是同樣的事:多少錢、誰比較會染、這週有沒有空。來過一次的客人不一定會回來,小店也很少記得請滿意的客人留評論。

So the site had to:所以這個網站必須:

  • show the whole price list, including what "from" means, before anyone calls,在客人打電話之前,就列出完整價目,包括「起」是什麼意思,
  • help people choose the stylist who's best at what they want,幫客人找到最擅長他們想做的項目的設計師,
  • let them book a real free time on their phone in about a minute,讓客人用手機大約一分鐘就能預約到真正有空的時段,
  • send the confirmation, the reminder and a review request without anyone typing them.不用有人手動打字,就能寄出確認、提醒和邀請評論的簡訊。

Where the design came from設計從哪裡來

I started from a layout type drawn from a study of 247 sites featured on One Page Love and Awwwards: a "split stage", where half the screen keeps a photo in place while the other half is read. In a salon, that photo can change to whoever you're reading about. 我從一份研究 247 個 One Page Love 與 Awwwards 收錄網站整理出來的版型開始:「分割舞台」,半個畫面固定放一張照片,另一半讓人閱讀。在髮廊網站裡,這張照片可以換成你正在看的那位設計師。

The rest came from the salon itself rather than from other salons. The name is the loquat tree by the door, so the colours are its dark leaf green and orange fruit on grey plaster, with the orange kept for the booking button. Headings are in a grotesk that feels like shop signage, and the running text is in a book serif, so the stylists' own words sound softer than the signs. 其他部分取材自這間店本身,而不是其他髮廊。店名來自門口的枇杷樹,所以配色是深綠的枇杷葉和橘色果實,配上灰色灰泥牆,橘色只留給預約按鈕。標題用有招牌感的無襯線字體,內文用書本襯線字體,讓設計師自己說的話比招牌更柔和。

What I decided, and why我的決定與原因

The price list on a phone: cuts and colour, each with a price and a one-line description

Every price, set like a menu所有價格,像菜單一樣排好

All thirteen services with their prices and a plain line about each. A note explains that "from" prices get confirmed in the chair before anything starts, which is the question people usually call about. 十三個項目都列出價格和一句簡單說明。旁邊的註記解釋標示「起」的價格會在開始前坐在椅子上確認,這正是客人最常打電話問的事。

A stylist's profile on a phone: her portrait by the green tiles, what she's best at, the days she works and her next free time

Pick the person, not just a time挑的是人,不只是時間

Each stylist has a short profile in their own words: what they're best at, the days they work and their next free time. On a computer the photo beside the text changes to whoever you're reading about. 每位設計師都有一段用自己口吻寫的簡介:最擅長什麼、哪幾天上班、最近的空檔。在電腦上,旁邊的照片會換成你正在看的那位。

The appointment card in Chinese, and below it the thank-you text that asks for a review, sent the day after

Texts that write themselves自己寫好的簡訊

As you book, an appointment card and three texts fill in with your name, service, stylist and time: the confirmation, a reminder the evening before, and a thank-you the day after that asks for a review. They follow the language you pick. It's labelled as an example and nothing is sent. 預約的同時,預約卡和三則簡訊會依你的姓名、項目、設計師和時間自動填好:預約確認、前一天晚上的提醒,以及隔天邀請留評論的感謝訊息。簡訊會使用你選的語言。這是標示清楚的示範,不會真的寄出。

The opening screen on a phone: the studio photo, the opening hours, the headline and a button to book a chair

The next free chair, right away一打開就看到最近的空位

The first screen shows the room, the hours and one button. Under it, the site works out the next free chair from the studio's diary and the time of day, so it's different every time you look. 第一屏是店裡的樣子、營業時間和一個按鈕。下方會依照店裡的行事曆和當下時間,算出最近有空的座位,所以每次打開都不一樣。

Around the site網站一覽

Loquat Hair

Where it stands目前成果

Because Loquat Hair is a concept, there are no customers to report on. The stylists, prices and address are made up, and the photos, the portraits and the short clip of the room are AI-generated. A real salon would use photos of its own room, team and work. 因為枇杷髮室是概念作品,所以沒有實際客人的數據。設計師、價格和地址都是虛構的,照片、人像和店內的短片都是 AI 生成。真實的髮廊會使用自己店面、團隊和作品的照片。

For a real salon, I'd measure three things: how many bookings come in online instead of by phone, how many people miss appointments before and after the reminders start, and how many new reviews arrive each month once the thank-you text is running. 如果是真實的髮廊,我會追蹤三件事:有多少預約是在網路上而不是打電話來的、開始自動提醒前後各有多少人沒來,以及開始寄感謝簡訊後每個月多了多少則評論。

The next step would be connecting the booking form to the salon's own booking system, so the free times are real and the three texts go out for real. 下一步就是把預約表單接上店裡自己的預約系統,讓空檔是真的,三則簡訊也真正寄出。

Want something like this for your business?想為你的店做一個這樣的網站嗎?

Start a project開始合作 Visit the site瀏覽網站 (opens in a new tab)(在新分頁開啟)