05 CHAIRLINE

Four kinds of people, one shop, one line.

ChairLine is a barbershop platform I designed at InnoGEV. It covers the owner’s iPad at the front desk, a check-in kiosk by the door, one phone app for every kind of barber, and booking pages a customer opens from a link or a text, with no app to download. I took it from a written brief to 285 screens and the design system they are built from.

A concept. Every shop, name and number on these screens is sample data.

ChairLine Today on the owner’s iPad: a column for each of three barbers with the hours down the side, and The line panel on the right with three walk-ins waiting — The front desk on the owner’s iPad: every barber’s day, with the walk-in line beside it.

INSPECT

Concept

MY ROLE

Product, UX and brand: the brief, the flows, the identity, the design system and every screen call

TEAM

Just me, at InnoGEV. I set the look, the variables and the first screens; Claude built the rest from my system

STATUS

Concept: designed in Figma, not built or tested with shops yet

01 PROBLEM

A barbershop is four businesses under one roof

ChairLine started with a request from a friend who owns a barbershop. He wanted his shop software to look and feel modern, so I designed it from the ground up: the front desk, the barbers’ phones and how his customers book.

The owner runs the shop, often while cutting. Some barbers work on commission for the owner. Others rent a chair and run their own business inside the shop, with their own prices and clients. Customers walk in or book. Each one needs something different from the same day, and some of it has to stay private from the others.

OWNERKeep every chair earning, collect rent without chasing anyone, and see where the money goes.
COMMISSION BARBERKeep the book full, run on time when walk-ins and bookings collide, and know today’s take.
RENTER OR INDEPENDENTGet clients booking directly, pay rent with no surprises, and keep their clients and numbers private.
CUSTOMERKnow the wait before committing, and book in under a minute with no app and no account.

The research behind my brief kept landing on the same three complaints about the tools shops use now: fees on new clients, payouts frozen with no reason given, and waits nobody could predict.

02 DECISION MY CONCEPT

Each barber’s day, with the walk-in line beside it

Grayscale wireframe of Today as a list: in the chair, the line and booked next, with a detail pane for one walk-in — Wire: a list with a detail pane, the recommended pick.

Today with a walk-in card being dragged from the line onto Jay’s column at 2:30 — Mine: a walk-in dragged from the line onto Jay at 2:30.

OPTIONS: Two wireframes: a list with a detail pane, or a board with one column per chair. The recommended mix picked the list.
PICKED: I drew the front desk myself: a column per barber with the hours down the side, so bookings, breaks and no-shows sit where they happen. The walk-in line is a panel beside it, and a walk-in is a card the owner drags onto a barber and a time.
ALSO ON IT: Day, week and month views, and the line count with the next walk-in in the bottom bar on every tab.

03 DECISION MY CALL

One barber app, and the role decides what it shows

Three phone screens: a commission barber’s Today with his share, a renter’s Money with rent at $170 of $250, and an independent barber claiming a booking link — One app, three roles: a commission barber’s Today, a renter’s Money, an independent claiming a booking link.

OPTIONS: My first brief had separate portals: one for employed barbers, one for renting and independent barbers.
PICKED: One app. A commission barber sees Today, Clients and Money. A renter or independent also gets Business: their own prices, hours, products and payments. A barber who moves from commission to renting keeps one account and one history.
THE HARD PART: Who owns the clients. A commission barber’s book stays with the shop unless the owner releases it, and he always keeps his own work record. Clients a renter brings in are always theirs.

Change terms for Marcus Lee: clients stay with the shop, pay moves to $250 a week rent, the shop covers his plan, and a panel showing what Marcus will see — Moving a barber from commission to rent. The right side shows what he will see before anything is sent.

04 DECISION MY CALL

Rent comes out of sales, and the owner never sees them

Three phone screens: choosing Rent Sweep or card and bank, the rent sheet with $80 left this week, and the share of each card sale set to 25% — Rent Sweep for a renter: the choice, the week so far, and the share of each sale.

PROBLEM: Booth rent is a weekly bill the owner has to chase and the renter has to remember.
PICKED: Rent Sweep: a share of each card sale, 25% unless the renter changes it, goes to rent until the week is covered. After that, everything is theirs. A backup card is charged only if rent is still short on the due day, and paying by card or bank stays an option.
PRIVACY: The owner sees rent as covered, due or late, and never a renter’s sales, prices or client list. A renter is a tenant, not staff, and the screens keep it that way.
STILL OPEN: Rent Sweep needs a lawyer’s review and Stripe’s sign-off before anyone builds it.

05 DECISION MY CALL

Every line on the bill says where it came from

The owner’s Money tab on Bill: monthly bills split into plan, Stripe accounts and texts, card fees from Stripe by month, and the October bill itemized — The owner’s bill: plan, Stripe accounts at cost and texts on their own lines. Card fees sit below, taken off payouts.

PICKED: Flat monthly plans: shops by size, independent barbers on one plan, customers free. ChairLine takes no cut of anyone’s clients.
AT COST: Stripe’s charges pass through at cost on their own lines, so the owner can see why the monthly total is what it is.
WHY: Hidden and creeping fees were among the most repeated complaints about the tools shops use now.

06 DESIGN SYSTEM

One system under five surfaces

Every screen in ChairLine is built from ChairLine-DS, the system I built in Figma alongside the product: 109 components and 66 patterns on 453 variables. All 91 barber app screens use only published components.

The four tiers, traced with two real tokens from the file.

STRUCTURE: Partway through, I rebuilt the variables into four tiers because they scale better: raw values, then a job for each value, then Light and Dark named by what they paint, then Desktop, Tablet and Mobile sizes. One token, surface/action, makes every main button ink in light mode and mint in dark.
RHYTHM: Every size and space sits on a 4 px rhythm. A review of the iPad rhythm retired the off-grid type sizes and line heights, then every component and pattern was brought onto the grid.
A SIZE CALL: The first input was 56 px tall, Material’s height, which assumes the label sits inside the box. With the label above, each field cost 78 px. I set one height, 48, level with the buttons and over Apple’s 44 point tap floor.

ChairLine-DS raw colour scales, mint, neutral, tangerine, red, green, amber and blue, each labelled with the job it gets — Tier 1: the raw colour scales, each labelled with its job.

The ChairLine input component in its states, including typing and error, and with icons — The input at 48 px, in each state and with icons.

07 HOW I WORKED

I set the system, then scaled the screens

I defined how ChairLine looks and feels and chose every variable in the system myself. Then I designed a few concept screens by hand, the front desk, clients, products, money and the barber sign in, to teach Claude my system and style. From there I scaled the rest with Claude: it researched each problem and built screens from my components, and I reviewed every screen, chose between options and sent work back. Because every screen is built on my system, the work stayed consistent across all five surfaces.

SCALE: 285 screens: owner iPad 130, kiosk 12, barber app 91, guest web 42, customer app 10.
BRAND: Three moodboards; I picked mint and tangerine. Then I questioned whether pastel mint read slick enough for a barbershop, so buttons and selected states moved to near-black ink, mint became the accent, and titles and prices went to Anton. The wordmark puts a barber chair in place of the L.
A SMALL CALL: Add product is scan or type in one sheet. A switch in the sheet’s header looked off, and Apple’s guidelines advise against a segmented control in a toolbar, so one button swaps between the two. I dropped the quantity stepper too: receiving stock is In stock plus Received, giving After, typed in one row.

Add product sheet open on the camera, with a Type it in button in the header — Scan first, with one button to type it in instead.

Edit product after a scan: In stock 14 plus Received 12 gives After 26, with unit and total cost — A known barcode opens the product, ready to restock.

Primary

On dark

Check-in kiosk asking Who would you like, with the wait for the first free barber and for each barber — The kiosk by the door shows each barber’s wait before anyone joins.

Three phone screens in Safari: the shop page with a walk-in line and barbers by hair type, the Join the line form, and You’re 2 away — No app needed: the shop page, joining the line, and the text when you are 2 away.

08 WHERE IT STANDS

Not built or tested yet: what comes next

STATUS: A concept, designed end to end in Figma on sample data. No code and no shops yet.
NEXT: A clickable pilot of the wireframes is ready, with five tasks for each role. The plan is 3 to 5 shops per role before anything is built.
WILL MEASURE: Customers booking in under 60 seconds, rebooking rate, and revenue per chair.
KNOWN GAPS: An audit of the file found input borders under WCAG’s 3:1 for controls and choice pills under Apple’s 44 point tap size on the phone. Both are logged with a fix. The marketing site is not designed yet.

Next: About